Lipton’s UI Was Broken, Here’s How We Brewed a Fix
This case study focuses on transforming Lipton's fragmented UI into a unified, accessible design language that streamlined workflows and elevated brand consistency across digital products.
Product Designer
12 Weeks
Figma, Zeroheight
GETTING STARTED
We began by tearing apart Lipton’s existing website like tea leaves in a strainer, separating every component into a UI inventory spreadsheet. What we found was chaos.
Visual Inconsistencies
- 7 different button styles
- Conflicting color palettes
- Typography with no visible hierarchy
- 7 different button styles
- Conflicting color palettes
- Typography with no visible hierarchy
Broken Patterns
- Cards that inconsistently expand
- CTA buttons vary in size/weight
- Missing hover/active component states
- Cards that inconsistently expand
- CTA buttons vary in size/weight
- Missing hover/active component states
Accessibility Black Holes
- Overused brand yellow and green lacks contrast (WCAG 2.1 fails)
- Interactive elements missing focus states
- ARIA labels are either missing or misused
- Overused brand yellow and green lacks contrast (WCAG 2.1 fails)
- Interactive elements missing focus states
- ARIA labels are either missing or misused
THE PROBLEM
The Brand Identity Clashes with Usability
The complete UI audit allowed us to understand why lipton needed a consistent design system and exactly the components we needed to build. Liptons current interface is trying really hard to communicate the brands identity but only through its loud color.
The Core Design Challenge- How Might We
The Core Design Challenge- How Might We
- Preserve Lipton’s vibrant personality while establishing usability standards.
- Create consistent and structured elegance that still feels distinctly Lipton
THE SOLUTION Introducing the Brew UI Kit
Estabilishing our design values:
- Efficiency: A unified component library for designers.
- Inclusivity: We embrace plain design language, and follow accessibility best practice.
- Inspired by Nature: Inspired by nature’s balance, we use clean layouts and clear visuals.
As part of the component design team, I focused on defining tokens and designing foundational components like buttons, cards, checkboxes, the rating scale, text inputs, using auto-layout, ensuring consistency and flexibility across the system.
Designing the component library:
The Brew UI Kit
To address Lipton’s inconsistent and scattered UI patterns, we focused on building a scalable, accessible, and visually cohesive component library, the foundation of the Brew UI Kit.
To address Lipton’s inconsistent and scattered UI patterns, we focused on building a scalable, accessible, and visually cohesive component library, the foundation of the Brew UI Kit.
FINAL DESIGNS
How We Crafted The Brew UI Kit
Starting with the design tokens
We began with tokens because they create scalable consistency across large systems and allow for rapid adjustments when branding evolves. The process began by defining and naming design tokens, the smallest reusable style decisions. This included variables for:
This helped us set a foundation for visual consistency and made cross-component updates more efficient.
Starting with the design tokens
We began with tokens because they create scalable consistency across large systems and allow for rapid adjustments when branding evolves. The process began by defining and naming design tokens, the smallest reusable style decisions. This included variables for:
- Color
- Typography
- Spacing & Sizing
This helped us set a foundation for visual consistency and made cross-component updates more efficient.
Designing for Consistency
Once tokens were in place, we designed the core components- buttons, cards, form fields, navbars-using these foundational styles. This ensured visual harmony and system-wide coherence.
Variants and States
Each component was built with multiple variants (e.g., filled, outlined, disabled) and interactive states (hover, focus, active). This helped address a wide range of UI needs without creating redundant designs.
Accessibility From The Ground Up
All components were tested against WCAG standards. This included maintaining a minimum color contrast ratio and designing clear focus states.
Reusable and Scalable
Components were built using Auto Layout and structured naming.
Each component was built with multiple variants (e.g., filled, outlined, disabled) and interactive states (hover, focus, active). This helped address a wide range of UI needs without creating redundant designs.
Accessibility From The Ground Up
All components were tested against WCAG standards. This included maintaining a minimum color contrast ratio and designing clear focus states.
Reusable and Scalable
Components were built using Auto Layout and structured naming.
USABILITY TESTING
But no design system is complete without documentation!
SYSTEM GUIDELINES AND DOCUMENTATION
Building the Foundations:
System Guidelines
We knew that clear documentation and governance would be key to the success and long-term sustainability of the Brew UI Kit.
Working closely with fellow designers, we created a detailed documentation outlining design principles, accessibility standards, usage guidelines, and brand-specific practices, all organized in a shared space to ensure consistency, easy onboarding, and smooth handoff across teams.
Check it Out!
Working closely with fellow designers, we created a detailed documentation outlining design principles, accessibility standards, usage guidelines, and brand-specific practices, all organized in a shared space to ensure consistency, easy onboarding, and smooth handoff across teams.
Check it Out!
WHAT I LEARNED
Refining the Blend:
Challenges and Takeaways
Creating the Brew UI Kit taught me that design systems are negotiations between consistency and creativity, speed and precision, individual expression and team alignment.
Key Takeaways:
The Big Realization:
The most effective design systems go beyond visual consistency. They streamline collaboration by replacing scattered knowledge with clear, shared standards.
If I Were to Start Over:
Start documentation early and focus more on documenting the rationale behind design patterns— not just the "what," but the "why."
Key Takeaways:
- Brand Preservation is Active Work
- Standardizing Lipton’s vibrant identity required building flexibility into constraints (e.g., allowing expressive imagery within strict grid layouts)
- Documentation is Design
- Documentation allows for quick understanding and onboarding.
- Testing Reveals System Gaps
- The usability tests allowed us to fix broken components and redesign a few.
The Big Realization:
The most effective design systems go beyond visual consistency. They streamline collaboration by replacing scattered knowledge with clear, shared standards.
If I Were to Start Over:
Start documentation early and focus more on documenting the rationale behind design patterns— not just the "what," but the "why."