Role

Worked as design lead on the project, lead workshops to introduce design team to new concepts, oversaw implementation, and guided designers to make their own contributions with new components. Communicated with development through the realization of the project and translating the component library into a Storybook document.

Timeline

1 year

Team

Design Lead

3 Product Designers

3 Software Engineers

1 UX Researcher

Building the case for a design system

On the outset, Sureify lacked a singular design system across the multiple brands and products it was supporting. Inconsistencies in the implementation were glossed over, and there was a lack of a single source of truth for the components we were using. Initially, this was seen as a non-issue, as many of our clients were describing our design as “best in the business” at the time.

As our product offering and teams grew, however, the inconsistencies between our products, our designs, and their implementation became a real issue for end users, and therefore a problem for carriers. This led to efforts within the org to start a design system.

• We had multiple cases of clients reporting visual, accessibility, and usability bugs, which were difficult to track down and fix.
• Similar components, or even flows that could be used across multiple products, were built to be single-use.
• Turnaround time was slow, due to having to build things from scratch.
• Communication was difficult, because of differing guidelines, terminology, and components.

We desperately needed a shared language between design and development teams.

Plotting out a comprehensive design system

Sitting down with the design team, we eventually got to a nice list of goals for our design system.

• Create comprehensive design tokens and Figma components that would be in sync with their React counterparts.
• Address issues in implementation and ensure consistency across designs.
• Make the system accessible, easily customizable, and compliant with WCAG 2.1 standards.
• Allow the design system to work on top of white-labeled products and be replaced with branded versions with ease.
• Track similar design patterns and components across our products.

Component library

The design and development teams agreed on using the MUI framework. I built a Figma component library with specified tokens and included a changelog to communicate necessary changes to the base MUI components for alignment with our design system.

We organized workshops and 1:1s to align everyone on Figma components and their usage. We devised acceptable "hacks" for purpose-built components, easing the development team's burden. The design team was receptive, enabling effective synchronization.

Organization and additional libraries

To help organize our design system, we also created a pattern library in which bigger elements such as screen templates or design patterns would live. Additionally, we created a data visualization library that included a vast array of customizable charts based on the Nivo React library.

While the team was transitioning from Sketch to Figma, I set up a "helper" library with annotations and page covers to establish structure and organization for our new Figma file system.