Using a design system as a transformation tool

Alfa Laval is a leading global provider of products related to heat transfer, separation and fluid handling for the maritime, energy and food & water industries. We have supported them on their digital transformation journey by creating an integrated design system. More than a system, it has become a tool for organisational transformation.

The digital team in Alfa Laval develops digital solutions for Alfa Laval’s hardware products, such as HMIs (Human Machine Interfaces) used by machine operators, dashboards for monitoring operations and web applications. To create a unified, holistic expression across products, we have over the past two years, collaborated to create a digital design system – a framework for building new digital functions and products.

An integrated design system facilitates cross-collaboration between designers and developers and makes developing new digital products quicker and more accurate. Complementing tools like checklists and procedures on requesting features, documentation, and educational guides enable effective use of the design system and facilitate a faster onboarding of the design system language.

Facilitates the work for developers

By observing and talking to different internal users of the design system - programmers, department directors, and managers - we could identify the key pain points and test possible solutions together. The result is a restructured and re-designed design system, accompanied by an onboarding manual and guides to facilitate the application of the system, which has helped shrink the onboarding time with approximately 30%.

"The design system provides a common living language, a cohesive design vision, and a systematic approach to our product development. It's a tool for scaling our insights, design, and development practice and promotes cross-functional collaboration across teams and domains."

Karline Segan, Design System Design Lead, Alfa Laval

The design system makes the developing process quicker and more intuitive for the programmers, both when it comes to HMI (Human Machine Interfaces) and web applications. Developers no longer need to create new components when building new functions - instead, they are readily available in a component library. Thanks to the new design system, the amount of code for an HMI project decreased by between 10-20%.

A tool for kicking-off organisational transformation

Alfa Laval is a large and multifaceted organisation, and is working towards becoming more integrated across different departments and client industries. Using design as a method for collaboration and the design system as a 'conversation starter' for collaborating is a way to achieve this. Moreover, a more unified digital expression for their digital solutions will also contribute to a holistic experience for the end user. The design system will facilitate the creation of digital solutions that users recognise across products and can navigate with more ease.

“We believe our new design system will be key to helping us achieve our vision of being recognised as a role model in product digitalisation.”

Jonas Pettersson, Lab Owner, and Product Owner, Alfa Laval

More than a system – a way of thinking

When created collaboratively, like in Alfa Laval, a design system can generate value far beyond the system itself. Together we have recognised how the design system is a tool to facilitate transformation by offering a new efficient, collaborative approach to working in the organisation. The understanding of the design system language has shifted from mainly focusing on the visual aspects to also including a new way of thinking and working to solve problems and collaborate.