Atelier Design System

Design System
Product Ops

       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.

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

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.

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.

More Projects