McDonald’s
Global Design System
When I began working with McDonald's as Creative Director at Huge, the brand's digital presence was fragmented across platforms, markets, and devices. Despite being one of the world's most recognized brands, McDonald's lacked a cohesive digital design language that could scale across its massive global footprint. Leading the Experience Design teams, I pioneered McDonald's first comprehensive design system – a foundational framework that would unite the visual language, interaction patterns, and component architecture across all digital touchpoints. This system wasn't simply about visual consistency; it represented a fundamental shift in how McDonald's approached digital product development, enabling faster innovation, consistent customer experiences, and efficient collaboration between global teams.
60+
Created consistent experience across 60+ global markets.
135+
Created 135+ unique components for Kiosk systems.
3
Unified experience across mobile app, web, and kiosk platforms.
1
Created a single source-of-truth online library for all markets and vendors to access.
78%
Improved productivity for UX and design teams.
85+
Developed 85+ unique components for Global Mobile App.
Role
As Creative Director, I provided leadership in design systems architecture, component design, cross-platform implementation, and design governance while establishing international accessibility standards.
Task
I identified the need for McDonald's first comprehensive digital design system to unify experiences across web, mobile, and kiosk platforms.
Action
Leading the design strategy, I directed the audit of existing design elements, created McDonald's first-gen design system, developed 85+ unique components for the Global Mobile App and 135+ components for kiosk systems, and established brand libraries for color, typography, icons, and illustrations.
Result
The design system improved productivity for UX and design teams by 78%, created consistent experiences across 60+ global markets, unified experiences across mobile, web, and kiosk platforms, and accelerated time-to-market for new features.
McDonald’s Digital Brand Language
From Fragmentation to Foundation
As illustrated below, we inherited a fragmented design ecosystem with siloed style guides across mobile, kiosk, and web platforms. Each channel maintained separate documentation that had become increasingly contradictory, making it impossible to maintain consistency or efficiently update designs. This fragmentation created significant inefficiencies, with design teams recreating similar components for different platforms and markets struggling to maintain brand consistency.
Building a Unified System
Our solution was to create a foundational layer that would serve all product teams and experience design squads. Rather than continuing with platform-specific guidelines, we developed a centralized design system that housed the core elements, interactions, components, and page patterns. This architectural approach ensured that all digital products would draw from the same source of truth, maintaining consistency while allowing for platform-specific optimizations.
Strategic Vision for Scale
The vision for 2020 positioned the design system as the central hub connecting multiple stakeholders. By establishing universal experience standards created by Huge, we created clear pathways for influence between Marketing & Merchandising, global markets, and all digital touchpoints including mobile, kiosk, web, restaurant tech, and new channels. This vision transformed the design system from a mere documentation tool into a strategic asset that could facilitate cross-functional collaboration.
Governance Model for Sustainability
Perhaps most importantly, we developed a comprehensive governance model that would ensure the design system's longevity. This framework established clear roles and processes for global stakeholders, production teams, and design & development feedback. The model defined how assets would be maintained in the library, how suggestions or revisions would be approved, and how performance metrics would inform ongoing improvements. This governance structure was critical in transforming the design system from a one-time deliverable into a living ecosystem that could evolve alongside McDonald's digital ambitions.
Design System Documentation: Single Source of Truth
Beyond creating robust components and establishing governance, we recognized the critical need for comprehensive documentation that would serve teams across McDonald's global ecosystem. This documentation website became the definitive resource for McDonald's digital brand language - a living system housing everything from foundational brand principles to detailed component specifications. The site was structured to serve diverse audiences, from designers seeking guidance on visual language to developers requiring technical implementation details. Each component was meticulously documented with usage guidelines, variations, behavior specifications, and code examples to ensure consistent implementation across platforms. The following walkthrough demonstrates how we transformed abstract design principles into actionable guidance, creating a scalable system that empowered McDonald's global markets to maintain consistency while moving at the speed their business demanded.
McDonald’s Case Studies
(2017 — 2022)
-
Digital Transformation
Revolutionizing how millions experience the world's largest restaurant brand.
-
Mobile App Transformation
Reimagining mobile ordering through frictionless digital experiences.
-
MyMcDonald's Rewards
Building customer loyalty at unprecedented global scale.