From Chaos to Consistency: The New Brew Design System for Lipton
Our team created a design system for Lipton’s website to enhance the consistency and efficiency of the design process. We followed the Atomic Design to build the UI kit in Figma, wrote the documentation on Zeroheight, and made a pitch for Lipton’s designers.
Info
- Timeline: Feb 2025 - May 2025
- Team: Iris(me), Jessica, Shriya, Shrividya
- My Role: Component deconstruction and design, Documentation, Branding
“Design systems are culture change disguised as a UI kit.”
That’s what my professor kept telling me. And I wanted to get a taste of that change by addressing Liption’s chaotic website.
A quick view of Brew Design System
Why did Lipton stand out as our target? Our team wanted to pick a website that has poor UI design, so that we could make big improvements using the design system we created. The current Lipton website has inaccessible colors, mixed layouts, multiple chaotic font styles... They might not have a design system yet.
We started by learning about other companies’ design systems first
Before building our own design system, we learned how to use and read a design system by redesigning Lipton’s website using an existing design system, so as to get familiar with the guidelines, usage of components, strengths, and weaknesses of different design systems.
We deconstructed Lipton's page into hundreds of design elements
By doing so, we identified the problems they had with the categorized elements:
- Inconsistent font, margin, and spacing
- Confusing signifiers
- Outdated components
- Missing Call To Action(CTA) components
- Accessibility violation
- Image-heavy design
The insights made us have a clearer vision of how we could improve their website by improving the design tokens and branding.
Created the UI kit like building a large Lego set
How to start building the UI kit is a tricky question. And the Atomic Design Guideline helped us. We recreated the components step by step, from atoms to molecules to organisms, while keeping all of the components accessible for users.
1. Defining the tokens
We started with the basic atoms, that is, color, typography, and spacing, to identify what and how they are being used, and how they should be used.
We grouped and defined the colors, typography, and spacing into primary and secondary levels to make everything organized. Then, we also name the tokens at two levels - global name and alias name, which gave us a clearer vision of how the designers and developers use the design system, and in what way we can benefit their work.
The molecules and organisms’ design followed the same pattern. But it took us a long time thinking about what components we should include, what status the components should have, and the accessibility of the components. We made the decisions based on the current Lipton’s functionality and the major contents on the website.
2. Created a UI Kit in Figma
To convert the simple style guide into a UI kit, we created a new Figma UI Kit and added the variables and properties in the Figma library (published in the Figma community).
The balance of giving designers flexibility vs making components is a challenge for us during the design process. We tried our best to make enough components that can reduce their work while making a few regulations on how to use them.
Branding our design system
Design values came from the intersection between our design values and Lipton’s brand values. So after matching the sticky notes we brainstormed, the 3 design values of our design system came out - Efficient, Inclusive, Wellness Centered and Naturally Inspired.
Then, “Brew” stood out in a bunch of playful names we brainstormed. Simple, playful, and matches the brand value.
Testing the Version 1 Brew Design System
We conducted 6 usability tests to identify the problems by letting the participants (aslo UX designers) redesign a specific Lipton page.
A few problems appears. For example, participants cannot find the correct product card, misunderstand an icon as a placeholder, lack icon instructions, incorrect size, confusion on image usage, etc. These helped us better address the issue before publishing it.
Creating detailed documentation on Zeroheight
Documentation helps future users understand when and how to use the components clearly. But creating it is not an easy work, especially in a team.
We first divided the work into 4 sections - Introduction, Foundation, Components, and Resources, and worked on our own. And when combining them together, we realized there’s a huge inconsistency in writing style.
To fix it, we finally set up a format, Intro+Design+Usage in 3 separate pages for each component.
Sell our system to Lipton designers through a 10-min pitch
After spending countless hours on creating a design system, we need to persuade people to buy it to make our effort count.
So, we pitched our idea to the potential Lipton designers in 10 minutes, introducing the benefits and usage of our design systems and in what way our Brew Design System could help their website, with a lot of “Before vs After” visual comparisons.
Reflection
What I learned 💁🏻♀️
- How to build a design system (Deconstruction+Creation)
- How to have an overall design thinking
- “Design system is a culture change disguised as an UI kit”. Though we are still not capable enough to make a real culture change, we made our first step towards it.
What we did well
- Consistent writing on Zeroheight
- Design Accessibility
- Good presentation
- Good collaboration (productive weekly meeting + fair work division +active group chat)
What we could do better
- Consider more on what business impact we can bring (numbers!) , and company’s current business status
- Take more screenshots, as the website is changing from time to time
- Keep the changes as minimal as possible (It takes a lot of time to change things and communicate with each other)
- Decide our target audience early
- Maybe, change to a prettier website instead of Lipton, as Lipton’s yellow and green bothered us a lot on accessibility (JK, we learned a lot through this practice)