Embracing Multibrand Design Systems in the Automotive Industry : A Stellantis Journey
Introduction
Imagine working on a project that would not only revolutionize the design process for in-vehicle human-machine interfaces (HMI) but also streamline the work for multiple iconic automotive brands. This has been my reality for the past six years at Stellantis, a company born from the fusion of PSA Group and Fiat-Chrysler. I’ve had the unique opportunity to work on a generic design system for the four PSA’s brands: Peugeot, Citroën, DS, and Opel. This blog post will delve into the challenges we’ve faced, the strategies we’ve adopted, and the lessons we’ve learned along the way.
Context and Historical Background
The concept of design systems has its roots in the broader field of graphic and digital design, but it has become increasingly relevant in the automotive industry in recent years. As vehicles incorporate more advanced technology, including navigation, entertainment, and safety features, a consistent, user-friendly interface is essential. Historically, automotive brands have developed their own unique HMI, leading to inconsistencies and fragmentation across the industry. The advent of multibrand design systems, like the one we’ve developed at Stellantis, has aimed to address these issues, providing a more streamlined approach to HMI design.
A Generic Design System for In-Vehicle HMI Design
Why? For whom?
Our journey at Stellantis began with the recognition that a generic design system could offer numerous advantages in the design of in-vehicle HMI for our automotive brands. By creating a common product for all group brands, we could simplify the design process, share costs and resources, and facilitate the work of designers and developers. Moreover, this approach would promote agility and continuous improvement in quality and user experience.
A dedicated team
Our generic HMI team is responsible for defining the information architecture and menus, interaction principles, and components and templates that make up the product, following the principles of Atomic Design. This team ensures the overall consistency of the design system and facilitates its integration into the different group brands.
And brand skinners
Our “brand skinners” are responsible for adapting the design system for each brand, based on the parameters allowed by the generic HMI team. They can modify certain visual aspects of the components, the typefaces, and the motion design while respecting the menu architecture, component sizes, and interaction principles defined upfront.
Potential Drawbacks
Despite the many advantages of adopting a generic design system for in-vehicle HMI, we’ve faced some potential drawbacks during our journey. One challenge was the resistance to change that arose when introducing a new design system across multiple brands. Ensuring buy-in from all stakeholders and providing adequate training has helped us to mitigate this issue.
Another potential drawback was maintaining the unique identity of each brand while using a common design system. Striking the right balance between standardization and customization proved to be challenging, as it required close collaboration and clear communication between the generic HMI team, the brand skinners and all other stakeholders.
Deploy the Design System and Design a Consistent Product
The guidelines
Throughout our journey at Stellantis, we’ve recognized the importance of creating guidelines to help designers and developers build an effective and consistent product. These guidelines specify how to use the design system and provide guidance on best practices to adopt.
Instantiating the design system
Our feature teams, responsible for the design of a specific function, consume the design system to design a coherent final product. Beside guidelines, a toolbox is made available to them, containing the design system components, style assets, and basic templates. At Stellantis we’ve been using mainly Adobe XD for HMI design, and we’re now deploying Figma, with a similar approach and organization.
The support
We’ve found that providing dedicated support to the teams working with our design system is crucial for ensuring its successful implementation. Regular meetings with the generic HMI team help address any questions, offer guidance on best practices, and gather feedback to improve the design system further.
Agility
In our experience at Stellantis, adopting an Agile methodology has been beneficial in facilitating the constant evolution of the design system. This approach enables controlled impact on functional specifications, allowing for quick adjustments and improvements as needed.
Equipping the Design System and Ensuring Proper Use
Evolution of tools
Our design system has evolved from a static system to a library of dynamic components, allowing for greater flexibility and adaptability. In addition, we’ve transitioned from static user journeys to interactive prototypes, offering better insights into user experience and facilitating testing and adjustments.
Plugins
Within Adobe XD, and more broadly the Creative Cloud ecosystem, plugins have been instrumental in managing our project and ensuring the proper use of the design system. Our customs plugins were designed to facilitate tracking component usage, detecting new needs, and generating “health reports” to assess the design system’s health and its use. Additionally, localization plugins help connect visual specifications and translation tools, ensuring better consideration of linguistic and cultural constraints.
Overcoming Challenges and Looking Ahead
Consistency with the offboard digital world
As our journey at Stellantis continues, we strive to ensure that our multibrand design system evolves consistently with trends and technologies in the offboard digital world. This involves staying up-to-date with the latest innovations and adapting quickly to offer increasingly efficient and immersive user experiences from our cars to our connected mobile devices.
Evolution of tools and deployment of new technologies
The development and deployment of cutting-edge technologies such as head-up displays, augmented reality, and voice-activated controls present significant challenges for multibrand design systems. To successfully integrate these innovations into the design system, it is essential to establish clear guidelines and best practices that address these new technologies. For example, when incorporating augmented reality into the design system, it’s crucial to consider factors like visual clutter, user attention, and potential distractions while driving. Providing specific design templates and components tailored to augmented reality applications can help designers and developers create consistent and safe user experiences across all brands.
Design APIs
The concept of “design APIs” can play a crucial role in streamlining collaboration between designers and developers. Design APIs can be thought of as a set of standardized rules and protocols that govern how design components are created, modified, and used across different platforms and devices. By creating a design API, we can ensure that designers and developers work in a more coordinated manner, reducing potential errors and inconsistencies while speeding up the overall design process.
Conclusion
Our journey at Stellantis has been full of challenges and learning experiences as we’ve developed and implemented a multibrand design system. By adopting a generic design system, deploying appropriate tools, and fostering collaboration and support, we’ve been able to simplify the design process, improve quality and user experience, and address challenges related to the rapidly evolving sector. However, it is essential to consider potential drawbacks and challenges that may arise, such as resistance to change or maintaining brand identity. By acknowledging these concerns and staying abreast of industry trends and innovations, multibrand design systems can continue to play a vital role in the future of automotive HMI design.
I’m Valentin Cazin, Design Ops at Stellantis. You can follow me on Twitter for more design, AI and automation content. Thank you for reading !
