Volkswagen Group Case Study: Driving Digital Transformation, Company-Wide Collaboration & Consistency with Stencil

Volkswagen may be synonymous worldwide with vehicles like the Atlas, Golf, Passat, and the iconic Beetle, but the German auto company’s reach extends far beyond its namesake car brand.

Volkswagen Group is the second largest auto manufacturing company (based on sales) in the world. It’s the parent company of several well-known luxury vehicle brands—such as Lamborghini, Audi, Porsche, Bentley, and more—and produces millions of passenger cars, motorcycles, and commercial vehicles each year under the Volkswagen Group umbrella.

The Challenge: Designing across multiple brands

With so many different brands to manage, the team at Volkswagen Group realized that they needed to embrace digital transformation and create a modular user interface design system that works effectively across all of the company’s web applications.

“The main target was to deliver certain synergies,” explained Thorstan Jankowski, UX Lead for Volkswagen GroupIT. “Not to make the world look nicer but to be faster in delivering software and to enable the team to be more design compliant.”

Juggling a myriad of moving parts across multiple brands, the Volkswagen Group needed a way to create a robust and flexible design system for all of its software products—without disrupting business operations.

This meant figuring out how to break down silos and create a universal UI design system across the entire company. This would allow each brand team to eliminate work redundancies and focus on delivering solutions to meet each brand’s unique needs.

But with over 60 teams building over 40 applications, optimizing the design-to-code pipeline was proving to be a daunting challenge.

The Strategy: Design-to-code pipeline

In order to deliver a consistent user experience, the Volkswagen Group team decided to build a design-to-code pipeline to support any front-end technology, for every brand. To support this pipeline, they turned to Ionic’s best-in-class design system toolchain, Stencil.js.

Stencil provided the Volkswagen Group team with a top-down approach to creating maintainable, W3C standard-compliant web components, without the need for CSS preprocessors.

The web components combine HTML, CSS, and JavaScript into universal packages that help provide not only a uniform UI, but a uniform UX as well.

The components can be used with React, Angular, and many other frameworks, meaning developers can integrate them into their existing tech stack.

“One important aspect for us is that it’s easy to use,” said Johannes Bosch, front-end developer at Volkswagen’s GroupIT. “With web components, we’re able to deliver a package that could be installed in an easy way, in any kind of application.”

Stencil even provides (experimental) screenshot testing that complements tools like Puppeteer and Jest.

Stencil offered the team a flexible, easily maintainable way to achieve their goal of universal UI design across every brand, on any device.

With web components, we’re able to deliver a package that could be installed in an easy way, in any kind of application.

Johannes Bosch, front-end developer at Volkswagen’s GroupIT

The Result: Powering GroupUI design system with Stencil

With the help of Stencil.js, the Volkswagen Group team was able to create GroupUI—a holistic design system meant to break down silos and connect teams across the entire company, better enabling them to produce best-in-class brand-customizable user interfaces.

This has allowed the entire team to create a cohesive set of overarching principles, with an emphasis on flexibility, transparency, and collaboration. 

Using Ionic Stencil to power GroupUI has given the entire Volkswagen Group team access to a toolkit of resources including:

• Technology agnostic framework
• Design-to-code pipeline to streamline the interactions between teams
• Easy-to-use, maintainable, and compliant web components
• Integration with Figma and the development pipeline
• A collaborative system allowing designers and developers to work together, better

With the help of Stencil.js, each brand under the Volkswagen Group umbrella can enjoy a standardized user experience—no matter the application, device, or tech stack.

Learn more about Volkswagen Group on LinkedIn, Twitter, and YouTube.