top of page

Food Order App

Designed so users can have an efficient and allergy friendly food order and pick-up experience

ROLE

Solo Project

DURATION

3 months (2022)

TOOLS

Figma

LINK

Prototype

BurgerFigma.png

Overview

The burger pick-up experience is all about speed and convenience for people on the go, so I set out to design a more efficient version of this process. My solution provides users with real-time updates on their order status, allowing them to grab their meals quickly. It also enhances accessibility by offering easy ingredient customization options, ensuring allergy-friendly choices are simple and stress-free.

Challenge

We’ve all been there—you’re starving, place an order from your favorite burger spot, and time your drive perfectly to pick it up. But when you arrive, the food’s not ready. Now, you’re stuck waiting in a busy restaurant, anxiously wondering when you’ll finally get your meal and head back to work. Maybe you’ve got a lactose sensitivity and specifically asked for no cheese, only to find it smothered on your burger, and now you’re stuck picking it off. My designs aim to prevent moments like these.

Research

To empathize with users, I conducted semi-structured interviews to explore where improvements were needed in food ordering apps. I also created a Persona and User Journey Map detailing the feelings of one interview participant who needs an intuitive food ordering app because he does not have time to cook.

Goals

— Easy accessibility to different locations when travelling for work
— Customize foods and ensure safety from food allergies
— See clear pictures of foods

Frustrations

— "It's so annoying when I can't just quickly reorder things that I have ordered before"
— "I hate when a food app tells me that the food is ready at an incorrect time"
— "I hate when I have to enter in the same credit card information every time I order"
— "Can't access recent orders"​​

Screenshot 2024-07-03 at 3.40.11 PM.png

Pain Points

— Don't know when the food is ready
— Can't customize for food allergies
— Can't access ratings and reviews
— Can't access recent orders

Wireframing

Paper Wireframes

Here are a few examples of the paper wireframes translated into digital. 

— Don't know when the food is ready

  • ​Order Confirmation page includes time stamps of progress​

​
— Can't customize for food allergies

  • Details page includes images of each ingredient allowing users to view and delete ingredients that are not compatible with their diet

​
​— Can't access ratings and reviews​

  • Review page allows users to view and comment their opinions through stars out of 5 and text

​
— Can't access recent orders

  • Profile and Home page allows users to view their recent orders quickly

Screenshot 2024-07-03 at 4.10.39 PM.png

Digital Wireframes

Here are a few examples of the paper wireframes translated into digital. These designs allow the user to have easy access to recent orders in the Profile page. Within each menu item there will be a list of ingredients, allowing users to delete according to their preferences. Users will also be able to leave reviews and rate meals out of 5 stars, as well as see the posts from other reviewers. Finally, time stamps for each step of the preparing process allow the user to effectively time their pick-up.

Frame 2.png

Low Fidelity Prototype

Feel free to explore the prototype by clicking here

Usability Studies

Usability studies were conducted to determine if users can swiftly complete core tasks within the prototype of the app. Key Performance Indicators such as time on task, conversion scale, and the system usability scale were used to measure how difficult the app was to use. A diverse group of participants were recruited to gather findings. 

Round 1 Insights

— Users wanted a clearer way to tell what page they are currently on
— Users wanted a way to save store location for easy access in the future

Round 2 Insights

— Users want to be able to see items for people with dietary restrictions, and other special categories
— Users want to have the option of favoriting a menu item

Mockups

Users wanted to be able to favorite menu items, so I added a heart button where they could press to add a menu item to their favorites. They also wanted to better view which foods were accommodating to dietary restrictions. In the new design, there are banners next to the foods with information on if they are vegan or vegetarian, etc. Additionally, information on whether the menu items are seasonal or popular are included. I also found that users wanted to be able to access store locations more conveniently, so I added a toggle button that allows users to save a store location for easy future access.

Before

Menu (1).png

After

Menu_edited.png

Before

Pick-up.png

After

Pick-up_edited.png

High Fidelity Prototype

Explore the high-fidelity prototype here

burgergif.gif

Takeaways

Designing with accessibility in mind, particularly through features like allergy-friendly customization, was a key takeaway from this project. Not only does it accommodate users with dietary restrictions, but it also allows customers with specific tastes and preferences to tailor their meals. This demonstrates that solving a specific problem for one user group can also benefit a broader audience. Offering this level of personalization makes customers feel understood and valued, which strengthens their connection to the brand. This lesson will follow me through the course of my futures projects as well.
​
​

bottom of page