Building a design system

Platform: Web & Mobile

Role: Product Design

Collective Health is a benefits platform on a mission to make health care simple, understandable and supportive. They put emphasis on creating an intuitive user experience by investing heavily in product design. 

Collective Health's marketing website

Collective Health noticed that as their team grew, design styles and components were slowly becoming more numerous and less cohesive as more and more designers were working in parallel. In order to align designers on the team and combat growing design debt, they decided to create a cohesive design language system (DLS if you get excited about acronyms). Our job was to help them build the DLS, drawing on my past startup experience creating product-wide design systems.

An example of one (of many) product explorations

What's our goal?

Collective Health had two goals in creating a DLS. The first and primary goal was to create a cohesive and flexible system that would align designers and speed up implementation among the engineers.

However, they also wanted to redesign their product. Working with the rest of the DLS team (1 designer, 1 PM and an engineer) we explored several directions through style studies and archetypes, collecting continual feedback from stakeholder. After several rounds, we landed on a ‘final’ direction.  

Styleguide documentation

Starting small

At this point we had a ‘north star’, but where to begin? Taking inspiration from Brad Frost’s Atomic Design principles we started at the most basic elements (type, color, spacing and grid) and worked our way up in complexity (for example, a reusable table component or even a page template). 

Implementation planning with redlines

Rolling it out

We didn’t want to begin a six month project trying to build everything at once, but we also wanted to avoid shipping a ‘Frankenstein’ release that might damage the user experience in the short term. In the end we compromised by incorporating design changes at the ‘atomic’ level for the first release (spacing, grids, typography, color and iconography). 

This was the first and most important step in creating a more robust system that would build on itself. Eventually, we plan to create a comprehensive component library that would not only facilitate a more seamless user experience, it would further crystalize design standards for the entire product.

Before and after for the home screen

What would we do differently...

We like to learn from every project we work on. Part of the way we do that is by asking ourselves, "what would we do differently next time?"

For this project, we noticed how easy it is to get pulled into the pixels (for example, finessing icons endlessly into just the right permutation). It's not hard to loose focus and get sucked into the weeds when working on a project that is essentially concerned with details. But, looking back, we believe our most useful contributions came when we were able to get a '100 foot view' and make observations that improved the overall process for the design team.