Design system for Gemmi

Reorganize design systme for Gemmi App

UI/UX

B2C

Design driven

My Role

Design and manage the design system

The Team

1 Designer, 1 Product manager, 1 Front-end engineer

Timeline

Jan. 2022 - Mar. 2022

Gemmi is a relatively new product when I joined the team. Although we have a library for reusable elements, due to the rush timeline, we lacked any formalized design system, Thus, making design and development hard to manage, especially when creating a new feature. As a result, I propose to build a design system to improve our working efficiency and design consistency.

Problems

Foundation

Solution

Iteration

Retrospective

Problems

There are 3 problems with the old design library:

Naming system is not flexible enough

As we continue to develop new features, I found that our typography & color library is constrained to certain syntax and hard to add new variables.

Naming rule is not unified

I found the naming rule of our components is not unified. This makes us hard to manage and collaborate with engineers.

Icon size is not consistent

Our icons lack of layout grid system that make it inconsistent.

Foundation

Before building the system, I did some work to set the foundation.

Research

I study other design systems to know more about common practices and get inspired.

Organize

I have a thorough walkthrough of the original design elements, including fonts, components, and icons. And reorganize them according to style and type.

Solution

After considering our current workflow and product scope, I include the elements and rules below in our design system:

Typography

To make the fonts reusable, I set up type scales and name them according to their usage. The new naming rule is much detail and oranized.

Colors

I create a naming system for colors according to their usage and hue, and maintain the flexibility to add more color.

Iconography

For Icon, I establish a layout grid and apply it to all the icons to make sure they have the same size and balance.

Components

I use the variant in Figma to control the styles and discuss the naming convention with the engineer to align design with development to ensure working efficiency in the long run.

Iteration

As the product evolves, I continue to iterate our system to feat the project’s needs. I also work closely with the developers to ensure the system not only facilitate the design process but the development as well.

Retrospective

Setting up a design system is an enormous task involving many collaborations. Although we stumbled upon some issues due to the communication barrier between design and development, we manage to overcome them. Due to the scope of our product, it might seem arbitrary to set up a design system, but with the product growth, the importance of consistency and working efficiency of our team became more important. Now, as our product evolves, everyone can easily adapt to our design and move forward.

Let's getin touch. Say hello.

Design system for Gemmi

Reorganize design systme for Gemmi App

Problems

Foundation

Solution

Iteration

Retrospective

Problems

Foundation

Solution

Iteration

Retrospective

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's get in touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.

Let's getin touch. Say hello.