A New Design System for Unilever's North American Personal Care and Food & Refreshment Brands
A New Design System for Unilever's North American Personal Care and Food & Refreshment Brands
A New Design System for Unilever's North American Personal Care and Food & Refreshment Brands
Between 2017-2018, I led the development of Unilever's "Starter Kit," a comprehensive design system and template library that transformed how 35 North American Food & Refreshment and Personal Care brands create and optimize their digital presence. This project addressed the critical challenge of maintaining brand uniqueness while achieving operational efficiency, WCAG AA compliance, and best-in-class user experiences across a diverse portfolio of consumer brands.
Between 2017-2018, I led the development of Unilever's "Starter Kit," a comprehensive design system and template library that transformed how 35 North American Food & Refreshment and Personal Care brands create and optimize their digital presence. This project addressed the critical challenge of maintaining brand uniqueness while achieving operational efficiency, WCAG AA compliance, and best-in-class user experiences across a diverse portfolio of consumer brands.
Between 2017-2018, I led the development of Unilever's "Starter Kit," a comprehensive design system and template library that transformed how 35 North American Food & Refreshment and Personal Care brands create and optimize their digital presence. This project addressed the critical challenge of maintaining brand uniqueness while achieving operational efficiency, WCAG AA compliance, and best-in-class user experiences across a diverse portfolio of consumer brands.
At a Glance
The Challenge: Create a flexible design system that could deliver a best-in-class user experience while meeting the distinct brand and functional needs of 35 individual products. The solution had to enable rapid, cost-effective creation of WCAG AA compliant websites—while remaining scalable for future growth and evolution
The Solution: A comprehensive web design template and tool library, utilizing atomic UX design principles and organized around four strategic page types (Storytelling, Product, Editorial, Utility) centered on Consumer Journeys.
At a Glance
The Challenge: Create a flexible design system that could deliver a best-in-class user experience while meeting the distinct brand and functional needs of 35 individual products. The solution had to enable rapid, cost-effective creation of WCAG AA compliant websites—while remaining scalable for future growth and evolution
The Solution: A comprehensive web design template and tool library, utilizing atomic UX design principles and organized around four strategic page types (Storytelling, Product, Editorial, Utility) centered on Consumer Journeys.
Impact Summary
Operational Efficiency
Reduced implementation and admin burden through standardized, reusable design components and streamlined development processes.
Business Performance
Supported business objectives by providing clear paths to online sales and marketing initiatives through strategically designed commerce-focused user journeys.
Accessibility Leadership
Established WCAG AA compliance as standard across all brand websites, ensuring inclusive digital experiences for all users.
Scalable Foundation
Created system designed for immediate implementation and long-term growth, accommodating evolving brand needs and market demands.
Impact Summary
Operational Efficiency
Reduced implementation and admin burden through standardized, reusable design components and streamlined development processes.
Business Performance
Supported business objectives by providing clear paths to online sales and marketing initiatives through strategically designed commerce-focused user journeys.
Accessibility Leadership
Established WCAG AA compliance as standard across all brand websites, ensuring inclusive digital experiences for all users.
Scalable Foundation
Created system designed for immediate implementation and long-term growth, accommodating evolving brand needs and market demands.
Impact Summary
Operational Efficiency
Reduced implementation and admin burden through standardized, reusable design components and streamlined development processes.
Business Performance
Supported business objectives by providing clear paths to online sales and marketing initiatives through strategically designed commerce-focused user journeys.
Accessibility Leadership
Established WCAG AA compliance as standard across all brand websites, ensuring inclusive digital experiences for all users.
Scalable Foundation
Created system designed for immediate implementation and long-term growth, accommodating evolving brand needs and market demands.
Impact Summary
Operational Efficiency
Reduced implementation and admin burden through standardized, reusable design components and streamlined development processes.
Business Performance
Supported business objectives by providing clear paths to online sales and marketing initiatives through strategically designed commerce-focused user journeys.
Accessibility Leadership
Established WCAG AA compliance as standard across all brand websites, ensuring inclusive digital experiences for all users.
Scalable Foundation
Created system designed for immediate implementation and long-term growth, accommodating evolving brand needs and market demands.
The Problem
Unilever's 35 North American brands faced significant challenges in their digital presence:
Inconsistent User Experiences: Each brand was developing websites independently, resulting in fragmented user experiences and inefficient resource allocation.
Compliance Gaps: Many existing websites lacked WCAG AA compliance, creating accessibility barriers and potential legal risks.
High Development Costs: Custom development for each brand was expensive and time-consuming, limiting agility in market response.
Brand Identity Constraints: Previous solutions failed to accommodate the unique identity and functional needs of diverse consumer brands.
Fragmented Tools and Utilities: Lack of standardized forms, store locators, and checkout processes created inconsistent user experiences across the brand portfolio.
The organization needed a solution that balanced standardization with brand flexibility while meeting modern accessibility and user experience standards.
Launched in 2006, Amplify mCLASS had evolved into a powerful but frustrating platform. Despite multiple updates, the system's steep learning curve was causing significant issues:
Administrative Overload: Teachers spent excessive time navigating complex interfaces instead of focusing on student instruction.
Hidden Functionality: Many educators were unaware of the platform's full capabilities, viewing mCLASS as a requirement rather than an advantage.
Esoteric Language: Over-reliance on acronyms and unclear actions made the platform inaccessible to users of all experience levels
Unpredictable Interface: Inconsistent functionality created a "Mine Sweep" experience where teachers couldn't predict system behaviorData-Driven Design: Platform structure was dictated by data availability rather than user context and actual classroom needs
The result was widespread teacher frustration and underutilization of a potentially powerful educational tool.
Launched in 2006, Amplify mCLASS had evolved into a powerful but frustrating platform. Despite multiple updates, the system's steep learning curve was causing significant issues:
Administrative Overload: Teachers spent excessive time navigating complex interfaces instead of focusing on student instruction.
Hidden Functionality: Many educators were unaware of the platform's full capabilities, viewing mCLASS as a requirement rather than an advantage.
Esoteric Language: Over-reliance on acronyms and unclear actions made the platform inaccessible to users of all experience levels
Unpredictable Interface: Inconsistent functionality created a "Mine Sweep" experience where teachers couldn't predict system behavior
Data-Driven Design: Platform structure was dictated by data availability rather than user context and actual classroom needs
The result was widespread teacher frustration and underutilization of a potentially powerful educational tool.
Each template was designed with flexibility in mind. Brands have the ability to customize the appearance of every template to look as unique as they like while still retaining tested and effective usability.
My Role
Head of UX
I led the research, design, and implementation of Unilever's Starter Kit during a 5-month engagement, collaborating with a Senior UX designer, Digital Strategist, Creative Director, Senior UI designer, and Tech director. I was primarily responsible for:
Project scoping and strategic framework development
Literature review and competitive analysis
Analytics audit and data-driven insights
Product strategy and IA
Design system creation and atomic design implementation
Prototype development and user testing facilitation
Functional specification development and technical translation
User guide creation and stakeholder training
My Role
Head of UX
I led the research, design, and implementation of Unilever's Starter Kit during a 5-month engagement, collaborating with a Senior UX designer, Digital Strategist, Creative Director, Senior UI designer, and Tech director. I was primarily responsible for:
Project scoping and strategic framework development
Literature review and competitive analysis
Analytics audit and data-driven insights
Product strategy and IA
Design system creation and atomic design implementation
Prototype development and user testing facilitation
Functional specification development and technical translation
User guide creation and stakeholder training
Strategic Approach
5C Framework Implementation: We designed the system around Content, Connect, Commerce, and Community, with Consumer Journeys at the center, ensuring all design decisions supported business objectives and user needs.
Atomic Design Principles: We utilized the atomic design methodology to create modular, reusable components that could be combined flexibly while maintaining consistency across all 35 brands.
A page taken from the onboarding document distributed to brand marketing managers.
Category-Specific Customization: Established mandated and recommended features based on specific brand categories while maintaining system coherence.
Research & Discovery
Our discovery phase employed multiple research methodologies to understand real classroom dynamics:
Heuristic Analysis
Conducted interviews with brand managers, marketing teams, and development stakeholders to understand unique brand requirements and operational constraints.
Competitive Analysis
Evaluated how other major consumer goods companies approached multi-brand design systems, identifying opportunities for differentiation and improvement.
Analytics Audit
Analyzed existing brand website performance data to understand user behavior patterns, conversion funnels, and common pain points across the portfolio.
Consumer Journey Mapping
Identified key touchpoints and user needs across CPG categories to inform the design framework and template prioritization.
Strategic Approach
5C Framework Implementation: We designed the system around Content, Connect, Commerce, and Community, with Consumer Journeys at the center, ensuring all design decisions supported business objectives and user needs.
Atomic Design Principles: We utilized the atomic design methodology to create modular, reusable components that could be combined flexibly while maintaining consistency across all 35 brands.
A page taken from the onboarding document distributed to brand marketing managers explaining how to think about their new sites.
Category-Specific Customization: Established mandated and recommended features based on specific brand categories while maintaining system coherence.
Key Innovations
Comprehensive Four-Template Architecture
Created a complete page type system (Storytelling, Product, Editorial, Utility) that addressed all consumer needs from brand discovery through purchase completion.
Comprehensive Four-Template Architecture
Created a complete page type system (Storytelling, Product, Editorial, Utility) that addressed all consumer needs from brand discovery through purchase completion.
📍 Strategic Template Framework
1.Storytelling Pages (Homepage, Campaign, About) Designed as brand narrative gateways with four core principles:
Simple: Optimized for quick consumer scanning, avoiding long-form copy and large image galleries.
Structured: Cohesive narrative connecting all page elements.
Focused: Single-purpose design inspiring further exploration.
Relevant: Authentic content that serves as gateway to commerce-focused content.
Project Deep Dive
2.Product Pages Recognizing research as the primary utility across all CPG categories, with three key priorities:
Discovery: Intuitive, meaningful paths to products addressing customer need states.
Education: Clear product value communication to inspire purchase and trial.
Location: Quick, easy paths to purchase both online and offline.
3.Editorial Pages (Articles, Tutorials, Recipes) Enhanced consumer experience through engaging content designed to improve SEO rankings:
Be Authentic: Content with intrinsic value earning customer attention and loyalty.
Be Simple: Complement rather than compete with product content.
Be Consistent: Maintain unified tone across entire website experience
4.Utility Pages (Store Locator, Sign Up, Checkout) Tools and features facilitating brand connection and product purchase:
Data Capture Forms: Standardized forms to collect valuable consumer information including email addresses and locations.
3rd Party Platform Integration: Seamless integration with external tools and services.
Purchase Facilitation: Streamlined checkout and sign-up processes optimized for conversion.
Project Deep Dive
📍 Strategic Template Framework
1.Storytelling Pages (Homepage, Campaign, About) Designed as brand narrative gateways with four core principles:
Simple: Optimized for quick consumer scanning, avoiding long-form copy and large image galleries.
Structured: Cohesive narrative connecting all page elements.
Focused: Single-purpose design inspiring further exploration.
Relevant: Authentic content that serves as gateway to commerce-focused content.
2.Product Pages Recognizing research as the primary utility across all CPG categories, with three key priorities:
Discovery: Intuitive, meaningful paths to products addressing customer need states.
Education: Clear product value communication to inspire purchase and trial.
Location: Quick, easy paths to purchase both online and offline.
3.Editorial Pages (Articles, Tutorials, Recipes) Enhanced consumer experience through engaging content designed to improve SEO rankings:
Be Authentic: Content with intrinsic value earning customer attention and loyalty.
Be Simple: Complement rather than compete with product content.
Be Consistent: Maintain unified tone across entire website experience
4.Utility Pages (Store Locator, Sign Up, Checkout) Tools and features facilitating brand connection and product purchase:
Data Capture Forms: Standardized forms to collect valuable consumer information including email addresses and locations.
3rd Party Platform Integration: Seamless integration with external tools and services.
Purchase Facilitation: Streamlined checkout and sign-up processes optimized for conversion.
Results and Impact
The Starter Kit successfully addressed all three primary project goals while establishing new industry standards:
Operational Excellence: Significantly reduced implementation and administrative burden through standardized processes, reusable components, and clear implementation guidelines across all 35 brands.
Business Growth: Clear paths to online sales and marketing initiatives improved conversion rates and supported revenue objectives, with integrated utility pages facilitating seamless purchase experiences.
Strategic Positioning: The system positioned Unilever for both immediate implementation success and future growth, with built-in flexibility for evolving market demands and consumer expectations.
Data Collection Enhancement: Standardized forms and utility pages enabled consistent consumer data collection across the brand portfolio, supporting improved marketing personalization and customer insights.
The project demonstrated how strategic UX design can balance operational efficiency with brand individuality while maintaining exceptional user experiences, establishing a new benchmark for multi-brand design systems in the consumer goods industry. The comprehensive four-template approach ensured that every aspect of the consumer journey.
📍 Strategic Template Framework
1.Storytelling Pages (Homepage, Campaign, About) Designed as brand narrative gateways with four core principles:
Simple: Optimized for quick consumer scanning, avoiding long-form copy and large image galleries.
Structured: Cohesive narrative connecting all page elements.
Focused: Single-purpose design inspiring further exploration.
Relevant: Authentic content that serves as gateway to commerce-focused content.
Project Deep Dive
2.Product Pages Recognizing research as the primary utility across all CPG categories, with three key priorities:
Discovery: Intuitive, meaningful paths to products addressing customer need states.
Education: Clear product value communication to inspire purchase and trial.
Location: Quick, easy paths to purchase both online and offline.
3.Editorial Pages (Articles, Tutorials, Recipes) Enhanced consumer experience through engaging content designed to improve SEO rankings:
Be Authentic: Content with intrinsic value earning customer attention and loyalty.
Be Simple: Complement rather than compete with product content.
Be Consistent: Maintain unified tone across entire website experience
4.Utility Pages (Store Locator, Sign Up, Checkout) Tools and features facilitating brand connection and product purchase:
Data Capture Forms: Standardized forms to collect valuable consumer information including email addresses and locations.
3rd Party Platform Integration: Seamless integration with external tools and services.
Purchase Facilitation: Streamlined checkout and sign-up processes optimized for conversion.
Other Case Studies
Other Case Studies