Project Description

Release date: 2021 - 2022
Role: Manager/Contributor

A well-maintained, single‐source‐of‐truth library keeps our designs aligned, accelerates new feature roll-outs, and slashes the effort needed for revisions—resulting in faster development cycles and a seamless experience for users.

Why Design Systems

A robust design system drives scalability, efficiency, and consistency by centralizing visual and interaction rules. As a product grows, variations in color, spacing, and layout can undermine coherence; a comprehensive system addresses this with a style guide to align component usage and accelerate designer onboarding, a component library to ensure uniform, rapid feature development, and a pattern library of reusable templates and layouts that streamline both design and implementation.

Challanges

Automotive clusters and infotainment systems pose very different challenges than web or mobile UIs, because in vehicles the digital interface itself becomes a key expression of brand identity. Even within a multi-brand group, each marque must retain its distinctive look and feel—so you can’t simply repurpose one brand’s design system for another. At MAN Truck and Bus, our team created a ground-up design system: designers, and product managers collaborated to define automotive constraints, preserve brand DNA, and establish governance for seamless implementation across departments.

The Process

Our first step was requirement gathering: integrating the new system with legacy components meant clarifying dozens of undefined variables via detailed documentation. I adapted Shopify’s open-source template into a living checklist—soliciting input from designers, engineers, and PMs to define component usage guidelines. Armed with that checklist, we then imported existing UI elements into the system, classifying them as atoms, molecules, or organisms in line with atomic-design principles.

All Images and Videos are subject to © Copyright 2022 Unspash