My Role
UX Research
UI Design
Design Systems
UI Design
Design Systems
My Team
Group Director
UX Director
UI Designer
UX Director
UI Designer
Duration
4 Months
Tools
Figma
What is Haleon Huddle?
We created Consumer-first platform that brings together human needs with content and experiences that create a deeper connection to the Haleon portfolio.
RebuildING the Digital Experience
- One destination, all brands
- Personalized consumer-led
- Building community and dataContent:
+1 discovery, priority hubs, partnerships, AI/AEO
- A more flexible, modular and future-ready site design system
- Personalized consumer-led
- Building community and dataContent:
+1 discovery, priority hubs, partnerships, AI/AEO
- A more flexible, modular and future-ready site design system
01 Transformation
Before
Siloed, limited value, same experience for all
After
A one unified, personalized and multi-channel self-care support destination
Before
Fragmented brand sites with
rigid page builds.
NOTE:
Flonase is just one representative example of this experience transformation
After
A unified headless platform with a shared design system and mobile optimized modular templates that scale seamlessly, reduces costs, and accelerates personalized brand experiences to consumers.
02 Migration & Design Systems
CREATING THE HUDDLE SYSTEM FOR DESIGN (S4D)
MODERN | ATOMIC | FLEXIBLE | SCALABLE | COLLABORATIVE
Building a flexible, future-ready design system for Haleon Huddle allows us to power the experience, deliver personalization and provide expertise-driven self-care for our users.
By evolving our ways of working, we can ensure the platform is robust, adaptive, and optimized for long-term growth.
03 Design System Evolution
Extended & Evolved
Extended and evolved the existing S4D design system to support Haleon’s Huddle initiative without breaking existing dependencies.
Audited & Refactored
Audited and refactored core component architecture for reusability across campaign, brand, and loyalty experiences.
Created Mobile-First
Variant Solutions
& Tokenization Principals
Introduced new the new components complete with variant logic and responsive behavior for things like heroes, card variants, and form components aligned to Huddle’s new visual brand expression. Defined token naming conventions and mapped design tokens to engineering variables for better parity between Figma and code.
Scaled Design System Across Brands
Designed all new design systems for all 23 brands complete with rationalized typography, colors tokens with all the necessary skinned brand page templates to ensure consistency and scalability within the S4D token framework and to meet desired customer experience goals and feature functionality.
