Madison Reed

Design system rebuild

Rebuilding the Madison Reed design system
Product/UX Design
Engineering

Challenge

Madison Reed is a direct-to-consumer hair color company. During my tenure there, I owned and led user experience design on the e-commerce vertical.

The engineers and former designers had 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. The lack of a well-maintained design system was slowing down both design and engineering processes, and resulting in inconsistent designs on the website. We needed to rebuild the design system so that we could solve customer problems and build new features more efficiently.

Outcome

I started by working with our Lead Engineer to restructure the design system into set a clear system components – the component stylesheet for engineers, the Figma UI Kit for designers, and an internal reference site for both teams. We formed a dedicated Slack channel to discuss design system needs with all of the website engineers and collectively defined our new design tokens. With this foundation, we were able to efficiently rebrand the website's fonts and colors, and the team now has a more streamlined process for updating the design system. I also designed a more intuitive user interface for the reference site and provided engineering guidelines for how to maintain the design system.

To ensure that our new design system would not become abandoned as well, I made sure that the engineers were involved every step of the way. We learned that it's important to center the needs of engineers as much as the needs of designers because the system’s success depends on it being maintained and referenced often by both teams.

The new design system is used across the entire website to define appropriate design patterns for each type of user interaction.

Project background

Madison Reed is a multimillion dollar company specializing in ammonia-free, at-home hair color products and has 30+salon locations across the U.S. As one of the two product designers in the company, I led the design of the e-commerce website, which is the company's largest revenue stream.

My design work at Madison Reed includes: the Madison Reed Mister website, the Hair Color Bar pages and booking flow, and new navigation menu (coming soon).

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

Tools

Figma
Zeplin
HTML/CSS

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.