One design system to rule them all

Client

Merch Square

Status

Ongoing

Responsibilities

Design System

Mobile Apps

Web App

Website

Team

Product Designer

2 Business Owners

4+ Developers

Date

2019
2020
2021

View project

3 min read

stage 01
setting the scene

walking the path

scene 01 - context

The design system was built early on to help the team manage the mobile apps and all the digital platforms linked to our projects BUZZi (Case Study) and Moduseller (Case Study).
Full disclosure: this is an ongoing project, and components are constantly evolving. Please enjoy my (work in progress) case study.

stage 02
rising action

multiple benefits

Scene 01|03 - users

We are the creators and the main users of our own design system. The design system is also the foundation of our multiple platforms so our end-users are also part of the scheme. The system was made to help me save time and be more efficient as the only Product Designer but benefit also my developers.

Scene 02|03 - design problem

How to leverage rapidly the power of a design system and justify the time to build it to the product owners?

Scene 03|03 - the challenge

In the past, I have built UI kits / smaller Design systems but never something that big and scalable. From Day 1, I knew it would be a permanent work in progress but I needed to find the right methodology to kick off the project and build good foundations and “obviously” with a tight deadline :)

stage 03
climax

the foundation stone

Scene 01|04 - research

Prior to laying the foundation stone (lego), I studied about existing Design Systems, how companies were building and organizing them. I took away some good insights and inspired by Brad Frost method and great talk with my friend Maxence, I decided to use the Atomic Design approach.

Scene 02|04 - accessibility

From early on, I focused my efforts by putting accessibility as a pillar of my design system. Took into consideration the OS Guidelines and made sure everything was on point (Native fonts / colors contrast / touch target).

Scene 03|04 - material design

Material Design became a good ally and to this day is a great help to optimize the Design System. At some point, I know we will start to customize the system more and more to reach a stronger identity. It’s already happening but Material Design will stay a good resource to look at as they contain plenty of established patterns.

Scene 04|04 - communication with developers

As a lead Product Designer, I put great effort to work hand and hand with the developers from the start. The Design System was built with them and by listening to their needs.

stage 04
solving the problem

atomic approach

Scene 01|05 - architecture

As mentioned earlier, the architecture I choose to follow was inspired by Brad Frost. I picked this method because of its logic and how it will help me (my brain) to organize my components by complexity and find them quickly.

Scene 02|05 - atoms

Atoms are the least complex elements of the buckets, the base of our system. They refer to icons, buttons, elevation, avatars, etc.

Scene 03|05 - molecules

Molecules are simple components. Like some of the atoms, I try to make every possible scenario and states. The Design System became a resource for the developers to check out how they need to implement the components based on the action of the users.

Scene 04|05 - organisms

Organisms are the most complex components. They include molecules and atoms.

Scene 05|05 - file distribution

Current distribution I am using to support all the digital platforms related to Buzzi and Moduseller.

stage 05
(re)solution

this is not the end

The design system will always evolve and most probably keep growing. Through this case study, I wanted to share with you my process and a bit of what I learned along the way. The Design System has definitely played a huge part to save me time as the only Product Designer in the startup.