Design System — Jessie Tsuei | Product & Digital Designer

Atelier Design System

As we developed the Atelier Platform and the marketing website, we encountered fragmentation between the design and development teams during handoff. This led to mismatched designs, outdated components, and general inconsistencies, which highlighted the need for a unified design system.

To address this, we collaborated with the developers to build the first Atelier design system from the ground up. We also implemented workflows and documentation processes, iterating them throughout the process to ensure seamless collaboration.

Timeline
Jul 22’ - Jan 23’

Industry
CPG | Supply Chain

Role
Design System
Processes

Impact

Reduced discrepencies and inconsistencies

Implementing a design system significantly reduced inconsistencies across components, fonts, and other design elements. By providing comprehensive guidelines that was easily accessible to everyone, it streamlined the design process and reduced the need for back-and-forth between teams.

Sped up workflows and development

With defined components and design patterns, the design system sped up the design and development process, making it easier to scale and maintain the platform over time.

Approach

Identified design patterns
The design system was built in parallel to the Atelier Platform. Throughout the design process we were able to identify key patterns and functionalities which laid the groundwork for building a design system.

Referenced existing design systems
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.

Teamwork makes the dreamwork

It was essential that we worked closely with developers to create a design system that worked for both teams. This collaboration ensured the system was technically feasible, streamlined workflows, and aligned design with development needs. Regular check-ins and open dialogue allowed us to problem solve, improve efficiency, and continuously optimise the system.

Outcome

Reflection

From scratch or pre-built?

Looking back, building a design system from scratch was a demanding and challenging process that required significant resources particularly as we were such a small team. Using a pre-built design system would’ve sped up the process whilst also giving us the flexibility to customise it to our brand language.

Aligning design and development

Throughout the process, I came to recognise how impactful design systems play in creating alignment between design and development. This not only enhanced our workflow but also led to a more efficient development lifecycle.

Managing iterations

Being proactive with documentation and clearly communicate changes, especially the smaller iterations was important to ensure consistency across designs. Implementing a structured process across Figma, Confluence, and Jira, along with open communication with developers helped maintain alignment across teams.

Home

Next Project →