Designsystem.png

The Challenge

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

Products

 
 

- Selective Components -

VISUAL SYMBOLS

COMPONENTS AND VARIATIONS

 

RESPONSIVE COMPONENTS

 

DOCUMENTATION