A mortgage software startup asked us to create a design system to use within their multi-persona application platform within this complicated domain.
Role: White label design system co-creator
A design system was a relatively new concept back in 2017, so we did a lot of research on what other design teams had already discovered on their journeys to find and apply best practices.
The methods we chose to adopt for this modular system drew from experiences we had had in branding, identity design, cataloguing, and presentation design.
The initial Experience Attribute workshop sparked conversation about the future product’s look and feel.
To help establish a foundation for the UI look and feel — there was no existing framework — we used a technique we’d employed before: an experience attribute workshop, in which we used visuals to spark discussion among the stakeholders about what experience they wanted users to have with the interface.
The synthesis of these information-gathering sessions informed our first “style tiles”: exemplary fragments of stylistic direction. By checking in with stakeholders and tweaking our direction based on their feedback, the preferred style was applied to archetype screens and iterated.
The “Trustworthy” style tile, 1 of 4.
Then we were ready for the next phase: the audit.
To design any system, one has to have a good idea of the content of that system, as well as the people using it. It was easy to fall down rabbit holes here — the product and subject matter is unusually complicated, reflecting the nature of the mortgage industry and the multiple roles involved. The quantity and complexity of information could have easily overwhelmed.
When a project is too big to tackle all at once due to team size and/or time constraints, it has to be broken down into smaller, digestible pieces, and then planned in phases. We decided to focus our first phase on one user role – our primary persona, the borrower – whose artifacts formed the basis of the design system. We could then add other interface components when resources freed up. This approach would give us more time to fully understand our secondary personas’ goals, mental models, and workflows.
Our primary borrower personas, Ariel and Holly.
We took the advice of those who had traveled this way before, and grouped interface components such as buttons, tables, icons, etc from across three different user roles. We then organized this inventory into one document to be able to identify patterns and differences.
Example page of the audit of all interfaces.
Then it was time to redesign … everything.
After researching different design system managers, we picked one (DSM by Sketch), and started an intensive stretch of work in which we designed the components category by category, checking in with each other frequently to align our UX and UI patterns. We designed the atomic/foundational elements first, like color, type, and iconography, and then focused on larger elements, like molecules (buttons), and organisms (the messaging pane).
We gave updates to the wider company on a regular basis, and started meeting regularly with the development team. Our goal was to create a design system that functioned as a library, where developers and designers could access and refer to the same components, and stop reinventing the wheel every time something new was designed.
One of the hardest things to do after creating a design system is to keep it up to date, as forewarned by the wider design community at the beginning of the design system process. In 2019, we decided to invest the time and effort to move the design system into into a more robust and responsive application, Figma. This proved to be a great catalyst for our process, allowing us to explore ideas, share them with the greater project team easily, and iterate quickly.
To establish a naming convention for Variants, a new categorization system within Figma, we created a visual mapping system.
We’ve brought the design system a long way…
…but we hope to take it even farther:
