Building a Global Unified Design System

Delivering a uniform design and technology platform for commercial regions across the globe.

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
Chromatic
Figma
GraphQL
Next.js
React
Sanity CMS
Tailwind
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.

Leveling Up a Global Brand
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.

Delivering a Unified Design System To Create Consistent Experiences
Laying an Inclusive Foundation

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.

Creating a Shared Language
Design. Code. Documentation.

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

The ImpactConnecting 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 significantly faster for the PUMA product team