Madison Reed

Design system rebuild

Rebuilding the Madison Reed design system
UX Design
Engineering

Challenge

The lack of a well-maintained design system was slowing down the design and engineering processes. We needed to rebuild the design system so that we could solve customer problems and build new features more efficiently.

Outcome

I worked with our Lead Engineer to restructure the design system and create new design tokens. We also created a dedicated Slack channel to discuss design system updates and needs with all of the engineers in our vertical. With this foundation, we successfully updated the website’s global colors and fonts per our new branding guidelines and we now have a more streamlined process for updating the design system. The team is excited to keep building it out!

Project background

Madison Reed is a direct-to-consumer hair color company. I’m one of two product designers on the team and I lead user experience design on the e-commerce website.

The engineers and former designers built the first iteration of Madison Reed’s design system in May 2019. However, it was not well-maintained and had been completely abandoned by the time I joined in May 2020. To ensure that our new design system would not become abandoned as well, I’ve been making sure the engineers are involved every step of the way. It’s important that the needs of engineers are centered as much as those of designers because the system’s success depends on it being maintained and referenced often by both teams.

If you would like to hear about my design process in detail, please contact me.

Tools

Figma
Zeplin

This case study is one of many projects that I've worked on as a product designer. If you'd like to learn more, feel free to reach out to me or check out my other case studies.