Creating a Design System
Problem
Like many tech companies built over a period of time, our Navigating Care platform had a lot of UI and UX inconsistencies. The inconsistencies and poor usability caused our users to be frustrated and abandon some features altogether. Because of poor usability, our products also required heavier training and customer support time than easier-to-use products. As the company grew, so did the problem as new designers and engineers were adding their design and code variations.
Goal
Reduce cognitive load for our users by improving UI consistency; improve efficiency and collaboration for designers with a published component library; reduce build time by supporting engineers to build a new react component library.
Process
Surface the problem by auditing existing interface elements across the platform; design for reusability by discovering cross-platform needs; define a design system strategy; publish and share a library & documentation by utilizing the symbols framework and layout tools in Sketch.
Outcome
Designers throughout the company are now using, supporting, and contributing to this new design system. Engineers throughout different product areas reference this guideline when building our new front-end components in React.
%20button-call-to-action.png)
%20summary-card.png)
%20input-select-lists.png)
Elements such as color, grid, and buttons provide a foundation for more complex patterns that help solve user problems. A design system helps us build better experiences for our users by supporting cross-platform consistency and standards.
Process:
Surface the Problem
Throughout my design work, I kept coming across inconsistencies across our platform's UI. I began tracking the inconsistencies to improve the quality of my own design work. As the company grew and the problem worsened, I continued to collect samples to help highlight the problem and make the case for finding a solution.
In the example below, I collected snapshots of how timestamps displayed inconsistently. Users would have to hunt for date-and-time in different places and then try to understand all the different formats.
Design for Reusabability
For the timestamp example, designing a reusable pattern would require a clear understanding of the user problem we were solving with this UI element. I met with other designers to learn how they were planning timestamp display in their design work. I conducted user interviews with clinicians working in different parts of the platform to understand the common user needs at a global platform level.
After this research, I created a solution for my timestamp pattern that included standardized formatting, as well as display rules that could work across the platform.
My timestamp solution also helped inform technical requirements for sprint planning, by clearly defining which platform events should trigger the display. By using a thoughtful pattern-based design approached, designers and engineers were better aligned, had a shared understanding of what user problems we were solving, and how we might scale to solve for future vision.
Define a Design System Strategy
As I continued to work on features across the platform, I began using pattern-based UI elements in my designs which brought more cohesion to products, and clarity for engineers. I now needed an approach to building our design system in a more methodical way. After researching various design systems, I adopted an atomic design* approach.
I defined and planned our desired set of patterns, then brought in a lead engineer to collaborate on naming conventions to help build good communication between designers and engineers.
Publish a Library & Documentation
I built a Sketch Library of patterns to share with designers across the company. With one source-of-truth for designers to pull patterns from, we immediately experienced better alignment in our design work.
I built a corresponding design system guideline that provides documentation and examples. I used the guideline to ground conversations with engineers and give a point of reference. Over time, engineers began to reference this documentation when they begin any front-end work.
%20checkbox.png)
The Sketch library and corresponding documentation have led to increased cross-platform consistency, improved user experiences, and better team collaboration. I continue to evolve the patterns and work with designers and engineers across the company to build new patterns when needed.
My next steps include integrating interactive and accessibility specifications in the guideline. I'm also in the process of migrating the design system from Sketch to Figma for easier publishing and design-team collaboration.