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: Jessica Z, Shriya C, Iris S(me), Shrividya S.
- My Role: Component design, Documentation, Branding
- My takeaways: How to build a design system step by step, how to have macro design thinking, and think more about alignment in future design.
Design systems are culture change disguised as a UI kit.
We wanted to get a taste of that change by helping improve efficiency and consistency in the design process.
A quick view on Brew Design System
Lipton stood out to become our target website
Our team wanted to pick a website that has poor UI design, so that we could make big improvements by the design system we created; that’s why we picked Lipton.
What’s wrong with Lipton’s website?
Mixed layouts
Multiple chaotic font styles
…
They might not have a design system
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.
Then we deconstructed Lipton's page into hundreds of design elements
We identified the problems Lipton’s 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 on how we could improve their website by improving the design tokens and branding.
Then we created the UI kit like building a large Lego set
We followed the Atomic Design Guideline and recreated the components step by step, from atoms to molecules to organisms, meanwhile to keep 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.
Before we name the tokens, we grouped and defined the colors, typography, and spacing into primary and secondary levels, to make everything organized.
2. Created a UI Kit in Figma
Branding our design system
First, we set up 3 design values that match both our design values and Lipton’s brand values.
Conducted 6 usability tests to identified problems
We fixed the usability issues and worked on the next step.
Having a detailed documentation on Zeroheight
We divided the documentation into 4 sections - Introduction, Foundation, Components, and Resources.
We finally set up a format, that is “Intro+Design+Usage” in 3 separate pages for each component.
Sell our Brew Design to Lipton’s designer 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
- How to build a design system (Deconstruction+Creation)
- How to have a 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.
- Consistent writing on Zeroheight
- Design Accessibility
- Good presentation
- Good collaboration (productive weekly meeting + fair work division +active group chat)
-
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 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)