SSAB - Design System boosting development with research and tools
Qualitative research surfaced a need to enhance user experience across several hundred internal systems within SSAB's production facilities, aiming to streamline operations and improve efficiency.
Client
SSAB Special Steels
The largest steel manufacturing company in Sweden, renowned for its high-quality steel and advanced metallurgy department.
Role
Initial product owner of the internal product design system
Work
Hybrid
A grid of squares displaying a selection of design components like accordions, avatars and badges.
Challenge
SSAB is facing a unique challenge with hundreds of systems and programs used in their facilities, all engineered with a high level of complexity and specificity.
Our goal was to simplify and enhance the usability of these systems. As the project evolved, we navigated the dynamic landscape of stakeholder expectations, budget constraints, and the need for robust organisational support.
An image showing chaotic equations transforming into a structured but still complex format, highlighting the preservation of complexity.
Our vision is to establish an efficient chain of digital experiences, where the project’s deadline does not mark an end, but rather initiates a new era of continuous improvement and development.
Approach
The initial step involved visiting SSAB’s facilities and engaging with machine operators to understand their IT experiences. This helped us identify opportunities to simplify and enhance the usability of the programs, making them more intuitive for all users.
We then consulted with the engineers responsible for these programs. While they had valuable insights into design systems, there was an opportunity to introduce more standardised frameworks and guidelines to better meet user needs.
Our focus was on improving code maintenance practices and creating a more user-friendly design system. This included working with various codebases and securing organisational support, with an emphasis on showcasing potential cost savings and efficiency improvements.
Design Decisions
Switching away from our initial frameworks delayed us by a few months. We discovered late in the process that our design tokens needed specific structuring for supporting multiple brands and platforms. This setback could have been reduced by working with a developer experienced in design systems, who could have guided us in setting up the right technology framework.
Developing a detailed design system that supports various brands and platforms significantly expanded the project's scope and complexity. This expansion made ongoing maintenance resources essential for the system's sustainability.
By adhering to W3C standards and EN 301 549, we established a clear framework for our design efforts. These standards not only guided our creative process but also aligned with SSAB's compliance requirements under accessibility and UX practices, helping to meet user and stakeholder expectations.
A timeline diagram depicting three phases of developing and distributing a design system.
Solution
The solution involved creating a comprehensive design system with well-documented components and patterns, introducing a paradigm shift in IT and product development processes. Much needed to gain control in a fast growing developer team that currently is run without designers or requirements analysts.
By streamlining the delivery of the design system and utilising third-party services, we established a single source of truth through design tokens in JSON format. This approach allowed for flexibility and adaptability across various codebases, ensuring the design system could evolve with the industry and external technical evolutions.
Diagram showing Figma creating design tokens in JSON, feeding into web components (Stencil), which integrate with React, Vue, and Angular, then connect to Storybook and support multiple applications.
A simplified flow of how new components are introduced in the component library.
Result
The full impact of my work is pending evaluation. However, we observed that developers eager for a modern workflow played a crucial role in advocating for our design system, facilitating organisational acceptance and momentum.
Navigating the organisational dynamics among stakeholders and managers is a key aspect of implementing a design system. While making large changes is desirable, gradual progress—shifting one aspect at a time—is often the most practical and pragmatic approach.
Successfully prototyping and presenting redesigns to both operators and stakeholders have bolstered my confidence in the longevity and future management of this design system.
A grid of modules created by the components inside the design system. Showing an overview of how parts inside upcomings platforms may look.