McDonald's Kiosk

UI/UX Design
Project Overview
McDonald's Kiosk was my submission to the final project to the  Human-Computer Interaction class. The instructions were to create an app/website/anything with a front-end which reflected everything that we had learnt in class. The goal was to see how well we learnt about affordances, signifiers, constraints, cognitive load, dark patterns, etc.  
A detailed final report can be read here.
Wireframe
The wireframe depicts the user's journey and shows how the screens will look and the order. This acted as a guideline on how to design the McDonald's kiosk.
Screen 1
A basic welcome screen to be displayed to everyone who want to order their food through the kiosk.
The user walks up to the kiosk and clicks on the start button. The user has the option to change the language and even audio prompts for those who have low visibility. The audio prompts work when the user touches any part of the screen.
Screen 2
The languages displayed are some of the most commonly spoken languages around the globe. There is always an option to add more languages.
Screen 3
The menu is then displayed to the user when they click the ‘Start’ button on Screen 1. The menu is divided into categories like Popular, Meals, Breakfast, etc. The user chooses one of the categories that they desire.
Screen 4
When the user chooses one of the categories, they are displayed with all the items in that category. The user selects one of the items displayed, or they can go back to the screen where they can see all the categories.
Screen 5
When the user selects a food item from their desired category, they are displayed with the details of that food item. The price, quantity, and nutritional information are shown. The user has the option to customize their meal or even make it a meal by adding fries and a drink. Once the user customizes their food or makes it a meal, they add it to the cart.
Screen 6
When the user is ready to order, they can click on the Cart icon to go to the payment screen. Here the user is displayed all the items in their cart, the price, the calories of each item, and the final amount that they will have to pay. The users have the option to go back or complete the order by paying.
Screen 7
When the user clicks on Pay Now, they are indicated to pay through their cards by inserting, tapping, or swiping it on the machine next to the kiosk. The user still has the option to cancel this payment.
Screen 8
Once the payment is received, the customer is shown their order number and asked to collect their receipt. They can either click on the exit button to return to the home screen immediately or the machine will automatically return to the home screen after 10 seconds.

Note:

The project makes use of the UX study done on McDonald's Kiosk.

Powered by Webflow
LinkedInInstagram