Seed

Problem

My Role

Team

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

Lead Product Designer

1 Product Designer
2 Engineers

Impact

Skills

Timeline

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.

BEFORE

AFTER

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.

Creating a mobile design system for Guava