PROJECT

McDonald's Design System

McDonald's
Design System

McDonald's
Design System

Year

2021 - 25

Client

McDonald's AU + NZ

MY ROLE

UI DS DESIGN LEAD
OVERVIEW
OVERVIEW
OVERVIEW

I help led the visual design UI and collaborating in close alignment with the user experience for both the 2020 and newly refreshed 2025 McDonald’s Design System 2.0 used across Australia and New Zealand, which is also being adapted in multiple countries around the world. Our goal was to build a scalable framework that enhances customer experience across digital kiosk screens desktop platforms and mobile applications.

LET'S LOOK AT DS Version 1.0
LET'S LOOK AT
DS Version 1.0
INTRODUCTION
INTRODUCTION
INTRODUCTION

Our goal for DS 1.0 at Macca’s was to build a scalable design system for both landscape and portrait menu boards while enhancing craveability and reducing product overload. The system needed to support multiple campaigns and display a wide range of menu items without overwhelming the customer.

01

Research and Collaboration

My role for DS 1.0 was the development of the overarching visual design framework, animation design, and structure the Design System. This involved conducting in-depth competitive research across key restaurant brands, many of which lacked a cohesive design system and relied heavily on static or printed visuals. We had weekly scrums with the digital McDonald's leads detailing our progress, having affitnity board sessions, check in's with the Macca's data analytic team and analysing their findings (such as restaurant sales, restaurant and drive thur eye tracking) by having online and inhouse workshops, all happening all in a short timeframe. From this I collaborated with the team to deliver stand-up presentations to Macca's showcasing our iterative progress and strategic insights.

02

Design Challenges

The challenge was to create something visually fresh and easy for the customer to digest (literally) and to build a solid IA especially when there is a great amount of content to unpack. For instance, not all stores have the same digital board configuration; some with 6 screens, 4 screens, 3 screens, displayed either in portrait or landscape. Furthermore each store had different hardware specifications to work with, which means we'd have to work on the lowest worst case scenario and do some lateral thinking on how we would achieve certain design challenges - i.e: heavy use of animation could slow or freeze screens. It was fundamental to fully understand the OS platform and hardware limitations we were working on as well as observing any given analytical data such as eye tracking from the client and third party groups on how they could play a part in how we could enhance the overall dining user experience.

03

Customer-centric approach

Whilst we take a customer-centric approach to design, we know that all our decisions need to ladder up to key business objectives. So we’ve determined some of the Key Customer Behaviours that we need to influence in order to reach our objectives.

01

Research and Collaboration

My role for DS 1.0 was the development of the overarching visual design framework, animation design, and structure the Design System. This involved conducting in-depth competitive research across key restaurant brands, many of which lacked a cohesive design system and relied heavily on static or printed visuals. We had weekly scrums with the digital McDonald's leads detailing our progress, having affitnity board sessions, check in's with the Macca's data analytic team and analysing their findings (such as restaurant sales, restaurant and drive thur eye tracking) by having online and inhouse workshops, all happening all in a short timeframe. From this I collaborated with the team to deliver stand-up presentations to Macca's showcasing our iterative progress and strategic insights.

02

Design Challenges

The challenge was to create something visually fresh and easy for the customer to digest (literally) and to build a solid IA especially when there is a great amount of content to unpack. For instance, not all stores have the same digital board configuration; some with 6 screens, 4 screens, 3 screens, displayed either in portrait or landscape. Furthermore each store had different hardware specifications to work with, which means we'd have to work on the lowest worst case scenario and do some lateral thinking on how we would achieve certain design challenges - i.e: heavy use of animation could slow or freeze screens. It was fundamental to fully understand the OS platform and hardware limitations we were working on as well as observing any given analytical data such as eye tracking from the client and third party groups on how they could play a part in how we could enhance the overall dining user experience.

03

Customer-centric approach

Whilst we take a customer-centric approach to design, we know that all our decisions need to ladder up to key business objectives. So we’ve determined some of the Key Customer Behaviours that we need to influence in order to reach our objectives.

01

Research and Collaboration

My role for DS 1.0 was the development of the overarching visual design framework, animation design, and structure the Design System. This involved conducting in-depth competitive research across key restaurant brands, many of which lacked a cohesive design system and relied heavily on static or printed visuals. We had weekly scrums with the digital McDonald's leads detailing our progress, having affitnity board sessions, check in's with the Macca's data analytic team and analysing their findings (such as restaurant sales, restaurant and drive thur eye tracking) by having online and inhouse workshops, all happening all in a short timeframe. From this I collaborated with the team to deliver stand-up presentations to Macca's showcasing our iterative progress and strategic insights.

02

Design Challenges

The challenge was to create something visually fresh and easy for the customer to digest (literally) and to build a solid IA especially when there is a great amount of content to unpack. For instance, not all stores have the same digital board configuration; some with 6 screens, 4 screens, 3 screens, displayed either in portrait or landscape. Furthermore each store had different hardware specifications to work with, which means we'd have to work on the lowest worst case scenario and do some lateral thinking on how we would achieve certain design challenges - i.e: heavy use of animation could slow or freeze screens. It was fundamental to fully understand the OS platform and hardware limitations we were working on as well as observing any given analytical data such as eye tracking from the client and third party groups on how they could play a part in how we could enhance the overall dining user experience.

03

Customer-centric approach

Whilst we take a customer-centric approach to design, we know that all our decisions need to ladder up to key business objectives. So we’ve determined some of the Key Customer Behaviours that we need to influence in order to reach our objectives.

DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS

The above slide showcases a simplified version of how Design System 1.0 was structured. The previous McDonald's (2020) menu boards were designed visually in Photoshop, a method that while effective for design, introduced significant challenges during developer implementation and design handover. To address these inefficiencies we transitioned the core component system to Figma. This shift has since become our standard (and pretty much nowadays the industry standard), enabling seamless collaboration across design and development teams while also providing a dynamic platform for presenting prototypes and concepts to clients and stakeholders.


I collaborated closely with the Design Director and the McDonald’s Digital Team Lead to helped shape a scalable system designed for implementation across restaurants, food courts, and drive-thru.

01

Our workflow

Built during the global pandemic DS 1.0 relied heavily on Figma as our primary UX and UI tool replacing older workflows based on Photoshop and Sketch. This shift allowed our small team to collaborate efficiently with McDonald’s leads and deliver a scalable system that was accessible for development handover and future iterations, collaboratively and remotely online. While working agile, we started on design sprints that was happening remotely. We created these sessions on miro and showcased our design process collaboratively and transparently via figma.

02

The UX + UI

Following extensive research and trend analysis I proposed a rotating carousel concept for menu items timed in sync across display boards. This allowed multiple products to be visible while maintaining clear visual hierarchy and reducing the boards of any cognitive load. The screens were designed to adapt responsively across landscape portrait in-store message boards drive thru displays and shoppable formats with configurations tailored to each venue.

03

Design Direction & System Development

My role was to lead the overall design direction + the animation design while managing and maintaining the DS component library ensuring as well documented figma component library consisting in guidelines, assets, design constraints and best practices. Menu boards were built with day-parting functionality allowing seamless transitions from morning to night. Throughout the agile process we conducted thorough A/B testing and gathered insights during phase one of DS 1.0 which informed the next stage of development and refinement.

01

Our workflow

Built during the global pandemic DS 1.0 relied heavily on Figma as our primary UX and UI tool replacing older workflows based on Photoshop and Sketch. This shift allowed our small team to collaborate efficiently with McDonald’s leads and deliver a scalable system that was accessible for development handover and future iterations, collaboratively and remotely online. While working agile, we started on design sprints that was happening remotely. We created these sessions on miro and showcased our design process collaboratively and transparently via figma.

02

The UX + UI

Following extensive research and trend analysis I proposed a rotating carousel concept for menu items timed in sync across display boards. This allowed multiple products to be visible while maintaining clear visual hierarchy and reducing the boards of any cognitive load. The screens were designed to adapt responsively across landscape portrait in-store message boards drive thru displays and shoppable formats with configurations tailored to each venue.

03

Design Direction & System Development

My role was to lead the overall design direction + the animation design while managing and maintaining the DS component library ensuring as well documented figma component library consisting in guidelines, assets, design constraints and best practices. Menu boards were built with day-parting functionality allowing seamless transitions from morning to night. Throughout the agile process we conducted thorough A/B testing and gathered insights during phase one of DS 1.0 which informed the next stage of development and refinement.

01

Our workflow

Built during the global pandemic DS 1.0 relied heavily on Figma as our primary UX and UI tool replacing older workflows based on Photoshop and Sketch. This shift allowed our small team to collaborate efficiently with McDonald’s leads and deliver a scalable system that was accessible for development handover and future iterations, collaboratively and remotely online. While working agile, we started on design sprints that was happening remotely. We created these sessions on miro and showcased our design process collaboratively and transparently via figma.

02

The UX + UI

Following extensive research and trend analysis I proposed a rotating carousel concept for menu items timed in sync across display boards. This allowed multiple products to be visible while maintaining clear visual hierarchy and reducing the boards of any cognitive load. The screens were designed to adapt responsively across landscape portrait in-store message boards drive thru displays and shoppable formats with configurations tailored to each venue.

03

Design Direction & System Development

My role was to lead the overall design direction + the animation design while managing and maintaining the DS component library ensuring as well documented figma component library consisting in guidelines, assets, design constraints and best practices. Menu boards were built with day-parting functionality allowing seamless transitions from morning to night. Throughout the agile process we conducted thorough A/B testing and gathered insights during phase one of DS 1.0 which informed the next stage of development and refinement.

⬆ My direction was to visually hero each main product on each screen while it's rotates via the bottom carousel. Each section is strategically categorised to aid the customer through the use of signposting with the main menu item shown prominently when highlighted.

⬆ This is an early example of a prototype of DS.10 that I created the menu boards for internal and client presentations. This animated design approach help guide and strongly sell our concept and delivers a visual interactive template for the developers to implement on their staging platform.

MOVING ON TO DESIGN SYSTEM 2.0
MOVING ON TO
DESIGN SYSTEM 2.0
DESIGN PROCESS
DESIGN PROCESS
DESIGN PROCESS

DS 1.0 set a strong benchmark for menu board systems in the space. By mid 2024 the challenge was to evolve that foundation into something familiar yet more robust. With updated technology we gained flexibility to push the design further and deliver a more refined experience.

01

Landscape analysis

During DS 1.0 we continue to have weekly scrums based on a 'test and learn' approach collaborating closely with the McDonald's data and analytics team to uncover key insights. Each session involved running targeted experiments, CX findings, and evaluating their performance to inform strategic decisions. Knowing with what we've already learnt from the previous DS, I took initiative to conduct field research across other competitive restaurants and foodcourts gathering competitive analysis, compiling design trends and to observed what has progressed. I had the opportunity to also explore international locations including the U.S Canada and South Korea. This helped shape a broader understanding of global menu design trends and user expectations.

02

UX/ UI Evolving the Design to Bento

After our current state assessment of DS1.0, we thought it was important to outline our ambitions for DS2.0, and determine the key components that would signify a leap forward and a step change for our DMB Merchandising Strategy. To evolve DS 1.0 I introduced a bento build approach allowing each screen to become compartmentalised for greater flexibility in layout and design. One of the key challenges in DS 1.0 some of it's rigid design such as the dominance of H1 text which occupied nearly forty percent of screen space. While effective in some cases it also became restrictive. The bento solution allowed most content to expand or retract dynamically depending on the screen context.

03

Visual Hierarchy

I shifted the burger imagery from mid-angle shots to low front views giving each product a stronger heroric spotlight and enhancing a fundamental McDonald's objective: food craveability. Additional visual changes that were made was to showcase beverages and desserts in branded glass containers to appear delicatable

04

Building Design System 2.0

/

01

Landscape analysis

During DS 1.0 we continue to have weekly scrums based on a 'test and learn' approach collaborating closely with the McDonald's data and analytics team to uncover key insights. Each session involved running targeted experiments, CX findings, and evaluating their performance to inform strategic decisions. Knowing with what we've already learnt from the previous DS, I took initiative to conduct field research across other competitive restaurants and foodcourts gathering competitive analysis, compiling design trends and to observed what has progressed. I had the opportunity to also explore international locations including the U.S Canada and South Korea. This helped shape a broader understanding of global menu design trends and user expectations.

02

UX/ UI Evolving the Design to Bento

After our current state assessment of DS1.0, we thought it was important to outline our ambitions for DS2.0, and determine the key components that would signify a leap forward and a step change for our DMB Merchandising Strategy. To evolve DS 1.0 I introduced a bento build approach allowing each screen to become compartmentalised for greater flexibility in layout and design. One of the key challenges in DS 1.0 some of it's rigid design such as the dominance of H1 text which occupied nearly forty percent of screen space. While effective in some cases it also became restrictive. The bento solution allowed most content to expand or retract dynamically depending on the screen context.

03

Visual Hierarchy

I shifted the burger imagery from mid-angle shots to low front views giving each product a stronger heroric spotlight and enhancing a fundamental McDonald's objective: food craveability. Additional visual changes that were made was to showcase beverages and desserts in branded glass containers to appear delicatable

04

Building Design System 2.0

/

01

Landscape analysis

During DS 1.0 we continue to have weekly scrums based on a 'test and learn' approach collaborating closely with the McDonald's data and analytics team to uncover key insights. Each session involved running targeted experiments, CX findings, and evaluating their performance to inform strategic decisions. Knowing with what we've already learnt from the previous DS, I took initiative to conduct field research across other competitive restaurants and foodcourts gathering competitive analysis, compiling design trends and to observed what has progressed. I had the opportunity to also explore international locations including the U.S Canada and South Korea. This helped shape a broader understanding of global menu design trends and user expectations.

02

UX/ UI Evolving the Design to Bento

After our current state assessment of DS1.0, we thought it was important to outline our ambitions for DS2.0, and determine the key components that would signify a leap forward and a step change for our DMB Merchandising Strategy. To evolve DS 1.0 I introduced a bento build approach allowing each screen to become compartmentalised for greater flexibility in layout and design. One of the key challenges in DS 1.0 some of it's rigid design such as the dominance of H1 text which occupied nearly forty percent of screen space. While effective in some cases it also became restrictive. The bento solution allowed most content to expand or retract dynamically depending on the screen context.

03

Visual Hierarchy

I shifted the burger imagery from mid-angle shots to low front views giving each product a stronger heroric spotlight and enhancing a fundamental McDonald's objective: food craveability. Additional visual changes that were made was to showcase beverages and desserts in branded glass containers to appear delicatable

04

Building Design System 2.0

/

TLDR . WATCH IT IN ACTION
OVERALL
OVERALL
OVERALL

The results far exceeded the McDonald's and our expectation, being live and developed within 2+ months; the structure has elevated the menu board game with KFC pushing a fierce competition to drive profit and sales for each restaurant. DS 2.0 is also being used in New Zealand stores and the structure has started to evolve in other countries. If you're feeling peckish, check out your local Macca's and peruse at the love I crafted while having a happy meal.

more work

more work

Tribeca Games

Monopoly at Macca's

Let's connect

Thanks for stopping by and exploring my work. Feel free to reach out if something sparks your interest!

✉️ GET IN TOUCH

📞 GIVE A BUZZ

Let's connect

Thanks for stopping by and exploring my work. Feel free to reach out if something sparks your interest!

✉️ GET IN TOUCH

📞 GIVE A BUZZ

Let's connect

Thanks for stopping by and exploring my work. Feel free to reach out if something sparks your interest!

✉️ GET IN TOUCH

📞 GIVE A BUZZ

Let's connect

Thanks for stopping by and exploring my work. Feel free to reach out if something sparks your interest!

✉️ GET IN TOUCH

📞 GIVE A BUZZ

AVAILABLE FOR CONTRACT WORK & COLLABS
AVAILABLE FOR CONTRACT WORK & COLLABS
AVAILABLE FOR CONTRACT WORK & COLLABS
AVAILABLE FOR CONTRACT WORK & COLLABS