Outcome
We developed Alfa Laval’s first integrated Design System to unify all of its digital products into a coherent and holistic experience and to meet the needs of business users, designers, and developers. More than just a system, it has become a tool for organizational transformation that served as the foundation for the creation of an in-house design team.
Less code for each HMI project
Reduction in onboarding time
“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."
Lab & Product Owner, Alfa Laval
Challenge
Alfa Laval is a leading global provider of products related to heat transfer, separation and fluid handling for the maritime, energy, food and water industries.
It began its digital transformation by launching various but uncoordinated initiatives to build HMIs, monitoring dashboards and web applications. These projects were developed independently of each other, with no visual consistency between them, and development took a considerable amount of time as it started from scratch each time.
My contribution
I focused on the HMI side, which includes the machine tool-specific components I designed to be versatile, robust and visually intuitive, as well as the data visualization graphics.
I also worked on developing the Design System guidelines to facilitate the collaboration between the design and development departments.
Key decisions
1) I enabled users to make quick decisions in stressful environments
Alfa Laval designs technical solutions for a wide range of industries, including refining and energy production, mining, heavy industry and maritime transport. Identifying quickly hazardous situations or malfunctions is essential for users who work in harsh and stressful environments.
I developed the Design System to create interfaces that are easy to read even under challenging conditions (such as a moving environment or darkness), making it easier to identify problems and enabling quick responses and decision-making.
Through numerous user tests, I was able to improve the consistency among the components and ensure their relevance for users.
“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."
Design System & Design Lead, Alfa Laval
2) I delivered actionable data insight through consistent data visualization
Alfa Laval’s production operators were using many different HMIs to monitor production and the operation of their machine tools, with discrepancies in efficiency and quality control from one interface to another.
I considered the best way to present key information visually and made data visualization the core of the HMIs, designing a comprehensive set of versatile graphics suitable for all types of interfaces.
