Contact

Modular Design system
for multi-platform experiences

Dôme is an all-in-one SaaS who digitalize
all the real-estate process

YEAR
2020

Tools
Figma

MY ROLE

Strategy
Planning
Design + Execution
Management
Coaching

I WORKED WITH

Front-end developer
Designers

CONTEXT

During the development of Dôme we needed to hire 2 designers.

In order to onboard them in the best conditions and work quickly, we decided to start building the design system prior to their first day.

01|

Decide vision 

Consistency / Responsive 

Dôme Design System was built to enable scalibility, so components can work well alongside each other, at the same time, and render well on various device resolutions.

Team connected on figma

Dôme is a SaaS with a lot of pages.
To avoid wasting time to replace every component on every page, the design system is connected to all of the UI.

Design system should be the single source of truth

By experience, I know that a design system can easily get messy: too many components, unused components, multiple components doing the same work...

So to avoid this, we made some rules that designers should follow before adding or updating components.

Create awesome and FAST websites!

02|

Connected code and design

Zeroheight technology 

At each modification on design system, developers can update their code directly on Zeroheight

03|

Build architecture with atomic design

We choose atomic design for clean separation between system and product 

 

04|

Let the all the team design !

Design system Keynote

Once the design system was complete enough, I met with the tech team.

My goal was to show them how they could easily reuse interfaces thanks to the drag and drop feature.

During design sprints, this allowed developpers to suggest ideas by creating and modifying interfaces themselves!