Designsystem.png

PROBLEM STATEMENT

As the product grows and evolves, inconsistencies creep into the system and start to harm the user experience.

 

PROJECT OVERVIEW

 
DURATION

Sep 2020 - ongoing

KEYWORDS

Design system

Atomic design

Agile 

TOOLS

Figma

Phabricator

Excel

MY ROLE
  • Sole UX designer working on the design system

  • Plan out roadmaps and report weekly status

  • Host regular design meetings with stakeholders to review designs and gather feedback

  • Support implementation and conduct QA on design through the development phase

  • Design system documentation

  • Worked in a cross-disciplinary team with multiple product owners and developers in sprints

DESIGN PROCESS

The illustration below depicts the general process of establishing the SEMOSS design system. However, in the reality, the design system is a living and breathing document that evolves through development, benefiting from research, answering market demands and client requirements.

 
SM-DS-process.png

SOLUTION OVERVIEW

SEMOSS design system consists of a couple of fundamental design guidelines, a wide variety of reusable UI components as well as a series of repeatable patterns commonly used across the platform. Below is a high-level summary followed by a table of content of the system.

* We are going through the implementation stage right now and I’ll share out more details as the project progress. In the meantime, feel free to reach out if you’d like to chat about it! 

7

Design Guidelines

Reusable Components

33

9

Repeatable Patterns

4

Served

Clients

 
 

BENEFITS OF A DESIGN SYSTEM

It's not easy to understand how the design system benefits at the beginning, as it's not directly tied to revenue. To demonstrate it worths investment and get buy-ins from stakeholders, I concluded a few benefits it could bring as below.

 

Luckily, it was well-received by the stakeholders and we get the resources we need to establish the system.

INTERNAL

EFFICIENCY 

- SUPPORT RAPID PROTOTYPING

- SPEED UP ONBOARDING

GROWTH

- CREATE REUSABILITY

SCALE

EXTERNAL

CONSISTENCY

- PREDICTABLE EXPERIENCE

- MEET USER EXPECTATION

TRUST

- INCLUSIVE DESIGN

ACCESSIBILITY

USABILITY

- FAMILARITY BREEDS USABILITY