Project Description

Release date: 2021 - Ongoing
Role: Creator/Manager

Having an organized single source of truth library can save your company time when designing new system features. It makes sure that there is consistency throughout and minimizes the time it takes to make changes.

Why Design Systems

A design system goes hand in hand with the need for scale, efficiency, and consistency. When a complex system expands, you run a high risk of deviating from the consistency you started with. There can be differences in colors, components size, and layout. These systems typically consist of a style guide, a component library, and a pattern library.
Style guides make sure that everyone is on the same page regarding how a component is used in the system, and it helps new designers get onboarded faster. A component library speeds up the construction of new features and keeps consistency within the design, while a pattern library gives you layout examples and templates.

The Challange

Creating a design system within an automotive company for the cluster and infotainment also presents a range of interesting challenges that might typically not appear when creating a design system for web and app. In the automotive industry, the digital components in a car are unique to the brand. Even when the brand belongs within a group, the individuality of each brand is important for the customers. Thus is not possible for one to adopt the design system from another brand.
With MAN Truck and Bus, we needed to create a design system from the ground and up. As I had initially initiated the project for the department I was working for, I was in charge of its creation, maintenance, and coordination with other departments.

The Process

The first step was to figure out the requirements of the design system. As the design system had to be built on an existing system where many variables were not previously defined, many things needed to be clarified and documented. To make things easier, I created a living template to keep things consistent based on Shopify's public template that I would modify based on input from coworkers who had to use the design system. This template worked well as a checklist to gather information about the different components and their usage to create a do and don't documentation.
The next step was to transfer the existing parts into the design system and divide them into atoms, molecules, and organisms where relevant.