top of page
Screenshot 2025-02-16 at 1.02.02 AM.png
Screenshot 2025-02-16 at 1.02.02 AM.png

McDonald's App
​Interface Revamp

Project date: 3/2024

Tool: Figma

Introduction
McDonald’s is one of the most visited restaurants in Hong Kong. In this fast-paced city, many people choose to order food through the app. However, the McDonald's app interface is not user-friendly. In this project, we aim to enhance the user flow and interface of the app.
Purpose
Improve the Ordering System and Interface for better user experience.
•⁠  ⁠Simplified steps for time-saving
•⁠  ⁠⁠Streamlined checkout and payment process

Pain point of the app
 

Screenshot 2025-02-16 at 1.02.39 AM.png

1. Missing clear button for customers

-Hard to locate the button for choosing between eat-in or take away

Screenshot 2025-02-16 at 1.03.11 AM.png
Screenshot 2025-02-16 at 1.03.05 AM.png
Screenshot 2025-02-16 at 1.02.59 AM.png

2. Superfluous frames

-Using 3 frames for 1 action

Screenshot 2025-02-16 at 1.03.35 AM.png
Screenshot 2025-02-16 at 1.03.39 AM.png

3. Only add-to cart button

-Not user-friendly for customers who only ordering a single item

Screenshot 2025-02-16 at 1.04.11 AM.png
Screenshot 2025-02-16 at 1.04.03 AM.png
Screenshot 2025-02-16 at 1.04.23 AM.png
Screenshot 2025-02-16 at 1.04.32 AM.png

4. Without unify brand color

-Reduce brand recognition

Objectives
Ordering a take-away meal (tested by choosing a set meal- 脆辣雞腿包餐, as McDonald's menu has various options in each category of food and drinks)

What We Improved

Screenshot 2025-02-16 at 1.02.39 AM.png

Before

Capstone Project1.png

After

1. Flow enhancement

-Customer can choose the meal pick-up method first

Capstone Project2.png

2. Simplify frames

-Condensed 3 frames to 1 frame for store choosing

Screenshot 2025-02-16 at 1.03.35 AM.png

Before

Capstone Project3.png

After

3. Added Checkout button

Capstone Project4.png
Capstone Project.jpg

4. Brand color align

-Increase brand recognition

Prototype

bottom of page