Back story

I was fortunate enough to lead all CareRev design efforts—both Brand and Product—from 2020 to 2022. During that time, Brand Designers and Product Designers were able to align with one another through shared goals and objectives. But in 2022, the company’s Brand Designers were re-organized to sit under Marketing while I reported to Product with Product Designers reporting to me.

This separation posed a challenge: How might we maintain brand consistency within the Product with our two teams now pursuing different quarterly goals?

Implementing a design system at that point became a crucial solution to address this challenge. 

‍

Processs

‍

Resourcing

The reality of CareRev as a small, series A startup, is that teams needed to run lean, and product development resources needed to prioritize work defined on our Product roadmaps. This meant any specialized DesignSystem work needed to be done in our spare time.

In the meantime, as I planned and made small strides in implementing this design system over time, I pushed to prioritize Design System work on future roadmaps as much as I could—no easy feat!

Because of the lean nature of our work, I focused on developing our Design System atomically—smallest tokens first. I facilitated multiple workshops and discussion sessions between Product Designers and Brand Designers to ensure our efforts and decisions were collaborative.

‍

Tools

• Figma: Tokens, styles and guidelines were set up in published libraries within Figma, our main design platform.
• Zeplin: With its capabilities to keep updated component libraries in sync with Storybook, this was our Front-End Engineers’ top choice for design communication.
• Storybook: An online repository that kept track of existing components and tokens as they existed in-Product. 

‍

Tokens

• Color tokens, based on current brand colors directed by the Brand Design team, were created with accessibility in mind.some text
  • Key colors: Brand colors that became the base of all color palettes created
  • UI palettes: Main palette, which included neutrals, primaries, secondaries, and accents; Extended palette was created for use in visualizations, illustrations, color-coded elements, and semantic color usage. 
  • Themes: Our Android and iOS apps required palettes of reference tokens that helped engineers make color decisions, instead of making them guess from our base color values.
• A typography scale was created based on Material Design, using fonts defined by the brand.

‍

Implementation

Implementation was a slow, intentional process. Each time a new update was made to the Design System, it would be posted in a shared Slack channel with contributors, and go through several discussions with all designers and front-end engineers to ensure clarity.

Colors were implemented and refined first, while typography came next. Only then were we able to begin building out our component libraries, organized separately by component. This ensured that changes made to tokens could be closely monitored on each component, and that teams would be able to see when changes were made. 

‍

Retrospective

The implementation of a new Design System to any product can be painful and challenging. This project was slow, yet intentional—this intentionality paid off in the end: It kept the integrity of our brand mostly intact, and allowed designers and engineers to streamline the design implementation process. Overall, the project took about a year and a half from concept to implementation, and even longer for executive leadership to see the value in its existence. My hope is that it continues to evolve and streamline product development.