Volkswagen Design System is a repository for App & Web platforms that contains Brand foundations, UI libraries and guidelines. It provides +100 experts with the Design & Code framework they need to create engaging experience.

Goals

• Enhance Design System consistency between platforms while supporting product teams.
• Improve UI Library to support WGAC accessibility standards
• Simplify the onboarding process for product teams to be more participative

Year: 2022

Client: Volkswagen

Role: Lead design

Role & responsibilities

• Responsible of a team of 2 designers
• Plan & Organise design activities
• Design and iterate design assets (eg. UI components, iconography, templates) and design documentation
• Stakeholder communication
• Creative Workshops & design reviews

Outcome

In 6 months we refactored design foundations, UI libraries and Guidelines Web & App platforms. We improved the following:

Improved iterations cycles between Design & Code

• A design token system has been created in order to centralise design decisions and better synchronicity between Design & Code.
• +2500 variants distributed in UI 82 components have been refactored with design tokens.
• Guidelines have been improved to make design documentation more easy to scan and help product teams to get a better overview on UX patterns and how to use them.

More scalable Modular components

• We added focus states and color contrast on UI library to meet with WGAC accessibility requirements
• UI Component has been refactored to address product team goals and adapt to multiple use cases.

Increased usage & contribution from product teams

• We made the process to collect feature requests more from feature teams more transparent through (participative workshops, communication-channels)
• We optimised our interactions with product teams through continuous feedback, surveys and design reviews