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.
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.
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.
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.
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.
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.
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.
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.
Building the future of consumer product innovation & manufacturing
No fluff, no stress - just smart, personalised travel intelligence at your fingertips
A seamless platform for customers to create, pay and track production orders