Product Design – Design System

Back in 2017, the team was creating designs from scratch for every single project. Huge inconsistency and velocity problem. Brand Book 2.0 was just released, we needed to bake it to our product design as well. It was also the time when the Atomic Design System emerged in the industry. We learned it and quickly applied it to our design.

1. Honey UI

The Problem

HMW create a pattern library that can speed up design&eng process while enforcing the brand consistency throughout Honey?

The impact

Honey Design achieved better brand consistency with marketing and the rest of Honey. Honey Design achieved faster and more accurate implementation with Eng.

Process

Before forming the Honey Design System, we did have some reusable components here and there. But it was not built up in a well-thought system. This became my first part of Studying Internally. The second part was to synthesize all the other opportunity areas for reusable patterns.

Then, I moved on to the step of Studying Externally. I explored the Atomic System and all the other existing Design Systems in the public, such as The Material Design from Google, HIG from Apple, The Ant Design System from Alibaba...

With the explored results from both internally and externally, I drafted up the new IA of our Design System (Honey UI part) as below.

In order to make sure of its feasibility, I brought the Eng team into the process as early as possible, in the IA part. Everything was validated, and we also decided to use Storybook to host components on the token side.

Lastly, I discussed with Product to block a month's time. I convinced them by explaining 'This is our version of backend refactoring, and it's crucial for the velocity and consistency for both Design and Eng'.

Results

The brand level lib: serve as the atom part.

The platform level lib: serve as the molecules and organism part
~How shall we categorize? Product or Technology? Since Eng had more connection with us in DS, we chose to organize based on tech, in here means platforms (Extension, Website, Mobile).

The template level lib. For things that are highly repeated but less customizable like the Email, Webpage, Extension Modal, and iOS & Android containers...

The Storybook as our repo to host design tokens.

The intake process was also a crucial piece to guide the product designers on how to work with the system designers.

The Goals and Project Management by our Design System Lead Pat Capulong.

Learnings

Due to the surging product requests from the feature teams, the whole team was reallocated. I had to shelf the iteration list below until future headcount blessing from the leadership.

Create documentation to guide product designers on how to use them properly.
Split Web & Extension Components Library into 2 to have more focus on each.
Reuse more native iOS & Android components while reskinning them to cut down Eng maintenance time.
Continue to lobby the leadership on the importance of the Design System to book more time and headcount. Especially on the UI Eng side, currently, I only have 1 eng supporting all libraries.
Create design-vertical-specific libraries to cover reusable needs from problem space POV. For example, a growth library to cover reusable needs for acquisition/retention purposes. A merchant library to cover needs from merchant dashboard space.
And more...

2. Honey Visual

In order to support Product, Marketing, and all other departments in the need of 'magical moments', I built a Visual Art team inside Product Design to fulfill this mission in 2017. With the team and works growing, the need to create a library for reusable assets was also growing. Together with our Visual Art team of 2, we created the Honey Visual library.

Process

I delegated the majority of building effort to our Visual Art lead with me only focusing on defining the IA of the library.

Results

Our Visual Art Lead Samantha Lopez drove the major execution part with me only focusing on photography.

See more of my Honey photography?
Go here.