The project
The H&M Group was willing to align their different brands processes. This meant sharing centralised support functions for shipping, transactions, stock management… and CMS. For the smaller brands in the group, it was a great opportunity as they would grow. But the new tools offered limited  flexibility compared to their custom websites. For us at Fjord, it meant understanding four brands, and building four different experiences. But based on the same component library.
Image below: Design team - 2 visual designers (1 senior, 1 junior), 2 interaction designers (1 senior, 1 junior)
My part
As the UX lead in the team, I was bridging between the Art directors and the technical teams. I had to understand the platform limitations, and work so that they affect the least possible the designs. Compare the different experiences, and factorise as much as possible the development effort. Document all the components behaviours and expected settings/overrides for the development teams
On the other hand, I was reporting to the business team, and helping project owners in their decision process. I had to maintain the design sprints and deliveries within the developers’ scrum cycle.
Challenges
Balancing diversity and implementation costs was a real challenge in this project. We had to build four different “individuals” that share the same backbones, but dress, behave and talk differently.
Image below: Discovery phase – positioning the brand through personas and design drivers
Process
Each design was evaluated through three criteria: experience quality, brand DNA, and development effort.
I soon realised that our role was not only to define and describe components behaviour. We had to help the different stakeholders in their decision process. We created visualisation tools to enable them weighing components against each other at a macro and micro-scale.
We had to steer away from a page template-based CMS, and try to transform it into a component-based tool. This approach required a lot of pedagogy, as the technical structure of the tool was not adapted for it. But we knew it would offer much more flexibility to the different brands in time.
For each component, we described its behaviour and expected flexibility. Then we mapped components within the different websites. This approach was iterative, to keep the amount of components and their overrides reasonable. This component library ended up being our main discussion tool. As both the development team and the brands Art directors could relate to it.
Image below: Building blocks – versions and behaviours.
Key takeaways
Despite their initial reluctance, the four brands finally adopted their new websites with pride. From a cost driven project, we ceased the opportunities to rethink the experience of the websites.
We made our way in a large and spread team, and achieved to build trust with our different partners. For me, this project was one of the most challenging ever, but also a turning point in my experience. Behind the design brief, there was a communication challenge to align the different stakeholders. A large part of our role consisted in building tools for a better collaboration, and I was proud to see our team succeed in this exercise.
Back to Top