Leading a team to build a new design system for an existing product that reduced lines of code by 30x

Simon Data has no real design system, and its current process is time-consuming and inefficient

‍

When I first started at Simon, a full product existed but there was no real design system.

‍

After completing my first project, I recognized that engineers were adapting Material Design to fit our designs, which was time-consuming and inefficient. I brought the idea of leading a design system project to my manager.

I did user research to convince stakeholders to add the design system to the roadmap and led a pilot project

‍

When I first brought up the idea of creating a design system, engineering leadership didn’t think it was necessary. To make a stronger case, I conducted internal research with both engineers and designers. The main takeaways were:

1. Everyone agreed Material UI was too robust for our needs and took significant time and effort to adapt to our designs.
2. We had an ever-expanding problem. The engineers were customizing Material UI in different ways, so our product was only getting more decentralized and inconsistent over time.

Armed with this research, I got the design system on the roadmap and assembled a team. We decided to carry out a pilot project, completing the whole design system process (design, implementation, documentation) for 1 component, in addition to changing it throughout our entire product.

We continued to define the design system through a redesign and built it during our Hackathon, showing a 30x reduction in lines of code

‍

In the process of completing our pilot project we defined: a token system, accessibility standards, behavioral attributes, and a documentation system. I also created a new visual identity. The project met all of our OKRs except those related to changing the component throughout the entire platform, which we struggled to get every team onboard with.

‍

We decided to pivot and redesign the Settings section of our product, which allowed us to mindfully define the rest of the foundations of our design system, including: type scale, typography, a grid system, spacing, naming conventions, and 50+ components.

‍

We strategically employed our Hackathon to get these designs built. In sharing our work, we showed that the design system reduced lines of code by 30x compared to our previous Settings section. This led stakeholders to commit using the new design system for all future features.

‍