The Project
This is my final independent assignment for User Interface Design, a graduate level course at the University of Toronto. Thus, this project will focus on product design, branding, and evaluation.
Have you ever...
Ordered a dish at a highly rated restaurant and not liked it?
Had trouble deciding on what to order from a large menu?
Been on the hunt for the best Banh Mi in your city?
If you answered yes to any of the above, you're not alone.
I surveyed 34 people who ordered food in the last three months and interviewed three participants to better understand their food ordering habits. Below are my findings.
Half of the respondents
have experienced trouble deciding on what to order at restaurants due to decision fatigue from menus.
26 out of 34
have regretted their food order choices.
Top reasons for regret: poor taste (18), poor value (8)
and not as advertised (4).
24 out of 34
decide first on a particular dish that they crave and then narrow down which restaurant to order the dish from.
The Problem
What do these popular review apps all have in common?
Apps today rate restaurants overall, but people are more interested in reviews for particular dishes.
Job Story
When I am ordering food from a restaurant I want to know that the dish I have chosen is good before ordering so I can avoid buyer's remorse.
Motivations 😀
I want to spend my money on good food.
I want to reduce menu decision fatigue.
Anxieties 😥
What if the dish is better elsewhere?
What if the portion size is too small?
What if the actual food is not as advertised?
I hope the dish is not too spicy.
People need a way to...
1
Help them decide what to order from a menu.
2
Find the best dish to satisfy their craving in their city.
3
Reduce disappointment when ordering food.
Key Insights & Ideation
Context of Use
The product would be a mobile app because most people start their food ordering journey on their phones. They may also be at the restaurant using the app to look up dishes.
Rate the Plate
Rate the plate, not the restaurant. These factors were indicated in the survey to be important when deciding on what to order: rating, taste, value and dietary needs.
Decision Fatigue
The solution would also make dish recommendations tailored to your preferences based on previous activity on the app (ex. ratings, bookmarked dishes, etc.).
Low Fidelity Sketches
I made my first drafts on Balsamiq to share my work easily over Zoom to collect feedback before proceeding to the next fidelity.
Formative Usability Testing
I shared my low fidelity work with two participants from my questionnaire who met the screening criteria of having recently ordered food in the last three months. Here are their initial impressions:
Home (Search)
Participant 1
- Can you search for restaurants too?
- It's not clear how the random feature would work.
- What would an example of a category be? Should it be bigger?
- How does it ask for my location to tailor my searches to restaurants nearby?
Participant 2
- Does this search look for restaurants or dishes - or both?
- The layout looks like UberEats. I feel like with how big the images are, I would be scrolling a lot if I was casually browsing.
Resulting Changes
- Changed text in search bar to "Search plate or restaurant" and added search filters for users to select what they want to look for.
- Added a screen to explain to the user how the random feature works.
- Made the categories bigger with icons for easy scanning.
- Added screens to show asking for permission and icon for adjusting location.
- Made the dish images smaller and horizontal scroll to fit more categories on the home screen.
Dish Search Result
Participant 1
- I think it might be nice to have more than just one big image for the dish at the top? Maybe a way to explore an album.
- It's not clear what the search process before this page would look like.
Participant 2
- Is there a way to sort, filter or search through the reviews?
- What if I liked what I saw from reviews and wanted to order now?
- Can you interact with other people's reviews? I think the Reddit upvote system would be nice for seeing the most useful reviews first.
Resulting Changes
- Added more photo previews to the top and a button to see more.
- Added order now button to screen.
- Added screens to show the search and filtering process for search results.
- Added screen to show the search and filtering process for reviews.
- Added a thumbs up "Like" feature to vote on relevant reviews.
Restaurant Details
Participant 1
- I am curious about how the "see menu" and "order now" screens would play out. Does this have an ordering system?
- Can restaurants be saved somehow too? Like a bookmark?
Participant 2
- A map might be helpful at this point, when they are considering the restaurant? I see the distance, but I think showing a map would be even more helpful.
Resulting Changes
- Added a screen for menu and what order now would look like if pressed.
- Added a bookmark feature for restaurants.
- Added a map to the top of the screen showing where the restaurant is relevant to your current position.
Write Review
Participant 1
- How do you select the dish and restaurant?
Participant 2
- Does the "back" arrow cancel the review?
Resulting Changes
- Added preceding screens showing how the restaurant and dish are chosen for review.
- If the "+" button on the navigation is tapped while on a dish screen, it will automatically fill out to the restaurant and dish on the page.
- Added a cancel button at top.
Reviewer Profile
Participant 1
- Is this the only screen where you can see what dishes you liked? What if you liked a lot of dishes and want to search through them?
Participant 2
- What if I wanted to see all of my reviews? Or search through them to revisit an old one?
Resulting Changes
- Added a bookmark/love button to navigation bar to organize and revisit what the user saves.
- Added a button to "See All" reviews by the user.
- Looking at reviews written by user will follow similar structure to browsing all reviews for a dish.
High Fidelity Prototype
Design System
The design system below outlines the brand colours, typography, icons, buttons styles, form fields and other components.
Design Justification
Sans Serif Fonts
Greater legibility and use of iOS system fonts for greater compatibility.
Colour Choice
Yellow is the brand colour because it represents optimism, energy, joy, and happiness. It also has strong associations with food. The best foods are yellow (fries, hash browns, and custard to name a few).
(Source)
Mood
The rounded logo font and choice of bright yellow as the brand colour evoke a fun, joyful and happy mood. This is appropriate because the ultimate goal of RatePlate is to make sure you're happy with your order.
Accessibility: WCAG Contrast Requirements
WCAG 2.0 level AA requires at least 4.5:1 and level AAA requires at least 7:1.
Businesses also benefit from RatePlate.
Direct Feedback
Businesses get valuable dish-specific feedback directly from customers.
Optimize Menu
Remove poorly rated dishes and uncover opportunities for new menu additions.
Track Quality
Track the quality of dishes over time and investigate any changes in quality like a new cook or supplier.
Adjust Recipes
For example, if "too salty" is a common complaint for a dish, the restaurant can adjust accordingly.
RatePlate Business Dashboard Mockup
I also designed a mockup for what a desktop dashboard that analyzes customer feedback and generates actionable insights for restaurant owners might look like.
Next Steps & Future Considerations
Further testing and iterating on design of RatePlate app.
Test RatePlate Business dashboard with restaurant owners. Add dish comparison feature.
Collaborate with food ordering apps. For example, link RatePlate reviews to items on UberEats menus.
Lessons Learned
Speak to Users Throughout
This was an independent assignment and although I was working alone, I quickly realized how important it is to not design in isolation. The best ideas come from speaking to people, probing their mental models and gaining insight from hearing different perspectives. Speaking to people should occur throughout the design process with primary user research and frequent usability testing.
The Power of Design Critiques
In our second last User Interface Design class, we had a design critique session where we presented our ideas and had the chance to receive critique from other designers. When you spend hours pouring over the same few frames, you can miss obvious problems. Whether it's getting a second pair of eyes on your design or building on each other's ideas with new perspectives, speaking to other designers throughout this project was highly valuable.