top of page

Build
a design system from scratch

My ROLE

Project Lead​

  • Build core team

  • Stakeholder alignment

  • Establish framework

  • Establish team contribution model

  • Define components

  • Onboarded team to Figma

Team

  • Mobile App platform owner

  • Features product owners

  • Tech lead

  • Content writers

Platform

IOS ​& Android Native

ToOLS

Timeline

Screen Shot 2021-06-15 at 12.08.25 AM.pn

  • 3 months 

  • (Phase1 )

Background

Different designers and development teams
contribute to the mobile native experience (IOS & Android)

​

​

​​

Observations:

  • Chaotic process

  • Redundant work

  • Inconsistent experience

Screen Shot 2021-06-15 at 12_edited.jpg

Identify
problem statement

Conducting stakeholders, designers and development partner interviews, we consolidated the feedback and aligned on the problem statement. 

Screen Shot 2021-06-15 at 12.30.38 AM.pn
81495449_592962621501691_802278881630774

The problem statement

Lack of clear UI guidelines & reusable components for mobile app user experience results in:

  • an inconsistent experience cause user confusion and disorientation

  • inefficiency working process for designers and development team

The solution

Build a design system that

  • incorporates design principles and guidelines

  • documents basic visual elements, reusable UI components & patterns design file

  • includes reusable UI components code library

First phase delivery (3 monts)

Key Strategy
Principles
 


Figma documentation framework

At least 5 Components

Screen Shot 2021-06-15 at 1.16.12 AM.png

The Process

Screen Shot 2021-06-15 at 1.20.31 AM.png

2 MAIN SESSIONS

FIGMA

  • Centralized Design for Designers

GITHUB

  • Centralized Components for Developers

The Frameworks

Screen Shot 2021-06-15 at 1.44.13 AM.png
Screen Shot 2021-06-15 at 1.44.29 AM.png
Screen Shot 2021-06-15 at 1.44.25 AM.png
Screen Shot 2021-06-15 at 1.44.17 AM.png
Screen Shot 2021-06-14 at 11.54.19 PM.pn
Screen Shot 2021-06-25 at 3.44.23 PM.png
Screen Shot 2021-06-25 at 3.44.33 PM.png
Screen Shot 2021-06-25 at 3.44.47 PM.png
Screen Shot 2021-06-25 at 3.45.23 PM.png
Screen Shot 2021-06-25 at 3.45.16 PM.png

tHE GOVERNANCE 

Screen Shot 2021-06-15 at 1.53.25 AM.png

The next step

Building reusable components, base on the limitation of the team bandwidth, we identify and build the reusable components along the product  roadmap.

The success

Delivery

We established a scalable design system. We defined principles and foundational elements, as well as collectively designed and documented over 10+（5 codified）components within 3 months with a part-time team. 

​

Internal survey

97% of developers and designers think the design system is useful

​

Adoption

5 new features adopted reusable components to refine the experience

​

​

​

kEY LEARNINGS

Project won’t be success without a team. Without developers, designers, product owners, copy writers and many others, it would losing the opportunity to get things right at the beginning. Get as many people in the process as you can, the insights you gain from a cross-skilled is the key for the project success.

​

Align on the goal first and keep bringing it on the table in the later process. Get the key players in the room early, and ensure you are aligned on the goals (Long-term & short-team). This clarity and focus is essential for your decision-making and sanity.

​

Build a system along with learning. Design always is an iterative process, it is OK to not be perfect at the beginning, keep getting feedback both from teams and customers to refine the component and process to become great, as long as ensure the decisions are based on the long term goal - not just a short term feature satisfaction.

bottom of page