design-system
product-design
design-management
brand-identity
Project Type
Design System Management and e-mobility
Technology
Design Tokens Figma Android / iOS CSS Storybook
Simplifying how designers, developers and QA work with a white label multi-brand design system
The design system for EV drivers and fleet managers
Brief
Challenge
1st Iteration
Final Solution
Atomic Design & File Structures
A long while ago, I found the Atomic Design framework that supports the design systems by creating the smallest most generic elements within a design system with later can be re-used by different componentns. This framework got updated around 3 years ago and I decided to use this framework to build the DCS design systems. Also directly when I came to the DCS, I also brought in Figma to the company. When you want to get buy in for a tool and new way of working, you need to consider "interal tooling UX" - this means that you need to make everything frictionless as possible so that the adoption rate of your tools increased within the company. Every file was structured based on the different cross-functional teams, this supports that stakeholders know where to look and where to go, so that they don't need to learn something new. This is very similar to UX for products and services, but only for internal tools.
Results
From manual to automation.
After enabling the DCS with Figma and FigJam, we had around 200 of 250 active daily users, using our design documentation in Figma within less than a year. I also brought in Dovetail and Maze for user research.
Credits
Collaboration between designers is most important in the area of design system management. Here are the main contributors from my Product Design team doing my time at the DCS.
