Championed a design system overhaul that gave the company the technical ability to 10x the business after its introduction.
Fabricās original component library was custom-built from brand guidelines and not a true design system. Because of this, designs lacked consistency, leading to both design and development inefficiency as every page was custom-built. The system was also not WCAG-compliant.
Leadership did not see the value in implementing a new design system
I found an ally in a Staff Engineer who helped me champion the benefits of a design system. After several months of building the business case, I was finally able to get buy-in from Leadership.
Our engineering teamās capacity was slimāwe needed a low effort solution
I worked with my Staff Engineer to identify both engineering and design needs and land on a solution that both teams could implement and update as needed.
We had just one quarter to bring our design system to life
We took advantage of a lull in the year to convince the company to prioritize a design system and built on top of Googleās Material UI for faster implementation.
Market analysis and internal audit
Building the visual hierarchy
Expanding our toolkit of components
Working with Engineering on implementation
Initial design system and improvements made post-launch
We looked at well-known design systems for inspiration, such as IBMās Carbon, Atlassian, Mailchimp, and Googleās Material Design.
Ultimately, after consulting with Engineering, we decided to build a custom adaptation of Material Design 2 by Google. To implement, we used the React component library Material UI (MUI), which allowed us to move quickly and utilize industry best practices.
We conducted an audit of our current system and identified our most commonly used components and design tokens that needed to be updated. Luckily, at that point, we only had one product and therefore a limited set of both. However, I knew that the new design system would be crucial to our ability to scale the platform.
We took our internal audit results and started by addressing issues with our foundational design tokens. Our key focus was on scalabilityāwe were not just building the foundation for our current life insurance product, but the foundation for future products as well, so we wanted to give ourselves options that could scale as we grew.
Key changes we addressed were:
As an example, here was the previous color palette. It was originally built for Brand only and shoehorned into the product experience. The limited nature made accessibility and scalability difficult.
Here is the updated color palette that I built, which consists of multiple tones and shades but retaining the brandās signature purple color. This new palette makes it easy to create accessible components and patterns across both Product and Brand design.
We went through our entire inventory of design tokens, creating an accessible, consistent, and scalable system of typography, spacing, radii, and surfaces. We also identified tokens for various states, such as error, warning, success, and hint states.
With our new foundation of design tokens, we began updating our components and patterns. Below is an example of one of our most commonly used patterns for the life insurance application flow: a question with a boolean response.
Here is the updated UI, which offers a clearer user experience, decreasing cognitive load and optimized for mobile, our most commonly used viewport.
Engineering was one of our key allies when it came to getting the design system overhaul on the roadmap, and we continued to work closely throughout the entire process.
How we managed the process:
We launched our new design system, called āBoltā (like a bolt of fabric) within one quarter. Since then, it has allowed us to:
Since launch, we are constantly learning and improving our design system:
