My role
I lead the design process, strategy and implementation of the system. I was responsible for how it was going to be used on the following projects and the architecture of the Sketch file.
Since leaving the project it's been handed over to the very talented Johan Gabrielsson who has since interated on the systems.
The problem
While leading the checkout team (more about it here), I worked on a grass roots movement to help all brands to spin up faster and reuse the best patterns made by the different product teams. This way the brands could focus on their experience and voice.
The Challenge
The vision, building for the future and make sure that all brands eventually could use the system. We needed it to be accessible (from a WCAG standpoint) reusable and flexible enough to applied different stylings. Most importantly allow the brands to express themselves but cherry pick the patterns they wanted to use.
The system
Discovery
Audit
When setting up a system it's always starts with an audit. This helps to understand what are the common elements of each brand. Using Miro we took screenshots and highlight what was similar.
User interviews
When collecting similarities and auditing sites. We spoke brand managers, designers and developers that were out key consumers of our system. We wanted to know their pain points, worries and goals. This also highlighted to us where in the shopping funnel the brands wanted customisations vs standardisation.
Strategy & Roll out
OKRs & Roadmap
When we concluded the discover phase of out work. I moved to craft the strategy and roll out plan of the system. I set out OKRs and roadmap to fit into the development cycle at H&M.
Architecture
Working with the front end developers and brand designers we starting crafting the foundation for the system. Using a spreadsheet to document the findings and tokens. This really helped to define the mapping and how we can skin a base system.
Working with the designers and developers we a closed card sorted parts of the system into 2 main categories elements and components. Followed by an open card sort to define the grouping for components.
Execution
We crafted a master sketch file connected to the story map. It was filled with cleverly nested components.
With the sketch file, we used Abstract for version control and a way to allow designer to link their working files to the library to seamlessly work with the system. Along with the plugin Camilio they could create pages for multiple brands in minutes.
See it in action
Here's a live demo of making a login screen for multiple brands.
Documentation
Building a couple systems now, one thing that always gets push to the back burner is documentation. To avoid this we added it as a part of the definition of good & done.
Learnings
A good foundation is key!
A good foundation really helps to set the stage. The spread sheet and story map has really helped to setup and roll out the design system. Since leaving the project in 2021, it helped the team migrate from Sketch to Figma.
Share early and often
Interviewing designers, developers and brand mangers - it was really important that we had them involved early and often. When we have something we had them test it and give us feedback.
TL;DR
I was the lead designer and product owner for building a design system for H&M and their family of brands.
