Project Description
Release date: 2021 - 2022
Role: Manager/Contributor
Maintaining a well-organized, single-source-of-truth library significantly enhances efficiency when developing new system features. This approach ensures consistency across designs and substantially reduces the time required for implementing updates or modifications. Ultimately, such a resource helps streamline workflows and supports a cohesive, unified user experience throughout the product development lifecycle.
Why Design Systems
A design system supports the goals of scalability, efficiency, and consistency. As a complex system expands, the risk of inconsistency increases—leading to potential variations in colors, component sizes, and layouts. To address this, a comprehensive design system typically includes a style guide, a component library, and a pattern library.
A style guide ensures clarity and alignment regarding the correct usage of components across the system, facilitating quicker onboarding for new designers. A component library allows for rapid development of new features while maintaining design uniformity. Meanwhile, a pattern library offers layout examples and reusable templates, further enhancing consistency and efficiency in design and implementation.
Challanges
Creating a design system for automotive clusters and infotainment systems presents unique challenges compared to traditional web or app design systems. In the automotive industry, digital interfaces play a significant role in defining a brand's unique identity. Even within a larger corporate group, maintaining each brand’s distinct characteristics is essential for consumer perception and brand value. As a result, it is generally not practical to directly use a design system from one brand for another.
At MAN Truck and Bus, we developed a custom design system from the ground up. As the project initiator within my department, I managed its creation, maintenance, and coordination with other teams. This role required addressing automotive-specific design constraints, preserving brand individuality, and ensuring smooth collaboration and consistent implementation across all departments.
The Process
The first step was to define the requirements for the design system. Since it had to integrate with an existing system where many variables were previously undefined, extensive clarification and documentation were necessary. To simplify this process and ensure consistency, I created a living template based on Shopify’s public template. I adapted this template using input from coworkers who would eventually use the design system, turning it into a practical checklist. This approach made it easy to gather essential details about various components and their proper usage, ultimately shaping clear "do and don't" documentation.
The next step involved transferring existing components into the new design system, categorizing them into atoms, molecules, and organisms wherever applicable.
All Images and Videos are subject to © Copyright 2022 Unspash
