Italian Menu
The product:
Italian Menu is a local Italian restaurant located in Durham, North Carolina. Italian Menu strives to improve its customer experience by serving healthy, delicious food and making it easy and enjoyable for customers to order food. Italian Menu targets busy working customers who don't usually bring lunch to work.
Project duration:
3 Weeks
Project Overview
The problem
Busy workers and commuters sometimes find it hard deciding what to order from a Italian menu restaurant.
The goal
Design an app for Italian Menu that allows users to find and decide what to order quickly.
My role
UX designer designing an app for Italian Menu from conception to delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
Understanding The User
User research: summary
I conducted interviews and created empathy maps to understand the users I was designing for and their needs. A primary user group identified through research was working adults who don't have time to cook.
This user group confirmed initial assumptions about Italian Menu customers, but research also revealed that most customers sometimes find it challenging deciding what to order from the menu.
Pain points
Decision Making
Customers find it hard deciding what to order most times due to the lack of interactive information and food image on the menu.
Time
Customers spend a lot of time trying to decide what to order.
Accessibility
The platform for ordering food is not built with accessibility in mind.
User journey map
Mapping Onyi’s user journey revealed how helpful it would be for users to access a dedicated Italian Menu App with images and interactive information on each food.
Starting The Design
Paper wireframes
Performed several iterations of the paper wireframe (home page) to ensure that digital wireframes were well-suited to address user pain points.
I prioritized categorizing food with images for users from the home screen to help ease the decision-making process.
Digital wireframes
As the initial design phase continued, I made sure to categorize the menu, adding images and text descriptions to improve the user experience while deciding what to order.
I created a detail page of each food using half the screen for the food image and food detail on the other half to help improve the user's decision-making process.
Low-fidelity prototype
I created a lo-fidelity prototype using the completed set of digital wireframes. The primary user flow I connected was ordering a meal from the recommended list.
View on Figma
Usability study: findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframe to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
Users want the menu to have a food image for better decision-making.
Users want food recommendations.
Round 2 findings
Users want to try out new food but are scared to do so.
Users used the navigation more than the search.
Refining the design
Mockups
The earlier design allowed for search and four icons on the navigation, but after the usability studies, I replaced the search with the logo and reduced the navigation icon to three.
Before usability study
After usability study
Before usability study
After usability study
Mockups
The second usability study revealed some hesitation from users trying new meals. So I added interactions (e.g., likes and the number of orders icons) to help users see feedback from other customers who previously tried the food.
Key Mockups
Home screen
Recommendation screen
Food detail screen
Cart screen
High-Fidelity Prototype
The final high-fidelity prototype presents clearer and straightforward user flows. Users will spend less time deciding what to order and start trying out new food with the images, descriptions, reviews, and order details of each food listed on the menu. It also meets user's accessibility needs.
View on Figma
Accessibility Considerations
One
I used buttons and icons to make navigation easier.
Two
I avoided color combinations that are hard to distinguish.
Going Forward
Impact:
The Italian Menu app helps users spend less time deciding what to order.
Quotes from peers feedback:
Frist: “Finally, I can see the picture of what I am ordering.”
Second: “Thanks to the review, now I can try out new food with good reviews.”
What I learned:
While designing the Italian Menu app, I learned the value of usability studies and peered feedback because the first ideas for the app are only the beginning of the process.