Olé Food App
The Product: I created a retail restaurant mobile app. This app targets all the restaurants’ take-out customers in the process of ordering from a menu, reservations. and customizing orders and payment. It streamlines the process of ordering, removes the need to contact the restaurant by phone to place an order, and cuts down on waiting for an order to be prepared inside a restaurant.
Project Duration: July – August 2021
The Problem
Individuals are in need of a quick and effortless way to order a meal.
The Goal
Design an app that is simple to navigate and allows you to save your order.
My Role
UX Designer for Olé app.
Responsibilities
Conduct interviews, design paper and digital wireframes, low and high fidelity prototyping, run usability studies, account for accessibility, iterate on designs.
Understanding the User
User Research
Personas
Problem Statements
User Journey Map
User Research: Summary
I conducted interviews and created empathy maps. A primary user group identified through research were busy middle-aged individuals who don’t have time to cook meals. It was found from our research that users had trouble ordering from food apps in the past and it became time consuming. The way they got around ordering online was calling the restaurant or going to a different place instead. It was also found that users were in a time crunch and wanted to be able to pick up meals quickly with no hassle.
User Research: Pain Points
-
1. Unorganization
Most food apps are difficult to order from because they are unorganized.
-
2. Time
Working individuals do not have time to make a meal every night.
-
3. Special Requests
There usually is no area in apps to write special requests or allergies.
Persona: Sam
Problem Statement: Sam is building a new house and has no time to make his own meals (plus has no kitchen at the moment!). He wants healthy options.
User Journey Map
Mapping Sam’s user journey revealed it would be helpful for him to have an app from Olé.
Starting the Design
Paper Wireframes
Digital Wireframes
Low-Fidelity Prototype
Usability Studies
Paper Wireframes
I made many iterations of each screen and these are the ones that seemed to work the best to address the users pain points.
From left to right: home screen, order (food options), current order.
Digital Wireframes
I made sure to incorporate key elements from research into the design, making it intuitive for the user.
Creating a full page based on special requests was a must since most users had no way of indicating their allergies on food apps.
Once a user clicks on the item they would like to purchase, they are able to write a special request.
Digital Wireframes
Low-Fidelity Prototype
Using the wireframes, I created a low-fidelity prototype. The primary user flow was ordering a meal from the app.
Usability Study: Findings
-
Two Usability Studies
I conducted two usability studies. The first study it helped guide designs from wireframes to mockups and the second study used a high-fidelity prototype. This helped to show what aspects of the mockup need to be refined.
-
Round 1 Findings
1. Users want to order food quickly/easily.
2. Users want the app to be organized.
3. Users want a special requests option.
-
Round 2 Findings
Want confirmation page in checkout.
Want to choose the day for reservations page without pulling up a separate calendar.
Refining the Design
Mockups
High-Fidelity Prototype
Accessibility
Mockups
-
Before
Before usability studies I had an area that only listed allergies.
-
After
After usability studies I created an option to include specific notes.
-
Before
Before the usability study it was hard to know the day you were choosing.
-
After
The second usability study revealed that users wanted a calendar when choosing the date of their reservation so they don’t have to look up the day someplace else.
Key Mockups
High-Fidelity Prototype
The high-fidelity prototype is easy for users to order their food on the app.
Accessibility Considerations
-
1. Icons
Used icons to help users navigate through the app easier.
-
2. Pictures
Used pictures so users know what the food looks like.
-
3. Colors
Colors contrast well against the text.
Going Forward
Takeaways
Next steps
Takeaways
-
Impact
The app is quick and easy to use for all users.
A quote: “I love how I can order what I got last time with just the click of a button. It makes it so much easier!”
-
What I Learned
Research is what made my design better. The users were so helpful in coming up with feedback.
Next Steps
Make sure pain points are gone by conducting one more round of usability studies and conduct more research.