Weee! is known for delivering quality Asian groceries, but its website and app have not always reflected the same attention to detail as the food. To fix this, we built a new design system called Umami.
Platform
Weee! (Unofficial)
My Role
Design System Designer
Project Timeline
4 Months, Fall 2026
Tools
Figma, Zeroheight
Weee! is the largest Asian online grocery platform in the United States.
For millions of people, this isn’t just a shopping app. It’s where you find the exact brand of ramyun you remember from childhood, or the lychee jelly your grandmother used to make. The cultural importance here goes beyond a typical grocery store.
When we took a closer look at the interface, we noticed a pattern. The product had grown faster than its design system could handle. Teams rebuilt components for each feature, colors changed from screen to screen, and urgency tags looked just like freshness tags.
Bakery
Beauty Month
Beverages
Canned
Dairy & Eggs
Dry Foods
EBT
Fresh Bakery
Fresh Gourmet
Frozen
Fruits
Health
Household
Instant
Meat
Personal Care
Seafood
Seasoning
Snacks
Spring Sale
Tofu & Vegan
Vegetables
Bakery
Beauty Month
Beverages
Canned
Dairy & Eggs
Dry Foods
EBT
Fresh Bakery
Fresh Gourmet
Frozen
Fruits
Health
Household
Instant
Meat
Personal Care
Seafood
Seasoning
Snacks
Spring Sale
Tofu & Vegan
Vegetables
Beauty Month
Search
Choose
Checkout
This challenge showed us that our product workflow has a gap. We do not have a shared system to help us stay consistent and efficient as we continue to grow.
Different Hex Values
There are more than 60 different hex values in use, even though only 7 color families were planned.
27 Different Tag Styles
There are over 27 tag styles that all look the same. Discount badges, dietary labels, and urgency signals cannot be visually distinguished.
3 Different Grid Systems
Three grid systems, masonry, modular, and hierarchical, were used in the same product, but there is no documentation or clear reason.
As the product expanded, not having a color system meant that more than 60 different hex values were used. There was no shared guide to help make consistent choices.
What should have been 7 intentional families had fractured into 60+ individual values. No single designer made a wrong call. The system had no shared reference.
16 red orange variants
This was for one promotional family
13 Distinct pinks
Where one Dragonfruit family should exist
No token layers
every screen made its own call
Typography was chosen screen by screen on instinct, without a shared scale; the interface spoke in multiple voices simultaneously.
No named roles
Display, Body, Label chosen per screen
No CJK consideration
Culturally exclusive by default
Filters, tabs, and pill buttons all handled navigation, but each looked different. This made users figure out how things worked again on every screen.
Tags were the most repetitive part of the system.
With more than 27 styles, all looking equally important, it was difficult to distinguish discount badges from dietary labels. - 27+ tag styles with no semantic weight distinction - "new" vs "new arrival" as separate styles for the same concept
Intelligent Workplace Charging
FlexCharge offers reliable and efficient charging for workplaces, supporting multiple vehicles with a scalable and smooth experience.
Rapid Public Charging
PowerHub delivers ultra-fast charging for high-traffic areas, keeping customers and drivers on the move with robust and scalable solutions.
Tags
Cards
Three Grid System