Atelier Design System

2023
User Interface Design
Design System
Figma

Background

This was Atelier’s first comprehensive design system, created to support both the product and marketing website.

My Role

I collaborated closely with the lead designer to develop and implement the design system from the ground up, making it accessible for both design and development teams. This approach assisted us in establishing workflows, maintaining brand consistency, and speeding up the development lifecycle.

The Process

The design system was built in an iterative process in parallel with the design of our product. We applied Atomic Design principles alongside referencing established design systems from Material Design, Carbon, Atlassian, and Uber. Leveraging these industry-leading examples helped us ensure that interactions were inherently functional and intuitive.

Documentation

The design system documentation was organised across Figma and Confluence. Most information, such as guidelines, component anatomy, states, behaviors, and brand standards, was kept in Figma. Confluence was used to track iterations and key changes through a detailed Changelog.

Reflection

The Journey
Building a design system from the ground up was a challenging task that required time and continous refinement. I learned to be open-minded and patient, understanding that process changes evolve gradually.

Alignment
Throughout the implementation, I came to recognise one of the key benefits of design systems and their impact to create alignment amongst design and development. This was reflected in an increase in the development lifecycle.

Documentation & iterations
I realised how important it was to be vigilant with documentation and communicating changes, particularly with subtle iterations. This was
managed by developing a structured process across Figma, Confluence
and Jira.

Jessie Tsuei

About

Resume

Home

Next Project →