Project Overview
Vorder is a mobile app for restaurants, which provides a contactless ordering system 

Independent Project
Project Date: Nov - Dec 2020
Used Programs: Adobe Illustrator, Figma
Problem Statement
Restaurant visitors and workers want a product to minimize interaction because of the dangerousness of face-to-face contact during the COVID-19 pandemic.
The target audience includes restaurant patrons and workers, who urgently need a contactless ordering system. 
Primary Persona
The primary persona is a restaurant visitor (specifically, a student) visiting a restaurant during the COVID-19 pandemic. She thinks that there is a huge difference between to-go orders and dine-in but having a challenge of dining in the restaurant due to minimized face-to-face interaction. So, her goal is to enjoy the vibe of dining in a restaurant by minimizing interaction.
Secondary Persona
The secondary persona is a part-time server who is having a challenge with the time-consuming process of explaining COVID policies to, and serving customers, and his goal is to reduce time.
Another secondary persona is a restaurant owner, who is having a challenge with customers’ satisfaction after the service. His goal is to view direct feedback for his restaurant.

I first started my design process with four main functions: Order (located at the top), Refill, Chat, and Payment (located at the navigation bar).
Initial User Flow
Initial Wireframe
However, after getting feedback that the ‘Chat’ and ‘Refill’ function overlaps, I decided to merge the ‘Refill’ function within ‘Chat’ by putting the ‘Refill’ as a suggested message over the keyboard.
In addition, I shifted the ‘Refill’ function to ‘Account setting’, in which users can manage their payment information. I previously got feedback that better management of payment is needed. The addition of the ‘Account setting’ function enables account creation at the entry which enables users to add their payment method (either credit/debit card or Paypal) and edit afterward by accessing ‘Account setting’ at the navigation bar, enabling better management.
Refined User Flow
Refined User Flow
Interaction Map
Click to Prototype!
User Feedback
* Chat and refill function overlaps: I solved this problem by replacing the refill function with an account setting function.
* The navigation bar is unclear only with icons: I solved this problem by consolidating the navigation bar with the text bubble next to it.
* It is unsure that the order has been sent: I solved this problem with the pop out screen to notify users.
* Better management of payment is needed: I solved this problem by adding edit payment within the account setting.

* Sign-up (including verify email and add payment method)
* Log-in (including forgotten password)
* Scan QR code for restaurant
* Home screen with menu and search option
* Order
* Chat with server
* Make a Payment (links to rate experience pop out)
* Account setting
I consider my product as the best answer to the problem of the dine-in experience during the COVID-19 pandemic. Safety is a key issue but people still want the dine-in experience. The product has an expected outcome for people to enjoy their dine-in experience safely in this time by minimizing face-to-face interaction, as well as satisfying problems that restaurant workers can have.
Design Decisions
Navigation: Unlike the usual navigation bar located at the bottom, I created a vertical bar; viewing the menu on the home screen is one of the most important functionalities in the ordering system that cannot be hidden.
Buttons: The buttons are shaped like a rectangle filled with red color with white text. Red buttons are visually noticeable, contrasting with the white background.
Visual elements: I chose the color red to highlight important elements to create contrast with monochrome. I have used a sans-serif font, Roboto, for readability, and different emphasis to be either bold medium, and regular based on content.
Copy: I wrote copy to be as direct and simple as possible for better understanding.
Existing products such as UberEats and Grubhub influenced me in the designing process, on not missing important elements such as special instruction.
Next Steps
In a larger vision, I am hoping to create a server view of the product for a future iteration. Unlike from the customer view, it would have additional functionality such as view rating and a separate view of order and payment.


You may also like

Back to Top