From Chaos to Consistency: The New Brew Design System for Lipton

Overview

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.

Pitch

Brew UI Kits in Figma Community

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?

Inaccessible colors
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.

Designed Lipton’s page with Sainsbury’s Design System

Then we deconstructed Lipton's page into hundreds of design elements

Categorized the current Lipton’s components

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

Brew UI Kits in Figma Community

How to start building the UI kit is a tricky question.
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.

Atomic Design

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.

After defining how we want to use the current tokens, we started to name the tokens at two levels - global name and alias name.
Before we name the tokens, we grouped and defined the colors, typography, and spacing into primary and secondary levels, to make everything organized.

Naming the tokens in two levels made us have a clearer vision on how the designers and developers use the design system, and in what way we can benefit their work.

Naming draft

Final Atoms Design

The molecules and organisms’ design followed the same pattern

It took us a long time thinking about what components should we include, what status should the components have, and the accessibility of components. We made the decisions based on the relative level of Lipton’s website.

Carousel

Buttons

Icons

Images

Rating Scale

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 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 little regulations on how to use them.

Brew in Figma Community

Variables in the library

Assets in Brew

Branding our design system
First, we set up 3 design values that match both our design values and Lipton’s brand values.

Our design system’s values

Team values brainstorming

Company values brainstorming

Then, “Brew” stood out in a bunch of playful names we brainstormed for our design system.

Name brainstorming vote

Conducted 6 usability tests to identified problems

We conducted the usability testing in class, letting the classmates redesign a specific Lipton page and found some misunderstandings on our components (cards, icons, image guidance, etc)

We fixed the usability issues and worked on the next step.

Issues we found in the test

Having a detailed documentation on Zeroheight
Documentation

Once the components were finished, we started working on the documentation, which helps the future users to use the components.
We divided the documentation into 4 sections - Introduction, Foundation, Components, and Resources.

Keeping a consistent writing style on documentation in a team was not an easy thing.

We finally set up a format, that is “Intro+Design+Usage” in 3 separate pages for each component.

Example of the Carousel component

We also added the guideline and covers with logos to improve our branding.

Sell our Brew Design to Lipton’s designer through a 10-min pitch

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.

UI comparison

Benefit for designers

Timeline on implementing Brew design system

Reflection

What I learned 💁🏻‍♀️

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.

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 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)

Iris Sun ☀️

Home LinkedIn