Guava - 2023

Creating a mobile design system for Guava

My Role

Guava’s native mobile app was struggling with functional and visual inconsistencies.

Lead Product Designer

1 Product Designer
2 Engineers




The creation of a mobile design system. Improved design + engineering velocity.

Design systems, Component Design

2 months


Being an early stage startup, Guava shipped it’s MVP at a high velocity to gain traction with investors and new users. There were also multiple fractional designers who had worked on the product for shorter stints and handed off designs to one another. This often meant the product was being designed with both functional and visual inconsistencies.

When I joined and was asked to start improving upon some of the core features, it became clear to me that the entire product needed to be cleaned up through the establishment of a design system.

Taking stock of existing design foundations

While there had been previous designers who had created basic components, they weren’t created correctly using variants + tokens. They weren’t set up in a way that was intuitive and easy for both designers + developers to use. There were also many components that hadn’t been added to the system.

Part 1
Establishing a semantic color system
Building out the color palette
The old color system was inflexible and didn't match all the use cases we required when building out certain features within our app. In order to make it more robust, I developed tonal palettes for each major color style.
Color Tokens
I then mapped out the semantic names, hex values and use cases to create the semantic naming system and create alignment between design and engineering.
Part 2
Establishing a clear typography system
Typography updates
There was no existing typography system, which was causing a lot of visual inconsistency in the app. I was able to reduce the many existing type styles down to 8 final styles.
Part 3
Establishing a scalable component library
Creating components using variants
Along with building out the component library, it was also important for me to use best practices and create variants for components rather than building out each component option so that the design system could scalabale, efficient and easily maintainable.
Before + After examples