Building a Global Unified Design System

PUMA is in the process of unifying its design and technology at a global level, aiming to solve for the occasional inconsistent and fragmented experience on the current websites, which run independently across 20 regions.

Grid of multiple colors of puma sneakers in a desktop layout and a product detail layout of a black sneaker in a mobile view with a white sneaker in the background.

A BRIEF OVERVIEW

Formidable is currently partnering with a small team from PUMA Global and created a Unified Design System to transition all independent regional websites into one e-commerce platform.

PUMA logo
ChromaticFigmaGraphQLNext.jsReactSanity CMSTwind
THE CHALLENGE

Leveling Up a Global Brand

Design partners at PUMA desire even higher levels of success across their content verticals. PUMA content across regional websites looks similar, but it’s not the same. Colors, fonts, and other small details that comprise the online experience vary from site to site. Design partners have to hunt down historical assets. There isn’t a central place where PUMA assets are stored and organized. Formidable and Puma partnered in finding a solution.

UI Inventory Audit — The project began with an audit of the existing site, noting all UI inconsistencies and points of friction in the user experience.

OUR APPROACH

Delivering a Unified Design System To Create Consistent Experiences

The project began with a large-scale UI inventory from the current PUMA website. Components were collected and documented, while missing components or states were noted. Formidable then built and documented the foundational styles/tokens used to compose all components, patterns, and layouts. These included typography, spacing, color and layout, and we aligned these to the Tailwind patterns that the Formidable development team used to build out the new e-commerce platform.

Laying An Inclusive Foundation

Inclusivity was a core requirement with accessibility and internationalization built in from the beginning. All components were implemented based on WAI-ARIA authoring practices — high-contrast colors, large interactive elements, keyboard navigation — and were manually tested with screen-readers and other assistive technologies.

Creating A Shared Language

The design system is a set of standards and guidelines built to create a shared language and visual consistency across products and teams.

All components were documented and once the libraries were published, they were sent to the wider organization of designers and developers, who then provided feedback and highlighted any missing components or gaps.

Design. Code. Documentation.

Alongside the component library in Figma and React, we have also built a custom documentation site, using the same technology as the e-commerce platform.

By providing comprehensive documentation, the design system enables the regional teams and external partners to utilize components and build with cohesion and efficiency.

THE IMPACT

Connecting Global Teams & Creating Dynamic Products at PUMA

Formidable's ongoing work will allow design partners to reduce duplicate work, as well as ensure that resulting work will be more consistent across the brand. The Unified Design System will also serve as a central resource for things like guidelines related to site accessibility. When design partners have access to these guidelines, they will be able to avoid accessibility challenges and any confusion related to how to make sites accessible to all users.

Soon after the first styles and a small number of primitive components were published to Figma, other design teams started using the library and saw an immediate improvement in efficiency and collaboration between disciplines. As the system has grown, we now see not just design and development using it, but the potential of UX, SEO, marketing, and regional content teams benefiting from our work. The unified system for design at PUMA will allow progress to be made at scale and we’re seeing work done on improving user experience, content writing, and improved accessibility on the site.

20

regional websites

The workflow getting ideas into design and into production is signficantly faster for the PUMA product team