Volvo Group Design System
Volvo Group Design System
Volvo Group Design System
2022 - 2024
2022 - 2024
In 2022, I was challenged to lead the Volvo Core Team in creating the Volvo Group Design System. Developing a design system is always a challenge, but at Volvo, it was even more so. Many stakeholders were unfamiliar with the concept, its benefits, and its potential impact. On top of that, we were given an extremely tight deadline for an MVP, just four months. Given the complexity of a company with over 100,000 employees, the task was daunting. Our goal was to deliver a design system that was compliant with the Volvo brand and brought consistency across our multiple touchpoints. This would enable us to create a seamless experience in the future while also reducing development costs for the company.
In 2022, I was challenged to lead the Volvo Core Team in creating the Volvo Group Design System. Developing a design system is always a challenge, but at Volvo, it was even more so. Many stakeholders were unfamiliar with the concept, its benefits, and its potential impact. On top of that, we were given an extremely tight deadline for an MVP, just four months. Given the complexity of a company with over 100,000 employees, the task was daunting. Our goal was to deliver a design system that was compliant with the Volvo brand and brought consistency across our multiple touchpoints. This would enable us to create a seamless experience in the future while also reducing development costs for the company.
Setup
From the start of the project until my last day as lead of the Core Team, I led a total of 11 designers with diverse roles, including icon creation, UX writing, and video editing. Team members contributed to the design system at different stages.
We operated using a mix of Agile and Scrum methodologies, working in two-week sprints. Deliverables were reviewed in demo sessions, and at regular intervals, I held one-on-one meetings to provide feedback on strengths and areas for improvement.
Setup
From the start of the project until my last day as lead of the Core Team, I led a total of 11 designers with diverse roles, including icon creation, UX writing, and video editing. Team members contributed to the design system at different stages.
We operated using a mix of Agile and Scrum methodologies, working in two-week sprints. Deliverables were reviewed in demo sessions, and at regular intervals, I held one-on-one meetings to provide feedback on strengths and areas for improvement.
Research
New to Volvo, my first goal was to understand the brand, how it positioned itself, what was allowed and what wasn’t, and its vision for the future. I thoroughly studied all the guidelines and maintained close contact with the Head of Brand to develop a library that was 100% compliant with Volvo’s identity.
After gaining a deep understanding of the brand, I shifted my focus to the applications we were building the design system for. I spoke with various designers and stakeholders from different projects to determine the key components needed for our MVP, ensuring it would deliver immediate value to its users.
This approach allowed us to establish clear objectives, delivering 33 components for websites, Android, and iOS.
Research
New to Volvo, my first goal was to understand the brand, how it positioned itself, what was allowed and what wasn’t, and its vision for the future. I thoroughly studied all the guidelines and maintained close contact with the Head of Brand to develop a library that was 100% compliant with Volvo’s identity.
After gaining a deep understanding of the brand, I shifted my focus to the applications we were building the design system for. I spoke with various designers and stakeholders from different projects to determine the key components needed for our MVP, ensuring it would deliver immediate value to its users.
This approach allowed us to establish clear objectives, delivering 33 components for websites, Android, and iOS.
Foundations
Once I became familiar with the Scandinavian way of expression, I began working on the foundation of the design system, which involved defining colors, borders, typography, iconography, corner radius, and more. Extensive testing was required because Volvo's brand guidelines were not optimized for digital platforms, making it necessary to adapt and even recreate some elements from scratch.
From the start, our goal was to ensure full compliance with accessibility standards, considering the upcoming European accessibility law. To achieve this, we tested our components on physical devices and used specialized digital tools to evaluate their behavior.
At Volvo, we had designers with varying levels of experience with design systems. Some were already familiar, while others had never worked with one. For this reason, I decided to start the design system in a simple way, beginning only with semantic colors. This allowed both designers and stakeholders to gradually familiarize themselves with the system before introducing more advanced features like tokens.
Although Volvo is widely recognized for the quality of its physical products, its UX maturity was still at level 2, Limited. This highlighted the need to educate our teams throughout the process.
Foundations
Once I became familiar with the Scandinavian way of expression, I began working on the foundation of the design system, which involved defining colors, borders, typography, iconography, corner radius, and more. Extensive testing was required because Volvo's brand guidelines were not optimized for digital platforms, making it necessary to adapt and even recreate some elements from scratch.
From the start, our goal was to ensure full compliance with accessibility standards, considering the upcoming European accessibility law. To achieve this, we tested our components on physical devices and used specialized digital tools to evaluate their behavior.
At Volvo, we had designers with varying levels of experience with design systems. Some were already familiar, while others had never worked with one. For this reason, I decided to start the design system in a simple way, beginning only with semantic colors. This allowed both designers and stakeholders to gradually familiarize themselves with the system before introducing more advanced features like tokens.
Although Volvo is widely recognized for the quality of its physical products, its UX maturity was still at level 2, Limited. This highlighted the need to educate our teams throughout the process.
Atomic Design
From the start, Brad Frost’s Atomic Design methodology was our chosen approach to educate designers on working with the design system. The library itself was built following this structure, beginning with atoms and gradually evolving into molecules, organisms, and beyond.
Atomic Design
From the start, Brad Frost’s Atomic Design methodology was our chosen approach to educate designers on working with the design system. The library itself was built following this structure, beginning with atoms and gradually evolving into molecules, organisms, and beyond.
Core components
Time was against us, so we needed to be pragmatic. I leveraged my experience at IBM and Athié Wohnrath, using Material Design and Carbon Design System as references to build our first set of components. To prevent setbacks, all components were designed and reviewed with developers to ensure they could be efficiently implemented. Libraries like Material UI helped validate expected behaviors. The idea was to adapt the best of the mentioned libraries with a Volvo flavor to deliver something high-quality and fast.
As we created the components, we immediately tested their behavior in our websites and applications, allowing us to fail fast and fix fast.
Core components
Time was against us, so we needed to be pragmatic. I leveraged my experience at IBM and Athié Wohnrath, using Material Design and Carbon Design System as references to build our first set of components. To prevent setbacks, all components were designed and reviewed with developers to ensure they could be efficiently implemented. Libraries like Material UI helped validate expected behaviors. The idea was to adapt the best of the mentioned libraries with a Volvo flavor to deliver something high-quality and fast.
As we created the components, we immediately tested their behavior in our websites and applications, allowing us to fail fast and fix fast.
Volvo Experience System - V.E.S.
While building the Figma library, we also developed the Volvo Experience System, a website documenting the design system. Known as V.E.S., it provided guidelines on using components, brand information, and access to media assets for various purposes. The portal also integrated with our component library in Storybook, giving developers easy access for implementation in their projects. Feel free to explore it here.
Volvo Experience System - V.E.S.
While building the Figma library, we also developed the Volvo Experience System, a website documenting the design system. Known as V.E.S., it provided guidelines on using components, brand information, and access to media assets for various purposes. The portal also integrated with our component library in Storybook, giving developers easy access for implementation in their projects. Feel free to explore it here.
Launch
As planned, the Volvo Group Design System was officially launched at UX Day, just four months after development began. I had the privilege of presenting it to designers both in person and online. Still in its beta phase, it allowed designers and developers to start using it, providing valuable insights and feedback for continuous improvement.
Launch
As planned, the Volvo Group Design System was officially launched at UX Day, just four months after development began. I had the privilege of presenting it to designers both in person and online. Still in its beta phase, it allowed designers and developers to start using it, providing valuable insights and feedback for continuous improvement.
Results
With the success of the Volvo Group Design System, multiple business areas adopted the library, including Volvo Trucks, Volvo Construction Equipment, Volvo Autonomous Solutions, Volvo Financial Services, Volvo Energy and Volvo Buses.
The estimated savings reached 100 million SEK in just one year, attracting the interest of affiliated companies such as Renault Trucks and Mack Trucks.
Results
With the success of the Volvo Group Design System, multiple business areas adopted the library, including Volvo Trucks, Volvo Construction Equipment, Volvo Autonomous Solutions, Volvo Financial Services, Volvo Energy and Volvo Buses.
The estimated savings reached 100 million SEK in just one year, attracting the interest of affiliated companies such as Renault Trucks and Mack Trucks.
Phase 2
In its second year, the Volvo Group Design System focused on becoming multi-branded to support Renault and Mack. We carried out extensive adaptations for both brands and enhanced versatility by implementing design tokens. The system now supports three distinct brands in both light and dark themes.
Phase 2
In its second year, the Volvo Group Design System focused on becoming multi-branded to support Renault and Mack. We carried out extensive adaptations for both brands and enhanced versatility by implementing design tokens. The system now supports three distinct brands in both light and dark themes.
