Creating a Design System

Problem

Like many older companies built over a period of time, Navigating Cancer struggled with UI consistency. As the company grew, so did the problem as new designers and engineers added their design and code variations. Ultimately this increased cognitive load on our users who grew frustrated trying to understand different formatting.

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

Audit existing interface elements across the platform; Define a design system strategy; Design solutions based on user-problems and best practices for usability and accessibility; Share and scale the Sketch Library and guidelines as we continue to learn, iterate, and add features.

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.

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 Pattern 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.

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. Currently, I'm working on integrating more interactive and accessibility specifications to the guideline.

©2020 by Jennifer Day Design.