H&M group - Fabric Design system
Overview
In September 2021 I had the pleasure of joining the H&M Group as Senior Product Designer to co-found the Design System Team (known as ‘Fabric’ Design System, or ‘FDS’) with two other Product Designers (now 15 Designers, Engineers and Product Owner), a system that would support six brands; H&M, ARKET, & Other Stories, Weekday, Monki, and COS. The goals we achieved by bringing a Design System to a large multi-brand organisation like H&M Group were:
Consistency: Our design system ensured consistency in design across all digital and physical products. This meant that everything from the logo and typography to the colours and graphics are consistent, which improved brand recognition and significantly reduced design and engineering debt.
Efficiency: Streamlining the design process, saving time and money in the long run by providing designers with components, documentation, and assets that are easy to use. They can quickly refer to a centralised location to look-up the design standards and see what has been done before.
Scalability: The ability to easily scale to new products or services. When a new team is created for a project (or even a new brand brought into the H&M Group), it can simply follow the same design guidelines to make sure the design language and front-end development stays consistent and up to date.
Collaboration: To promote collaboration between design teams, engineers and other departments, ensuring that everyone is on the same page and working towards the same goals. This fostered greater communication across different departments and lead to innovative results.
Brand identity: Reinforced all our companies brand identities by defining their visual language, culture, and values, thereby creating a strong brand image. It allowed our companies to present a unified and cohesive brand message to customers.
User Experience: Helped improve user experience by putting the user at the centre of the design process. Ensuring that users could navigate easily both across different devices and products, resulting in better user satisfaction and retention.
As a Senior Product Designer for the H&M Group, my primary responsibility was to build a comprehensive design system that would enhance the various brand's overall visual identity while ensuring consistency across all digital products, such as websites, mobile apps, and advertising campaigns. To achieve this goal, I adopted a holistic approach encompassing tokenised design, documentation, information architecture, collaboration and alignment with front-end development and component creation.
At the outset, I initiated the project by conducting extensive research and analysis to understand H&M Group's brand architecture, target customers, and their preferences. Based on the insights, I created a comprehensive design language that would help communicate the brand's values and persona in a consistent, coherent manner across all digital assets.
Information Architecture
Information architecture was another crucial component of the design system. I analysed data from user behaviour and conducted extensive user testing to ensure that the information architecture was intuitive, easily navigable, and aligned with our consumers' needs. This helped us build a structure of components and libraries that were intuitive and easy to navigate, while allowing the implementer to execute complicated tasks.
Tokenised DESIGN
One key aspect of the design system was tokenised design. By using tokens, we ensured that all design elements, such as colours, typography, spacing, and iconography, were standardised and could be easily applied to any digital product within the organisation - regardless of whether it was for the bold and clean H&M or the bright and colourful Monki. This not only sped up the design process but also ensured that the product designers and engineers could work collaboratively without being constrained by inconsistencies and design debt.
COMPONENTS AND DOCUMENTATION
Component creation and front-end development were the cornerstones of the design system. I created a system of modular components that could be used to build any digital product across the organisation, streamlining the development process and making it more efficient. By aligning with front-end developers, we ensured that the components were optimised for performance and could be easily integrated into the organisation's existing tech stack. They were also made into every required state and variant using robust auto-layout construction, for both LTR and RTL markets.
For every component built (as well as every foundational element and process), supporting documentation was written. A playbook for stakeholders and implementers to easily integrate whichever part of the design system they required into their workflow. Typically the documentation would include best practices, component anatomy, construction, links to Figma and FE environments, relevant links to supporting components, and so on.
Connectivity and the community
Building a design system with all its foundational elements, tokens, components and documentation is only a small fraction of the work to be done in integrating it into a large conglomerate. Working with stakeholders such as Product Designers, Brand Art Directors, Engineers and Product Owners in hackathons, workshops and one-on-one tutorial sessions were a frequent facet of my role at H&M Group. These sessions could vary from making sure designers were using the correct colour tokens in an accordion, to confirming they were using the correct breakpoint variant of a FDS built carousel.
My hands on approach to working with those implementing FDS into their work also meant I could champion accessibility and be sure that our output met WCAG standards as much as possible.
Overall, my work on building a design system for the H&M group was an exciting and rewarding project. By adopting a holistic approach that encompassed tokenised design, information architecture, collaboration, and alignment with front-end development and component creation, we created a design system that is both scalable and versatile, which will help the organisation maintain its brand identity and stay ahead of the competition in the years to come.