Unified Design
I advocated for and eventually led the creation of a scalable design system, which will hopefully improve workflow efficiency by 10%, reduce UI inconsistencies by 30% and streamline design-to-development collaboration.
Lead UX Designer @ Kenvue, In Progress
Rogaine's teams struggled with inconsistencies, duplicated work, and inefficiencies from unstandardized UI.
Without centralized guidelines, maintaining brand alignment across products was challenging, highlighting the need for a scalable solution to improve consistency and collaboration.
As Lead UX Designer, I developed and championed a new design system.
Many thanks to all of my cross-functional partners who worked to bring this to fruition. It indeed took a (small & agile) village.
The goal was to create a design system that was adaptable and scalable.
👩🏻 User Goal
Create an accessible and engaging experience across all pages through consistency and usability.
🎯 KPI
UI Consistency, Usability Rate
💼 Business Goal
Streamline workflows, enhance collaboration, and scale efficiently to reduce time to market.
🎯 KPI
Design to Dev Time, Adoption Rate
✨ Impact
A reduction in design debt can free up time to innovate new shopping experiences.
In 2022, there was no centralized digital brand guide.
When I was assigned to Rogaine as their first dedicated UX Designer, existing guidelines focused on packaging and marketing media rather than web experiences. This was a common experience across hundreds of brands in the Kenvue portfolio.
To address this, the UX team created a digital style guide template, providing the first structured attempt at design consistency across brands.
In 2023, we discovered collaboration challenges and migrated to Figma.
Teams adopted the templated brand style guides that were built in Adobe XD, which helped improve design consistency and developer alignment. However, frequent share link changes and restricted access caused inefficiencies.
There were also ongoing questions about website components, which signaled a need for better documentation and standardization.
Since Adobe planned to sunset XD, we decided to migrate to Figma so we could address application limitations we were facing with XD. Migration would require significant effort so any plans to refine style guides were postponed.
In Q1 of 2024, I started the build of Rogaine’s first Figma-based design system.
To ensure scalability, I decided to follow Brad Frost’s Atomic Design methodology. Atoms, Molecules and Organisms would be Foundations, Components and UI Patterns.
This framework would create consistency across products and hopefully improve collaboration between designer and developer.
In Q2 & Q3 I scaled the system for platform changes.
The D2C portfolio was migrating from Salesforce Marketing Cloud to Shopify, and I took the opportunity to expand the design system by creating a template file of all existing site pages.
The template file is a visual guide for all of the pages, built of components from the component library.
At the end of 2024, I met with the development team for feedback.
At the development team’s request. I built the system first before gathering feedback due to resource constraints. It was well received, and the team planned to rebuild the entire site using the system alongside a rebrand initiative.
ROGAINE DESIGN SYSTEM 2.0
Next up is to measure and refine the system.
With the new theme set to launch April 2025, I’m collaborating with the product owner and data analysts to define further efficiency metrics for the design system. Additionally, I plan to conduct a qualitative survey to gather feedback on its effectiveness to identify areas for improvement.
A BETTER CHECKOUT
Reducing friction for faster checkout.