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