New take-out menu
for Taste Box.
Taste Box is a compact restaurant situated in the heart of Bangkok, Thailand, catering to the needs of busy working individuals. Built upon a super lean business model, Taste Box offers fresh and healthy food and drink options at reasonable prices.
Project overview
Product
Creating menu preview app
Project duration
October 2022 to January 2023
My role
I’m a UX designer.
Responsibilities
As a UX designer, my methodology involves a range of techniques, including conducting user interviews to gather insights, creating paper and digital wireframes to map out the user journey, developing low and high-fidelity prototypes to test and refine concepts, conducting usability studies to evaluate user feedback, accounting for accessibility to ensure inclusivity, and iteratively refining designs based on user needs and feedback.
The problem
At Taste Box restaurant, recognize that the perception of healthy food being bland and costly can dissuade potential customers from choosing our offerings. In order to increase engagement among our current patrons and appeal to a wider audience, we are developing an application that showcases how our healthy cuisine sets Taste box apart from the market.
User research
Research Goal
-
Do they plan to order for each meal?
-
Do they prefer fresh cook or pre-cook meal?
-
How long they going to eat after purchase?
-
Do they prefer online payment and then pick up?
-
Is it a second choice to order in take out restaurant?
-
Do they prefer delivery?
-
Do vdo of menu convince them to order?
-
Do they want to see the cooking process and the source?
-
Do they normally count the calories from food?
-
Do they have weight gain?
-
Do they want to lose some weight?
-
Do they want to get fit?
-
Do they prefer variety of menu?
-
Do they prefer healthy food rather than tasty food?
Research Questions
-
Please tell us about the food that you like to eat during rush hours?
-
Please tell us about your activity since get up in weekday?
-
Please tell us about your lunch time routine of your office?
-
What kind of food that you like to eat during workday? Why you like it?
-
What information that you want to see to help you make a decision to order the food?
-
Please tell us about how you keep your health fit?
-
Please tell us about how you prepare your meal?
-
Please tell us about your exercise? And your health?
-
What is the main reason that increase your weight? and please tell us about it?
-
Do you have any plan or do something to control your weight? And what is the result?
-
What do you think about restaurants in this area? Do you like it and why you like it?
-
If you have to control your weight what will you do and why?
-
Have you ever concedure about the source of the food ingredient that you bought?
Is it important to you? Please tell us about it? -
Have you ever purchase food by health reason? Please tell us about it?
-
Have you ever purchase food online? Please tell us about it?
Research results
Group 1: Mainly focus on healthy foods.
Group 2: Occasionally
Customer
Says
-
I wish I could have time to exercise after work.
-
Delicious food make me feels good after hard day at work.
-
Healthy food normally have a bad taste.
-
It quite expensive to eat healthy food.
-
Smart watch help me monitor my activities
-
I wish I can plan my meal in advance.
-
Air pollution ruin my after work exercise.
Feels
-
Tired from works and traffic.
-
Food should have a better taste.
-
Sorry when can not exercise as planned.
-
Feel good when get the exercise done.
-
Question about what is good for health.
-
Feel sorry when eat process food.
-
Exciting when see new diet solution.
Does
-
Walk more during working.
-
Drink lots of water.
-
Using smart watch
-
Plan to exercise.
-
Join online trainer.
-
Ask friend to eat and exercise together.
-
Order pre-cooked healthy food for lunch.
Thinks
-
It quite hard to get in shape.
-
Want to have a good looking.
-
What is the best diet solution for me?
-
Any solution that I missed?
-
I want healthy food that tasty.
-
Want to have more time at lunch.
-
What should I eat for the next meal?
Says
-
On my hustle day I can order via App and pick it up to save my time.
-
It’s my first time here and this seem famous.
-
I saw my friends visit here and I want to try.
-
Saw a good review in food finder app.
-
The price is good and it look tasty.
-
It’s will be better if have more seats.
-
It’s a bad traffic on weekday.
Feels
-
Hurry and hustle.
-
Environmental friendly.
-
Waiting too long on queue.
-
Hungry and want to eat something.
-
Value for money on this food quality.
-
Refreshing and have more energy .
-
Achievement after try variety of menu.
-
Feeling happy due to eat delicious food.
Does
-
Try many restaurant in the area.
-
Create review content.
-
Try to spent less time for lunch.
-
Try recommended menu.
-
Find seat to eat.
-
Cafe hopping.
-
Busy working.
-
Find a discount menu.
Thinks
-
What I’m going to eat?
-
Any restaurant famous around here?
-
It quite hard to get a seat.
-
This restaurant quite unique.
-
So many menu to choose.
-
Can I find some food to eat in the office.
-
Where should I take the photo.
-
Which menu is ready for order?
User persona
User journey maps
Amelia
Peter
Problem Statement
Amelia, Sale Team-leader
“Who needs to keep her body in shape by controlling her food calories because she doesn't have enough workout time"
Peter, Undergraduate student
"Who needs to try delicious food as much as possible because he wants to create food reviews on his channel."
Goal Statement
Our new menu
“Will allow the user to see how many calories are contained in each menu item. This feature will be especially beneficial for people who want to manage their weight by selecting meals that align with their daily calorie goals. We will measure its effectiveness based on the number of customers who use the calorie tracking function."
Our new menu
"Will allow the users to view the story of each menu item, with the aim of making a positive impression on first-time visitors by including a brief video for each menu. We will measure its effectiveness by tracking the number of customers who add a menu item to their basket after watching short video."
Story board
Big Picture
Closed up
Start the
Design
-
Paper wireframes
-
Digital wireframes
-
Low-fidelity prototype
-
Usability studies
I'm conducting field research on a takeout restaurant that uses ChowNow.
Paper wireframes
I created multiple sketches to identify the components that best align with the homepage's functionality from user research result.
Digital wireframe
User flows
Main flow
Amelia's
persona
flow
Peter's
persona
flow
Usability study
Affinity diagram
After conducting a usability test with five individuals, I color-coded each person and categorized their comments using an Affinity diagram to pinpoint the areas where users experience the most confusion.
Usability study: Pattern Identification
-
It was observed that 5 out of 5 participants could not select the menu due to the model not having enough detail. This means that the Lo-Fi prototype can not be used in this case.
-
It was observed that 2 out of 5 participants wanted to edit information during the checkout process. This means that some people want to change at the last minute and have to notify them before the process can not be changed.
-
It was observed that 1 out of 5 participants want to know where to pick up the food. This means that not every app user visits the store before and they might stay closer to other stores when they relocate.
-
It was observed that 1 out of 5 participants want special requirements on the menu. This means that not everyone can eat the exact menu recipe .
-
It was observed that 2 out of 5 participants have trouble adding menu calories to their calories daily summary. This means that some of the customers do not order by/for themself.
Usability study: Insight Identification
-
Based on the theme that: all of the users can not select the menu due to the model not having enough detail, an insight is: Users need the real information to make a decision.
-
Based on the theme that: Some users want to edit information during the checkout process, an insight is: Users need to review checkout information and be able to edit.
-
Based on the theme that: Some users want to know where to pick up the food, an insight is: Users need to know where to pick the food up.
-
Based on the theme that: Some users want special requirements on the menu, an insight is: The menu has to be able to be customized by the user.
-
Based on the theme that: Some users have trouble adding menu calories to their calories daily summary, an insight is: The calories summary function has to be able to select out from the orders or manually select from the menu.
Usability study: findings
My task is to create a menu preview app for a takeout restaurant, so I want to identify two main personas that represent the restaurant's two primary customer groups. Specifically, I want to determine whether these customers would prefer more details on the menu or not.
Additionally, I want to know whether customers who prioritize healthy eating would be interested in counting calories to help them stay in shape.
1
Round 1 findings
-
People can not select the menu in the Lo-Fi prototype.
-
Sometimes people order in groups.
-
People might want to make changes of the menu and during checkout.
2
Round 2 findings
-
Too specific details
-
Design not consistent
-
Design out of date
Refining
the design
-
Mockups
-
High-fidelity prototype
-
Accessibility
Add store location
The Lo-Fi model leads to users changing checkout details like pickup time and location. To avoid this, a top menu option is added for selecting pickup location, simplifying checkout and enhancing user experience.
Apply photo
The Lo-Fi model lacked photos on the menu, making it difficult for users to distinguish between options. To address this issue, I incorporated various photos for each menu item, allowing customers to choose between detailed images or simplified options.
Mockups
Feedbacks
Accessibility considerations
New User
Accessibility for new users and users who are not members and want to start ordering food is important, and it should be accessible without requiring them to log in.
Photos
Adding photos helps users understand our menu and sets their expectations for their order once they receive it.
User Friendly
Due to the amount of text and information in the app, particularly during the checkout process, I removed some shadows from certain boxes and rearranged the importance of each piece of information. This helped me create a cleaner look for the app that is also user-friendly.
Going Forward
-
Takeaways
-
Next steps
Takeaways
Impacts
User A:
"This is an app that has the potential to shift people's perception of healthy food, proving that nutritious meals can be both tasty and easily accessible."
User B:
"This app has completely shifted my perception of healthy food, showing me that nutritious meals can be both delicious and convenient."
What I learned
From the user-friendly interface to the seamless checkout process, this takeout restaurant's app design has revolutionized the way we order food on-the-go.
Next steps
Step 1:
Research in details
Researching each menu item in detail and the activities in the kitchen to understand the ingredients and cooking processes is important to ensure that the current design supports the entire process.
Step 2:
Technical details
Have a critique session with other designers and developers to address issues that have a significant impact.
Step 3:
Global usability testing
Conduct another usability test on the latest app mockup with a broader range of customers, such as vegetarians or people from different religions.