Building a Global Unified Design System
By orchestrating a global design system, we replaced a "patchwork" of different platforms with a single, high-speed engine.
Building a Global Unified Design System
One platform. One brand. Faster, more consistent experiences for PUMA customers and the teams that serve them.
The Challenge: A Fragmented Reality
In early 2021, I joined PUMA as one of the first digital product design hires. At the time, we relied heavily on external partners for digital experiences, which contributed to a disjointed ecosystem.
An audit of our global digital presence revealed a clear problem: customers in Argentina, the EU, the US, and Japan were interacting with completely different versions of the brand.
- Visual Drift: Colors and typefaces varied significantly across regions.
- Platform Silos: Interfaces were built across a patchwork of platforms, including Magento, Salesforce Commerce Cloud, and an emerging headless platform known as "Cybercat".
- Strategic Risk: This fragmentation wasn't just a design issue; it was diluting a world-class brand and creating hidden costs through duplicated efforts and slow releases.
The Shift: From Territorial to Strategic
The fragmentation ran deeper than the UI; Marketing and Direct-to-Consumer (DTC) teams lacked a unified strategy, often operating via "content packs" rather than collaboration. Brand storytelling was missing from the commerce experience, making the DTC channel feel purely transactional.
The establishment of a Global CX team marked a turning point. We shifted from regional expansion toward a data-driven, customer-first approach. Our goal was to make PUMA’s digital presence the true "home of the brand".
This required building the PUMA Unified Design System (UDS)—not just a UI kit, but a strategic foundation to reduce waste and accelerate delivery.
The Solution: What We Built
We began with a comprehensive UI inventory of the existing website, cataloging every component and documenting every gap.
- Foundational Tokens: We established design tokens for typography, spacing, color, and layout.
- Dev-Design Alignment: These tokens were aligned to Tailwind patterns used by our development team, eliminating the back-and-forth that typically inflates cycle times.
- Inclusive by Design: Accessibility and internationalization were built in from day one. Components followed WAI-ARIA practices, featuring high-contrast colors and keyboard navigation, and were manually tested with assistive technologies.
A Living Ecosystem
A design system only works if it is adopted. We distributed Figma and access to the React component library to the wider organization and established a feedback loop to capture edge cases and missing components.
- Figma Library
- A comprehensive component library for designers.
- React Library
- Consumed as a dependency in the tech stack for production.
- Documentation Site
- A custom site powered by Sanity CMS to guide regional teams and partners.
The Impact
The results were immediate. Shortly after the first primitives were published, teams reported increased efficiency and collaboration.
- Faster Workflows: Cycle times dropped, and the workflow from idea to production became significantly faster across 20 regional websites.
- Global Adoption: What started as a small library grew into a system used by UX, SEO, Marketing, and regional content teams globally.
- Strategic Value: By reducing rework and fixing inconsistencies, we redirected time and budget toward initiatives that actually move the brand forward.
Today, PUMA has a single source of truth that scales, evolves, and keeps every region building in the same direction.