Building an infrastructure that creates scalable cohesion between brand and product.
The Challenge
Puma's e-commerce websites for their different countries lacked consistency and are separate from one another. To address this, the goal was to unify them into one platform as each country currently has its own independent website.
Puma aims to achieve even higher levels of success across their brand. Although their content across regional websites appear similar, there are subtle differences in colours, fonts, and other details that impact the online experience. These inconsistencies create challenges for design partners who are responsible for maintaining a level of standard throughout the different countries.
The Approach
The Unified Design System (UDS) is a collection of reusable components, guidelines, and standards that help teams across Puma’s infrastructure to create consistent and cohesive digital experiences. Below are the priority users of the system.
Partner Design Agency
Creates unique designs to showcase Puma's new product range and collaborations, customising page layouts as needed.
They use the UDS and CMS to save the templates for others to use.
Regional Content Teams
Create and adapt content for local needs by localising copy from the global team.
They use the UDS and CMS to create mockups and previews.
Creative Directors
Shoot content for global and regional campaigns with a unique tone that relates to the specific product and market.
Ensure consistency in media assets by following guidelines and use templates when editing content.
UI Audit
A thorough review of Puma's websites was done, which provided valuable insights for decision-making. The audit helped us see Puma's design language, inconsistencies, potential UX enhancements, and scalability requirements. It all contributed to a comprehensive design system tailored to Puma's business goals and the preferences of their audience. For instance, one key finding in the audit was something as simple as inconsistent button designs.
Workflow Change
Puma is mainly broken down to 3 teams, the UX team (in house), UI team (design agency), and then the UDS team (us, Formidable). There are independent regional designers, but mostly as observers. The separate teams worked in silos without much transparency with each other.
One of the challenges in implementing the design system was that it required significant changes to the design process and workflow, which can be difficult to adapt to. To mitigate this, it was important for us to understand what the design teams were doing to see how the UDS team can position themselves to support the other teams.
Accessibility Focus
Accessibility is a critical aspect of Puma’s Unified Design System. It ensures that it meets diverse user needs and future-proofs the design system. By prioritising accessibility, Puma can create a website that is inclusive, usable, and welcoming to all users.
Documentation
The main users of the design system are designers, developers, content writers, and regional contributors. It was important to tailor the documentation to be comprehensive and easy to understand for these users, but also to consider none technical users.
The system includes design principles, components guidelines, visual language definition, pattern library, interaction descriptions, accessibility guidelines, code snippets and real-world examples.
The system includes design principles, components guidelines, visual language definition, pattern library, interaction descriptions, accessibility guidelines, code snippets and real-world examples.
The Result
The Unified Design System has been able to significantly increase efficiency, and improve collaboration between different teams. The system provides a single source of truth for all design-related elements, allowing teams across different regions to work together more effectively and avoid any inconsistencies in their work.
The design system's guidelines for accessibility ensure that all users, regardless of their abilities, can interact with Puma's digital products. As a result, the Unified Design System has helped Puma to improve the user experience of their website, optimise their content for different regions, and create a cohesive brand identity across all touch points.
