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.

1170x560_TRNSPRNT

Our Vision

Convenience & Fun

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.”

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.”

MCD-CONV-FUN-DIAGRAM

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.

MCD-EXP-PRINCIPLE-01-8
MCD-EXP-PRINCIPLE-02-8
MCD-EXP-PRINCIPLE-03-8
MCD-EXP-PRINCIPLE-04-8
MCD-EXP-PRINCIPLE-05-8
MCD-EXP-PRINCIPLE-06-8

Brand Concept

Modern McDonald's

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.

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.

D1-Modern-McDonalds-Stage3-CS6-Aa

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.

McD_OC_Comp_Consistentcy_1

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

McD_GMA5_MVP-3
McD_GMA5_MVP-2
Color

Use of Color

Use of Color

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

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

MCD-DIGITAL-COLOR-PALETTE
MCD-DIGITAL-COLOR-PALETTE-2

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.

McD_Type_Arch_Sans-1
McD_Type_Arch_Sans-2
McD_Type_Arch_Sans-3
McD_Type_Arch_Sans-4

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.

Arch_Loader-18849
McD_System_IconSets-1
Frybox_Loader-18851

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.

MCD_UI_Kit
GMA5_MVP_2-MENU
GMA5_MVP_HOME-DEALS
06_food_browsing_modules
Pasted image at 2016_04_15 03_06 PM-1

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.

MCD-STYLE-GUIDE-SUPER-01-8
McD_PDP_OMNICHANNEL_SCRNS_1

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.

McD_Global_Digital_Toolkit_Browser-2
McD_Global_Digital_Toolkit_Laptop_1c
McD_Global_Digital_Toolkit_Laptop_2c

Featured Projects

2024 Design Portfolio ReelMotion, Animation, Brand & Visual Design

MerativeBrand Identity, Visual System, Website, Launch Campaign

IBM Cloud for Financial ServicesB2B Campaign, Illustration, Icons

McDonald's Digital Omni-Channel ExperienceUX Design, Mobile App, Digital Prototyping

Modern FlowerBrand Identity, Packaging

Canary WebsiteE-commerce Site

2019 IBM Annual ReportPrint, Layout, Editorial, Website

Yahoo! RebrandBrand Identity, Launch Campaign

Burton Snowboards Clash ModelTypography, Illustration

MSG Empire Open - Air In The SquareIdentity, Naming, Branding

Aurange 3D TypeIllustration, Logo, Typography

Not Here // Still There Album ReleaseMusic Composition, Photography, Packaging

Burton Snowboards Whammy BarIllustration, Typography

Deep River SnacksPackaging, Identity

Shaklee 180 ProgramIdentity, Branding & Packaging

Bath & Body Smart WorksPackaging, Identity

Bayer AspirinPackaging, Branding, OOH