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.
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.