top of page
%20(1).png)
%20(1).png)
About The Project
​A redesign of McDonald's app to
improve user interface by facilitating order process.
Role
UX Research
UI Design
Tools
Figma
Photoshop
Team
Individual
Year
2022
The Problem
The process of placing an order may become unclear and overwhelming, leading to a cognitive overload. Consequently, the user may require a significant amount of time to complete their purchase.
The Solution
To accelerate the completion time of orders, the food ordering process can be enhanced by reducing the cognitive overload present in
the interface.
Market Research
As a part of my research, I reviewed a number of fast food applications to gain insight into their respective strengths and weaknesses.
Chooka
Well-known Asian fast food chain whose mobile application is utilized as a platform for food delivery services.
Burgeranch
Israeli burger chain that offers an application enabling customers to place orders online and select either pickup or delivery options.
.png)
Nono Group
Single application available for three distinct types of restaurants, all of which offer takeout and delivery services.
​Conclusions from my market research:
-
Most homepages are packed with Ads, logos, images etc.
-
All apps use tabs in several locations in the app, such as in the menu screen, order's summary screen, etc.
-
​In some apps, the user is required to login to their account prior to choosing a product.
-
In most apps, the order process was simple and straightforward.
Persona
Alex borest
32 | Graphic Designer
Alex typically retrieves his McDonald's orders from the nearest location to his workplace.
However, due to the persistent confusion he experienced while using the McDonald's application, he refrained from placing orders through it.
Fortunately, following the recent redesign of the application,
Alex can now effortlessly order his meals via the McDonald's app.
User Flow
.png)
Key Features
-
Order from anywhere.
-
Modify food combination.
-
Quick & easy ordering process.
-
Receive notifications when orders are ready.
-
Track orders easily after payment
Wireframes Sketch
%20(1).png)
Primary Task Flow
The user selects an item and proceeds to initiate the purchasing process.
.png)
%20(1).png)
Before and After
The Homepage
I designed a simple homepage that features a header containing a hamburger menu, a logo, and the user's shopping cart.
Along with a welcoming statement, I also included a photograph of the user to foster a sense of connection and inspire them to proceed with their purchase.
Additionally, tabs are available to showcase the menu.
Before
After
Before
After
.png)
The Menu
I arranged the menu on the homepage by utilizing tabs, enabling the user to swiftly and effortlessly make a purchase.
The menu items are displayed without any categorization and the user can navigate through them via infinite scrolling.
Furthermore, I created a dedicated button for each item, which allows users to quickly place an order without making any changes to the order.
The Product
After making changes to the button display, they are now more visible and easy to find for users.
The screen looks clean and simple, and users can continue the purchase process smoothly without any confusion.
There are no tabs on the screen.
Before
After
Before
After
Order options screen
Prior to the redesign, some options appeared to be in the form of a list or seemed like random information, which made it difficult for users to recognize them as buttons.
To address this issue, I positioned this screen as the first screen that the user encounters upon entering the application, directing them to the most crucial action, which is placing their order.
Select a branch
Initially, all the unique features of the branches, such as kosher, open, and vegan, were presented through tabs.
However, to maintain a clean and uncomplicated screen, I opted to create a filter icon for all of these options. By clicking on the filter icon, the user can select the desired options.
Before
After
%20(1).png)
My Order's Screens
The user has the flexibility
to customize the ingredients according to their preferences.
The user has the option
to reorder a previous order from the "My Orders" screen.
Notifications screens
Once the user's order is prepared, they will receive a notification on their mobile device.
.png)
%20(1).png)
Colors & Typography
bottom of page