Creation of Design System Component Guideline

Creation of Design System Component Guideline

Creation of Design System Component Guideline

Category

Category

Design System

Design System

Design System

Company

Company

Copperleaf Technologies

Copperleaf Technologies

Copperleaf Technologies

Duration

Duration

4 weeks

4 weeks

4 weeks

Team

Team

Julia, Maria, Simon

Julia, Maria, Simon

Julia, Maria, Simon

Main Project Image
Main Project Image
Main Project Image
Initial brief

How might we modify the design system guidelines so that software designers and design system designers can widely and easily use them?

Background context

The company's design system was built not long ago, we had an increasing number of designers voice the need to leverage new DS components into the day-to-day designs.

Frustration arises around what to use, when to use and how to use the component displayed in the design system website. It ended up with tons of consulting time within the design system team and the design team.

With the brief and context in mind, I collaborated with the design system director and conducted a workshop with designers. The intention was to understand designers' painpoints and, ideal experience when interacting with the design system.

Targeted users

Discover the main theme of the problem
Get inspired

DS director and I looked into four well-known design systems: Carbon - IBM; Material - Google; Polaris - Shopify and Workbench - Gusto.

Then we did an exercise with the designers to let them mark down: What is a must-have? What is cool and good to have? What is missing?

Solution

User story 1:

As a product designer, I want to check the states and variables for a component, so that I can understand what styling I should apply based on the context.


User story 2:

As a product designer, I want to be able to easily understand what to use, when to use and how to use the component so that I can make the styling of the software interface consistent.

User story 3:

As a design system designer, I want to be able to quickly populate a component guideline, so that I can be time efficient to produce guidelines for other designers to use.


User story 4:

As a product designer, I want to be able to identify which stakeholder to talk to when it comes to guideline questions so that I can create designs with ease.


Outcome