For six years I was the lead UI/UX designer for SSAB. During those years I created a design framework clever enough to host over twenty brands. It contained tons of features and solutions in an evolving design systems. But let’s start at the beginning.
SSAB
A scalable design framework for more than twenty brands
Client testimony
“I had the pleasure working with Henrik on SSAB's customer facing user interfaces for several years. Beyond his visual skills, Henrik is a proactive partner who takes user experience seriously.
His expertise and passion for design will undoubtedly be an asset to any team. He is a person you want to form a long term partnership since he is capable and willing to learn your business and understand how to solve your issues through UI/UX.”
Matti SiukkolaDesign Manager at SSAB
A vision
When this started, SSAB’s digital products were scattered across platforms, with divisions managing them independently and without a unified approach to user experience.
It was a tough situation for SSAB – and for us. At a certain point, my colleague at the time, Torbjörn Buhré, then Creative Director at Petra Digital Agency, had had enough.
With his visionary mindset and wonderful conceptual work, he convinced SSAB that they needed a total transformation. “The Vision Project” was born.
Clarity
To succeed with our mutual vision, clarity was key. We had to make the user experience obvious to take every brand to a new, high standard.
The main navigation
One of the most challenging tasks was the navigation. Capable of housing over twenty brands and forty thousand pages, it was as inspiring as it was demanding. Especially in mobile.
To help users get around the website regardless of what screen size they were using, I wanted to make the desktop and mobile navigation experience as similar as possible.
One day I was fiddling with some post-it notes. Then I realized that this exact motion would be great for the mobile navigation.
Similar to a stack of post-it notes, the cards of the menu could be stacked on top of eachother. With a light tap of your finger you could let them slide out to show you your path through the site structure. With just another tap you could then jump to anywhere you’d like in your path.
A consistent UI
To free the users from cognitive load, the UI was made consistent down to the bone. From corner radius, to hover effects – all the details were made to harmonize and be familiar.
Hover effects were made unified and clear throughout the UI.
Other features, like language and country selection was also made to look and feel as similar as possible inbetween screen sizes.
Experience first
In many situations it’s a great idea to make the experience as similar as possible independent of the screen size you’re working with. In some situations, the usage patterns just doesn’t come in a one-size-fits-all variant. As for breadcrumbs, I wanted to give a new type of experience a try. It stuck to the hero area and when clicked it expanded and gave users full access to their path from Home to Current page.
Giving options
To cater to millions of annual users, some features just had to be given alongside options. Tables were one such thing, but also downloads. In some situations, users could benefit from selecting what they download. SSAB’s extensive privacy policy is a prime example. With lots of different sections, nested sub sections and multiple languages, I wanted to give users a simple way to get just what they needed.
A smart assistant
SSAB has a huge knowledge bank and wants users to find their answers friction free. To give the best possible self-service I designed an AI chat assistant, complete with animations and interactions for a smooth experience.
A special thank you
In 2022, Josefine Sandqvist joined our design team and brought both creativity and precision with her. Together we tackled tons of complex tasks and became an incredibly powerful duo, constantly pushing one another to broaden our perspectives. I believe we both learned a lot from each other.
Thank you, Josefine!
Acknowledning the team
The core team
Another aspect of the success of the “Vision project” was that the backbone of the team remained through the years. UI/UX designer Josefine Sandqvist, project manager Mattias Ahlberg and developers Mia Trullenque and Andreas Elffors worked hard to turn this vision into reality.
The big team
Other extremely valuable team members were Cristoffer Crusell, Christian Raaschou, Arvid Kandell, Björn Vuokivi, Christian Svensson, Joel Sandén, Michael Skowronski, Grzegorz Czajkowski and Radosław Piotrowski who all played an important role through the years.
The amazing customer
Finally, a project like this can only be successful if the client is up for it. So the greatest of thank-yous to Alejandra Ellerås, Matti Siukkola, Magda Tomiczak, Satu Mustonen, Anna Dodds, Michael Kawamura, Asli Kozan, Mikael Petersen and more for this wonderful journey!
Results
Over the course of six years, hundreds of components were designed. Forty thousand pages were aligned. And during my last year with SSAB an independent UX audit reported that the state of their websites was better than ever.
Retrospective
Working closely with a client for such a long period creates the kind of bond I want to have with every client. If I had a magic wand, I’d add more regular user testing and A/B testing trying out different approaches. But to all involved: Thank you ❤️
