Establishing a Scalable Design System

CoverHound offers many insurance coverages through multiple brands and through customized versions of their online quoting platform to other financial entities - it was important to find a common design language for common design components to enable faster designing and implementation.

Background

Working on multiple product teams with different developers, I noticed inconsistencies in font colors, forms, buttons, etc within the same site experience. We needed a Design System so that Designers can focus on solving problems vs. redesigning commonly used design elements such as header color, buttons, forms, etc.

Users

The two main users I wanted to focus on were Designers and Developers. From working with and speaking to Designers and Developers across different product teams, I’ve uncovered these pain points and identified needs in order to make the Design System usable.

Creating a Collaborative Workflow

Because this was a grassroots effort amongst our small team, I stepped up to manage the project to push it along. We met as a team to identify key deliverables and agreed on a workflow in order to make this a success.

Key Deliverables:

• Style guide

• Living Design Documentation

• Living Developer Documentation

Identifying Atomic Elements

Aside colors and fonts, we also wanted to establish common design elements that are on almost every feature so that Designers can focus on what they do best - solve problems. I took screenshots of every experience we had and grouped common components together:

“Atoms”

• Style (Fonts, Colors)

• Form Inputs

• Buttons

Iterative Design Process

After combining and narrowing down the designs, I worked with our Visual Designers to confirm all colors and designs were up on par with what was in the style guide and brand for forms, buttons, and modals. I also worked with our Developers to classify these components into an atomic design system.

MVP Design

Our final “minimum viable product” is two Living Design Libraries that contains documentation and code snippets to be used across all CoverHound platforms and experiences. We decided to split this for MVP because it would take more effort to add design documentation to the Developer platform on Storybook (Covered UI). Also, since our Design Team was shrinking, it made sense to focus on design documentation on Figma so when we on-board new Designers, they have base design library to work from. In the end it made for a great cross-functional team effort, and made developing and designing more efficient.

Design Documentation (Figma):

Covered UI (Developer) Documentation - I provided feedback on information architecture and themes implementation.

• Modal Documentation

• Developer Walkthrough (Progress Bar example)

Walkthrough

Challenges

1. Invisible Developer pain point

   • I observed a communication gap between Developers and their managers about the inefficiency of recoding design elements. To address this issue, I facilitated communication between them to bring the problem to light and get buy-in for having developers work on it in their spare time.

2. Never prioritized

   • This project was never prioritized, so it became a grassroots effort amongst the Product Designers and Developers. I stepped up as a Product Manager and UX Designer for this project in order to keep our team on pace to completing an MVP.

3. Multiple brands

   • It was a highly collaborative effort amongst Developers, Visual and Product Designers to create a solution in presenting designs for the many brands and partnerships we had. We landed on creating a theme at the style guide level which made it scalable for implementation on the atomic design level.

Next Steps

• Create Figma Library: This was deprioritized as our UX Design Team kept shrinking and we could manage the design elements amongst 1-2 designers

• Identify additional design components and patterns to add to the design system

• Improve the UI of the design documentation + include it on the CoveredUI (Developer) Platform

Next: Finding the Right Policy →