UI / UX Portfolio - McDonald's Redesign Case Study

https://medium.com/@tristtsw/mcdonalds-dining-experience-a-uxui-redesign-case-study-1ca57862c566

Overview of McDonald's McDonald’s is one of Singapore’s favourite and renowned fast-food chain. It has a wide range of menu items that customisations cater to all ages.

Design Thinking Framework Empathise

Define

For this case study, our team aims to rethink and enhance the dining experience of ordering at McDonald’s through the design thinking framework.

Ideation

Prototype

Test

Observation

Empathy mapping

How might we

User flow diagrams

Usability testing

Collect findings

to identify common

Lotus blossom

Low fidelity sketches

Validate and refine

through emotions

patterns and

brainstorm

Outlining scenarios

prototype

and thought process

themes Shaping our protopersona

High Fidelity

Empathise Observation Collect findings through emotions and thought process

Contextual Inquiries Key Observations

Take-away orders not being Diners are observed

collected and left

crowding around the

on the collection

self-ordering kiosks

counter

Contextual Inquiries Findings Crowd in the restaurant could not be assessed remotely.

5 out of 6 individuals prefer table service.

Customisation for multiple orders poses significant challenges.

Lack of variety in family meals option.

Unaware of food status.

Define Empathy mapping based on identifying common patterns and themes from observations Shaping our Proto Personas and Customer Journey Mapping

Proto Persona

Representation of the targeted user

Sarah

Susan

Customer Journey Mapping (CJM) Sarah Main Frustrations Prior Ordering Phase: At the restaurant, need to check for seat availability since usually will dine in alone. No visibility of human traffic in the restaurant.

During Order: Overwhelmed by the food varieties to choose from even when there is already a breakdown into different categories for the first level.

Customer Journey Mapping (CJM) Susan Main Frustrations Prior Ordering Phase: At the restaurant, need to check for seat availability to determine whether to dine in or take away as a family.

During Order: Need to remember and take note of any special requests orders for the children. Therefore, with customisations it slows down the ordering process.

Post-Ordering Phase: Currently, after making payment there is no way to keep track in terms of the food statuses. Constantly have to keep a lookout of the food.

Ideate Technique Used: HMW, Lotus Blossom and SCAMPER

What We Want To Resolve Quick order and Favourite order customisation

Time taken from ordering to receiving order

Post Ordering Experience

How might we…

How might we…

How might we…

allow users to check the availability

reduce the amount of time that

enhance the post-order

of tables and table numbers

users take to order their food?

experience?

without having to physically be at the restaurant?

Key Ideas From Lotus Blossom Technique

Key Ideas To Enhance Offline Experience To Resolve The Accessibility of Crowd Issue TV Screen outside and inside restaurant to show the crowd level Lights on tables to indicate available seats

Core Features For Prototype Quick Add Feature using Save Favourite Orders Features Real-time Order Updates with Progress bar within the app, indicating each step of the order fulfilment, also consider showing out of app at notification center.)

Minigame within app while waiting for food Able to reserve table remotely (10mins grace) GPS within 1km

Prototype User flow diagrams Low fidelity sketches Outlining scenarios High Fidelity

Userflow We mapped out 4 main user flows to map out the journey for each screen and the action users needed to go through

Offline Experience

Indicator lights to show the reservation status of tables

Offline Experience

TV Billboard near restaurant entrance to show table and seat availability

Offline Experience

TV Billboard near collection area to show table and seat availability

Userflow - Remote Table and Seat Reservation

Userflow - Customisation and Favourite of Orders

Userflow - Real Time Order Status via Lock Screen and In-App

Userflow - Mini-Game to Earn Loyalty Points while Waiting For Food

Figma Prototype:https://www.figma.com/proto/JrdzzpmdS04cXThNPeerim/Team-2-Mcdonalds---Design-Space?pageid=0%3A1&type=design&node-id=46-233&viewport=234%2C697%2C0.71&t=SlT66THSEmbogdCx-1&scaling=scaledown&starting-point-node-id=46%3A233&mode=design

Testing Usability Testing Validate and Refining Prototype

Usability Testing With 5 users

Positive feedback from our users centered around straightforward UI, convenience, efficiency, and flexibility. All of these were what we wanted to achieve for our users. Some key highlights our user mentioned were: Users like the photos of restaurants being shown so can recognise the place immediately.

The app user interface was refreshing and very easy to see all the information.

Users like the feature of reserving tables while on the go as it saves time. Moreover, able to check the restaurant crowd before going down.

Wanted to play a mini-game while waiting for food.

Instant validation of restaurant location after scanning table QR code to save the trouble of finding a restaurant.

Customisation and favourite of orders feature are good as do not need to re-choose standard order every time.

Affinity Approach Findings Photos affiliation with the physical store helped users to identify restaurant easily User-friendly interface with accessible information Table reserving feature captured users needs Mini-game helped pass customers time while waiting for their food to be ready Instant validation upon scanning table QR to detect current restaurant location Customisation saving helped users process order quicker

To be Improved Table Reservation Flow - Users want to secure their seats before they order Text Readability - Visual hierarchy needs to be improved as all texts are the same size and weight.

Navigation Flow and Words Definition - Users were confused with table service and reserve table differences.

Finding McDonald’s Restaurant Location - The McDonalds icon does not show the location name unless clicked on

Conclusion With our prototype, McDonald's users are now able to reserve a table when they're on the way to the restaurant. The time taken from ordering food to receiving would greatly improve as customers are now able to order in advance. Customers are now able to track their food status on the McDonalds app and have a mini-game to keep them busy while waiting.