Design System"I implemented and promoted advanced design systems long before the term was even around."
In 2012, I started as a UX Designer with the Volkswagen Group. It soon became clear that the need for UX was huge, and I realized that I was facing the very real and tedious possibility of having to reinvent the interaction patterns over and over again for each application that was assigned to me. I knew there had to be a better way. So I devised a design system that not only documented the patterns themselves but also provided ready-made web components. Today these web components can be used by any of the applications that are hosted at Volkswagen's subsidiaries, including, among others, Porsche, Audi, MAN, and Scania.
| The Project | |
|---|---|
| Brand | Volkswagen Group https://www.volkswagenag.com/ |
| Target Audience | UX Designers FE Developers Product Owners |
| My Roles | Team Leader UX Architect Workshop Facilitator Product Owner |
| Duration | Two Years |
| Deliverables | User Research Sketches Prototypes Test Reports HTML/CSS Code Design System |
I created a Style Guide for Scania's UX Library that includes non-HTML components like logos, icons, and fonts to save developers and designers effort and time.
The Style Guide also makes it easy for developers and designers to locate company colours and chart examples.
All the components that are listed in the UX Library come with a code sample.
The components are displayed in a gallery for easy viewing.
To test the core technology of the design system, I collaborated with colleagues to develop several showcase implementations.
-
The Design Process
-
Understand
Competitive Audits
Interviews
Surveys -
Define
Personas
User Journeys -
Ideate
Brainstorming
Wireframes
Sketches -
Prototype
HiFi Mockups
HTML Prototypes -
Validate
End User Tests
Quantitative Analytics
Showcase Implementations