Jordan Schnarr | UX/UI Designer
Jordan Schnarr | UX/UI Designer
As the lead designer for Kenvue's digital design system, I spearheaded the creation of a comprehensive design framework for our websites, built entirely in Figma. This system stands out as one of the largest to leverage Figma variables at the time of its launch, enabling dynamic and scalable design solutions. This case study is an ongoing exploration, as our design system continues to evolve and expand daily to meet the needs of our growing digital presence.
Kenvue owns a vast network of over 440 websites deployed across numerous countries and regions, representing a large-scale, dynamic project that demands continuous management and daily development to ensure consistency and growth.
My role encompasses creating and tokenizing components using Figma variables to ensure scalability and consistency. I collaborate closely with the development team to ensure accurate implementation of components and an intuitive experience within Contentful, our headless CMS, for website builders. I ensure all components comply or make enhancements so that they will comply with WCAG accessibility guidelines and work with individual brand UX designers to align website themes with brand guidelines. Additionally, I document component usage, anatomy, processes for site creation and updates, and accessibility standards to support seamless adoption and maintenance.
Kenvue, a global leader in consumer healthcare, owns an extensive portfolio of over 100 well-known CPG brands, including Listerine, Neutrogena, BAND-AID, Tylenol, Motrin, Zyrtec, Benadryl, Johnson's Baby, and Aveeno. Working with such a diverse and impactful catalog of brands enables me to contribute meaningfully to improving everyday lives on a global scale.
The development of Kenvue’s digital design system began in early 2023, initially exploring Token Studio to manage the extensive portfolio of over 100 consumer healthcare brands. However, the sheer volume of brand collections overwhelmed Token Studio, causing frequent crashes. The release of Figma Variables in June 2023 marked a turning point. Inspired by Figma’s keynote presentation featuring Ford, I immersed myself in the new feature, leveraging it to build a robust variable-based design system tailored to Kenvue’s needs.
Adapting to Figma Variables presented challenges, notably the limitation of 40 modes per collection, which required creative workarounds. To accommodate Kenvue’s vast brand catalog, I organized brands into five distinct collections based on need states, such as grouping Tylenol and Zarbee’s under “Pain” and “Vitamins & Supplements,” and Zyrtec, Nicorette (UK), and Imodium under “Allergy,” “Smoking,” and “Digestive Health.” The process of creating tokens was initially time-consuming due to the lack of efficient duplication methods, requiring multiple iterations for each brand. Despite these hurdles, I successfully established tokens for all 100+ brands, incorporating light and dark theme options to ensure versatility. My front-end development expertise further enabled the creation of specialized string tokens, streamlining component customization for developers. For instance, I implemented button color variations to align with different banner backgrounds, minimizing token duplication while maintaining design consistency across the system.
The creation of Kenvue’s digital design system prioritized responsive components to ensure seamless adaptability across various devices. Adopting a mobile-first approach, all components were meticulously designed to be responsive, leveraging Figma Variables to define different device sizes. By adjusting variable modes within Figma artboards, components could effortlessly adapt to different screen sizes, streamlining the design process. This approach significantly accelerated the workflow for individual brand UX designers, enabling them to create and hand off designs to developers with greater efficiency and precision, ensuring a consistent user experience across platforms.
Applying tokens to components was a critical aspect of the design system’s development. Each component was built with comprehensive styling considerations, including background color, border color, border radius, padding, typography color, and size, tailored to the specific needs of each of Kenvue’s 100+ brands. By utilizing semantic variables unique to each brand and linking them to component-specific tokens, the process of locating and applying these tokens became intuitive and efficient. This structured approach ensured consistency and scalability, allowing designers to maintain brand integrity while simplifying the application of styles across diverse components.
The design system encompasses over 75 unique components, empowering website builders to showcase brand content in versatile and engaging ways. The use of Figma Variables not only facilitated the rapid creation of these components but also streamlined the documentation process for developers. By providing a robust library of responsive, tokenized components, the system enables website builders to craft visually cohesive and accessible digital experiences that align with each brand’s identity, enhancing both development speed and end-user satisfaction.
With the completion of tokens and components in Kenvue’s digital design system, the focus shifted to developing page templates to streamline content presentation. These predefined templates were crafted to provide UX designers and brands with tools to deliver a seamless user experience, informed by prior consumer feedback and analytics. The responsive templates encompassed a variety of page types, including home pages, product listing pages, product detail pages, articles, contact pages, dosing pages, and coupons. By leveraging these templates, the efficiency of design creation and delivery to developers was significantly enhanced, enabling faster and more consistent development of each brand’s website.
To support the development process for Kenvue’s digital design system, I provide developers with comprehensive documentation detailing the tokens associated with each component. These tokens are meticulously organized, clearly listed, and color-coded according to their respective variable collections, ensuring clarity and accessibility. This structured approach enables developers, particularly those working remotely across different time zones, to quickly find answers to their questions, streamlining their workflow and enhancing collaboration on brand website development.
