McDonald's App – Heuristics Evaluation and UI Redesign

TARGET APPLICATION

McDonald's Canada App for iOS - Ver. 6.0.2

PRINCIPLES USED

'10 Heuristics for User Interface Design' & 'Severity Ratings for Usability Problems' by Jakob Nielsen.

TOOLS

Sketch, InVision, Photoshop, G-Suite

TIMELINE

1 Week

PROJECT OVERVIEW

This is a project that I analyzed and evaluated McDonald's app using Jakob Nielsen's '10 Heuristics for User Interface Design' in order to find ways to improve its UI for the better user experience to learn and practice the importance of UI design.

mcdonalds-iphone-image-1

Fast-food & The World of Mobile Order 

INTRODUCTION

The value of fast-food relies on speed and convenience as its name suggests. However, as more and more people consume fast-food items, there are times when you have to line-up at peak times such as lunchtime, and sometimes you feel like you are wasting time not only for the order line-up but also while waiting for your food to be prepared. Complementing this is a mobile ordering service application.

This is an era in which people no longer have to line up to order from restaurants or cafes. Smart ordering services are appearing one after another, which allows users to order and pay with just a few clicks on their way to a restaurant.

After the Covid-19 outbreak, more people use it not just to reduce the waiting time, but for social distancing and safety as well.

THE CONTEXT

Being aware of this trend, my teammate and I decided to analyze and evaluate McDonald's app — one of the most popular mobile food ordering app — using Jakob Nielsen's '10 Heuristics for User Interface Design' in order to find ways to improve its UI for the better user experience.

Due to time constraints for this project, we decided to focus on 1 user flow from the app: placing an order using the deals from the ‘Offers’ menu.

10 Heuristics for UI Design & Severity Ratings

IDENTIFYING HEURISTICS

We started by analyzing the problems and possible areas of improvement. We've identified several heuristics problems that are identified on Jakob Nielsen's principle such as:

Visibility of system status: The system should always keep users informed about what is going on, through appropriate feedback within a reasonable time.

Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing.

Recognition rather than recall: Minimize the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

Flexibility and efficiency of use: Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.


SEVERITY RATINGS

After identifying heuristic problems, we decided to rate those issues into a severity scale of 0-4 before moving on to redesign:

0 - This is not a usability problem at all

1 - Cosmetic problem only: need not be fixed unless extra time is available on the project

2 - Minor usability problem: fixing this should be given low priority

3 - Major usability problem: important to fix, so should be given high priority

4 - Usability catastrophe: imperative to fix this before the product can be released

Evaluate and Redesign

mc3

Consistency & Standards

Problem – Severity Rating: 3

Inconsistency: Offers were displayed multiple times on the same page with different look & size.

 

Change

• Removed the duplicates.
• Consistent look for similar sections throughout the page.

mc4-1

Flexibility & Efficiency Use

Problem – Severity Rating: 2

Too many steps until selecting a location.

 

Change

Condensed 3 screens into 1: therefore, once clicking ‘Order Now’ it goes straight into the order process.

mc5

1. Visibility of System Status

Problem – Severity Rating: 3

• Change of states was not obvious enough.

 

Change

• Shows the order status.
• Shows the steps to product selection: has a different look from the order status to make it distinctive.

2. Recognition Rather than Recall

Problem – Severity Rating: 4

• There were no pictures indicating food items.

 

Change

• Pictures have been inserted.

mc6

Consistency & Standards

Problem – Severity Rating: 3

• Inconsistency: Pick up location is shown in various looks.
• Missing order status.

 

Change

• Shows the order status constantly from start to finish.
• Pick up locations has the same look throughout the app.

Prototype

UI LIBRARY

After finishing the user flow redesign, as a final step of this project, I decided to prepare the UI Library for this redesigned version.

0-Redesign-3
1-Color-3
2-Typography-3
3-buttons-4
4-Icons-Progress-Bar-3
5-Cards-3
6-Components-3
7-Grids-3

Conclusion

KEY LEARNINGS &

FUTURE DEVELOPMENTS

Our focus on this project was to utilize Jakob Nielsen's '10 Heuristics for UI Design' and to build the UI Library. This project was certainly a good practice of using Jakob Nielsen's principle and a reminder of the importance of staying organized and designing with a Design System in mind when you are working with a partner especially with a short amount of time given while simultaneously working on other projects. 

FUTURE DEVELOPMENT

As a next step, I want to test and validate our redesign to see if the usability of this product has improved. If so, I would want to continue looking at other user flows and implement different ways to elevate this product. As this was a heavily UI design involved project, in the future, it would be a great opportunity to implement UX design methodologies to further enhance the usability.

Selected Works

House SpecialGraphic Design

Vanlive TransitUX Design

McDonald'sHeuristics Evaluation

PROMAUX/UI Design