McDonald’s Global Digital Design System

McDonald's Global
Digital Design System

The global digital design system is a single coherent, unified system that stretches across products, platforms, and services—in the service of the customers’ experience. Coherence is built through the design of “structures” and “patterns” uniting the experience through design execution, the transfer of information, and the ability to pass seamlessly across channels. While emotionally connecting to our food, our restaurants, and ultimately our brand.

This coherence will also enable the business to move rapidly and deliberately as we launch, learn, and iterate our digital products at scale.

The global digital design system is a single coherent, unified system that stretches across products, platforms, and services—in the service of the customers’ experience. Coherence is built through the design of “structures” and “patterns” uniting the experience through design execution, the transfer of information, and the ability to pass seamlessly across channels. While emotionally connecting to our food, our restaurants, and ultimately our brand.

This coherence will also enable the business to move rapidly and deliberately as we launch, learn, and iterate our digital products at scale.

Our Vision

Convenience & Fun

Our global digital design system takes cues from our iconic McDonald’s brand. We’ve created a system that’s at once familiar and flexible across all digital touchpoints and rooted in the digital brand vision of “Everyday Convenience and Everyday Fun.”

Convenience = Utility
Brought to life through a unified and universal design system
that’s clean, calm, and smart.

Fun = Engagement
Brought to life through iconic and innovative design that’s
warm, fun, and expressive.

Convenience = Utility
Brought to life through a unified and universal design system that’s clean, calm, and smart.

Fun = Engagement
Brought to life through iconic and innovative design that’s warm, fun, and expressive.

Six Experience Principles

We began by assessing McDonald’s global business objectives while accounting for local markets. We defined a strategic design framework that’s flexible enough to accommodate cultural nuances for every unique market, all in the service of delivering a best-in-class experience regardless of location, demographics, or touchpoint. This framework manifests in experience principles that guide our design vision.

Six Experience Principles

We began by assessing McDonald’s global business objectives while accounting for local markets. We defined a strategic design framework that’s flexible enough to accommodate cultural nuances for every unique market, all in the service of delivering a best-in-class experience regardless of location, demographics, or touchpoint. This framework manifests in experience principles that guide our design vision.

Brand Concept

Modern McDonald's

Modern McDonald’s builds off the cleanliness and simplification established in the interim app. This concept goes further with bold, crisp typography, sleek, polished graphic elements, and a lively, vibrant accent palette. Exaggerated scaling and cropping give the McDonald’s menu items a dramatic presence on screen. These elements combined promote McDonald’s as a confident and knowledgeable leader in the quick food service industry.

For years, the brand suffered from a fragmented design language across and within markets, digital touch points, and brand expressions.

We developed a Global Digital Design System for the express purpose of ensuring consistency and high fidelity (experientially, visually, tonally, interactively) across all of the touch points. Rather than a static collection of standards, the Global Digital Design System is as much a part of the process of building software as it is designing customer-facing UI.

Global Digital Design System

For years, the brand suffered from a fragmented design language across and within markets, digital touch points, and brand expressions.

We developed a Global Digital Design System for the express purpose of ensuring consistency and high fidelity (experientially, visually, tonally, interactively) across all of the touch points. Rather than a static collection of standards, the Global Digital Design System is as much a part of the process of building software as it is designing customer-facing UI.

Our Design System helps

Our Design System helps:

- Information Overload

- Increased Customer Trust

- Customer Omni Channel Expectations

- Business Efficiency

- Information Overload

- Increased Customer Trust

- Customer Omni-Channel Expectations

- Business Efficiency

Color

Use of Color

Our design system tactfully uses bright accent colors to draw attention, signifying action and complementing core brand assets.

Typography

Arch Sans: Bridging the Brand

For an iconic brand there was a complete lack of consistency in the fonts used across legacy digital channels in all markets. We commissioned a global font that covers Arabic, Latin, Cyrillic, and Greek.

This font communicates personality, unifies the brand through a cohesive expression, and works hard in a large variety of contexts across: legibility, readability, performance, language, aesthetic.

Typography

Arch Sans: Bridging
the Brand

For an iconic brand there was a complete lack of consistency in the fonts used across legacy digital channels in all markets. We commissioned a global font that covers Arabic, Latin, Cyrillic, and Greek.

This font communicates personality, unifies the brand through a cohesive expression, and works hard in a large variety of contexts across: legibility, readability, performance, language, aesthetic.

Iconography

Expressing the Brand

We developed an icon set that serves as a common vernacular, bridging gaps in language, communication, and comprehension. They highlight navigation, tasks, and notifications. They appear when something needs attention, to celebrate moments, and generally to add visual richness.

Iconography

Expressing the Brand

We developed an icon set that serve as a
common vernacular, bridging gaps in language, communication, and comprehension. They highlight navigation, tasks, and notifications. They appear when something needs attention,
to celebrate moments, and generally to add
visual richness.

System UI Kit

Components & Patterns

When the functional needs of communication require detail, we provide focus, and bundle information into concise, digestible units. Establish a clear hierarchy, that supports the comprehension of the information at hand. We pay close attention to copy and make use typographic placement and scale. We reward expectation and build familiarity by repeating established units as patterns within a layout.

System UI Kit

Components & Patterns

When the functional needs of communication require detail, we provide focus, and bundle information into concise, digestible units. Establish a clear hierarchy, that supports the comprehension of the information at hand. We pay close attention to copy and make use typographic placement and scale. We reward expectation and build familiarity by repeating established units as patterns within a layout.

Systematic Design

Elevating the Brand

The system guides how interactions occur, underpinned by all elements, components, templates, and pages, which together, make up the experience. In terms of implementation, they allow us to work nimbly and intelligently across design sprints. While form factors and mediums invariably vary, our design system flexes to adapt across customer needs, technologies, and services.

Systematic Design

Elevating the Brand

The system guides how interactions occur, underpinned by all elements, components, templates, and pages, which together, make up the experience. In terms of implementation, they allow us to work nimbly and intelligently across design sprints. While form factors and mediums invariably vary, our design system flexes to adapt across customer needs, technologies, and services.

Online Toolkit

Scaling the System

The McDonald’s Global Digital Toolkit is the source of truth for design application, interaction patterns, visual language, voice and tone. It’s the resource for McDonald’s leadership, associated stakeholders, local markets, product owners, designers, and developers.

Online Toolkit

Scaling the System

The McDonald’s Global Digital Toolkit is the source of truth for design applications, interaction patterns, visual language, voice, and tone. It’s the resource for McDonald’s leadership, associated stakeholders, local markets, product owners, designers, and developers.