summary.
Like Kleenex is to tissue, Rogaine is to hair regrowth. Rogaine.com is the eCommerce platform aimed at providing hair regrowth solutions for its customers. Before the implementation of a comprehensive design system, teams faced challenges with visual inconsistencies, inefficient workflows, and misaligned brand guidelines. As their sole UX Designer, I advocated for and eventually led the creation of a scalable design system, which will hopefully improved workflow efficiency by 10%, reduce UI inconsistencies by 30% and streamline design-to-development collaboration.
the current state of the design system in figma.
the issue.
Before the design system, teams across Rogaine struggled with visual inconsistencies and a lack of standardization in UI components. Designers and developers often duplicated efforts, resulting in longer project timelines and inconsistent brand experiences. Additionally, the absence of centralized guidelines made it challenging to maintain brand alignment across multiple products. These inefficiencies highlighted the need for a scalable solution to ensure consistency, efficiency, and collaboration.
my role.
As the Lead UX Designer, my responsibilities included advocating for the system, auditing existing UI components, defining design principles, and ensuring alignment with both user needs and business goals. Success will be measured by KPIs, such as improved workflow efficiency, reduced design inconsistencies, and faster design-to-development handoffs.
Our agile team was made up of two developers, a engineer manager, a product manager, a business manager, and two data analysts.
Tools & Techniques Employed
- Communication and collaboration
- Figma
- JIRA
branding guidelines, given in pdfs, generally just covered the look and feel of digital assets rather than a comprehensive guide to website components.
the journey.
Rogaine's design system has been a dynamic, evolving project that has grown from a simple style guide into a comprehensive system with design tokens. This journey has been both educational and transformative, shaping how we approach consistency and scalability in our designs.
2022.
When I joined Johnson & Johnson's (now Kenvue) first in-house UX team in 2022, I was assigned to Rogaine as their dedicated UX Designer. Prior to that there was one designer that was shared between multiple brands.
Our team manager observed well before I joined the company that none of the brands had an official single source of truth for their digital brand guidelines. It was common to see a branding guide, but rarely did the branding guide give comprehensive instruction for brand's website, it primarily covered packaging, banners, etc.
To address this, the team lead collaborated with the manager to develop an official style guide template that team members could customize for each brand. As part of the broader team we'd give feedback on the new template until we reached an agreed upon solution. Thus, the first digital style guide was born.
the first digital style guide we created in Adobe XD.
2023.
This year focused heavily on adopting and utilizing digital brand style guides built in Adobe XD. While the documentation was relatively simple, it significantly improved design consistency and provided developers with a reliable source of truth for changes, ensuring alignment with the UX team.
However, limitations with Adobe XD became apparent, particularly when updating files. Each update generated a new share link, leading to confusion with multiple links in JIRA tickets. Later, company-wide permission changes restricted the creation of public links, making file access cumbersome. These collaboration challenges, coupled with ongoing questions about website components, underscored the need for a more robust system.
With Adobe’s announcement to sunset XD, the team decided to transition to Figma. Migrating and rebuilding files in Figma required significant effort, and plans to address style guide pain points were postponed to align with the development of a new system in Figma.
ah, the days of Adobe XD, I don't miss it.
2024.
Q1.
At the start of 2024, our focus remained on fully transitioning to Figma while continuing to migrate and adapt existing files. By April, I built the first version of Rogaine’s design system in Figma, guided by Brad Frost’s Atomic Design methodology.
This approach structured the design system into three foundational levels:
- Atoms: Core elements like colors, typography, and spacing, which served as the building blocks for the system.
- Molecules: Small, reusable components such as buttons and input fields, created by combining atoms.
- Organisms: Larger, more complex patterns like navigation menus or product cards, made by assembling molecules.
This hierarchical structure allowed for a scalable and organized design system, making it easier to maintain consistency across products and enabling developers and designers to collaborate more efficiently. The first version of the system laid a solid foundation for future iterations and helped streamline my workflow.
Rogaine Design System V.1, in Figma.
Q2 & Q3.
During Q2 & Q3 of 2024, all of the D2C portfolio migrated from the Sales Force Marketing Cloud platform to Shopify. I was also notified of a full rebrand effort that would take place after the migration. I used this opportunity to improve upon the existing design system by adding a separate template file that displayed all of the existing pages on the site, which would be built from the components in the design system file.
the template file is a visual guide for all the pages, built of components from the design system file.
Q4.
At the start of Q4, I met with Rogaine's development team to get feedback on the design system build. While I would have loved to collaborate before I built the system, it was requested by the development team to build something out first since development resources were already limited.
Overall it was well received and the plan was to use the design system to completely rebuild the site in conjunction with the rebranding effort. The whole site would be built anew versus trying to repair the current site theme.
Rogaine Design System V2, 2025.
next steps.
The current release date for the new theme is April of 2025. In the meantime I am working with the team's product owner and data analysts to determine ways we can measure the efficiency of the design system. I would also like to run a qualitative survey to collect feedback on if the design system is effective and what I can do to improve upon it.