FamilyFood+
Role UX Designer
Tool Pen & Paper
Figma
Canva
Rotato
Duration 08/2021 - 09/2021
- Food First -
There are moments when you feel like it is hard to order the right amount of food for a family dinner with their diet preference. And there are moments when you are so tired from searching restaurants and dishes that you just don't want to order again.
FamilyFood+ is the solution to problems like these surrounding one's diet. Here are some of the screens in motion.
1.
For foodies, trying new food becomes more efficient by selecting diet preferences and filter out the food to avoid.
2.
Repetitive eaters may effortlessly order their favorite food from order history and favorite restaurants.
3.
Simply enter the number of people to dine to order the right amount of food for families and friends with recommended combos.
- Understanding The Challenge -
The core of the challenge was "to create a food customization app for family diners", which is surrounded by a number of tasks. For example, it involves who is the one who orders food delivery in a family, in what context people would like to order food delivery, what problems do users face with their previous food ordering experience, and the list can go on. I did not want to jump right into ideating concepts based on assumptions. Instead, I wanted to understand as much of the ordering food experience as I could in this limited amount of time to make sure my concept was effective and valuable to users.
Emphaiseze
-Secondary Research
-Interview
-Persona
-User journey map
Define/Ideate
-Problem Statement
-Competitive audit
Lo-fi design
-User Flow
-User Story Board
-Pen & Paper
-Layout & Structure
-Testing w/ lo-fi prototype
High-fi design
-Visual design
-Interaction design
-Motion Design
Test/Iteration
- Testing w/high-fi prototype
- iteration on the UI
- Research -
Secondary Research
Target User
One in three food delivery consumers is a millennial, age 25 - 40, according to Statista.
Family of Target User
30% of millennials have a spouse and child, 14% of millennials live with their parents, and 13% of millennials have a spouse with no child.
Technomic estimates 46% of restaurants and foodservice chains understand the increasing customer's need to customize the order, 72% of costumers expect customization.
According to a report published by Mintel in May, 58% of the millennials surveyed consider themselves a "foodie" and 57% think planning meals takes more time than they would prefer – they tend to eat out more.
Interview
To understand the user need, I have conduct interviews remotely with 5 participants age 25-40 in my network, who order food delivery 1-3 times every week. In the recruitment, I tried to have people different in age, gender, and marital status for better generalizability.
When preparing the script, I kept the questions open enough for the participants to elaborate on their relationship with their experience in food delivery. In this phase, it was especially important for me to be unbiased and open so that I could spot the pain points.
Persona Development
I quickly coded the responses from the interviews and found that the target users are working adults who don’t have time to cook meals and people who order food delivery for family gatherings on weekends.
The research has found different eating habits among the users. Some see the process of finding food as an enjoyment, who like to follow the footsteps of their favorite foodie influencers to try new restaurants, and search for good food by themselves. Therefore they would like to have good search engines and filters to find the new restaurant desired.
Some see the process of finding food as a burden, energy, and time-consuming. They prefer to make a repetitive order of their favorite food with the assurance of their food choice would only lead to a known and good dining experience. Therefore they would like to make the same order from history and schedule their order for an entire week.
This user group confirmed initial assumptions about Familyfood+ customers, but research also revealed that effective communication and flexible payment are key in continue using the food delivery app.
The communication with the participants helped me create the following two personas.
Administrative Manager
Monica | 37 yrs | Taiwan
A working mother, lives with her husband and children
Goals
-
To minimize the energy in order food on a day to day basis, so they can do more tasks at home after work efficiently
-
Don’t want to spend too much money on the delivery fee
Frustrations
-
Finding food is time-consuming, when sometimes she just wants the exact food from last time
-
When the toddler successfully order take out on her app without her notice
“I just want to get the food thing done, so I can work on other things at home.”
About Monica
Monica is a working mother, she orders food from the takeout app every two or three days in the evening, so she can order a larger amount of food with free delivery fees for her family efficiently.
She feels very upset when she cannot order in a new restaurant recommended by her friend whenever the restaurant is closed or they have too many orders that they cannot take any orders.
Problem Statement: Monica is a working mom, who needs an easy-to-use food order app because cook after work is too energy draining.
Marketing Assistant
Ana | 27 yrs | Taiwan
Single, lives with parents
Goals
-
Wants to use the easiest way to order food in family gathering on weekend
-
wants the best quality in food delivery to make their family happy
-
To be an advocate of the brand’s value
-
Adventures in trying all the food recommendations from her friends and bloggers
Frustrations
-
Hard to order the right amount of food for a group
-
It is hard to switch credit card and delivery addresses easily
-
It is hard to find food that suits her family diet
“Family’s happiness is my first priority.”
About Ana
Ana is a marketing assistant and lives with her parents. They ask Ana to order takeout on weekends to take a break from cooking. Ana wants to make her family happy by having a good take-out experience, but order the right kind and amount of food for a group is time-consuming, and not being able to switch credit card and delivery addresses easily often frustrated Ana.
Problem Statement: Ana is a Marketing assistant, lives with her parents as a single, who needs a food order app easy for group orders for family gatherings on weekends.
Monica's User Journey
Goal: To minimize the energy in order food on a day-to-day basis, and have a good food experience.
Action
1.
Select Restaurant
2.
Submit orders
3.
Wait for the meal
4.
Receive the meal
Task List
A. Open app
B. Use filters to find restaurants
C. Click on the restaurant page
D. Read menu
E. Read the comments below
A. Order food items
B. Provide payment information
C. Submit orders
A. the app gives notification of submitted orders
B. the app provides the estimated arrival time
A. Food is delivered
B. Opens the door and picked up the takeout
C. Display it on the table
Pain Points
Frustrated in the effort she has to put up to find the items she ordered before
Fear the toddlers successfully order food without supervision.
Children might be hangry while waiting, which causes the parents to be even more annoyed
Emotion
Frustrated
Improvement
Provide the option to order meals from order history.
Worried
Provide an optional setting for users with toddlers, where they have to insert an extra password right before submitting their orders.
Annoyed
Make the button to schedule orders more obvious, so users can make their order ahead of time, thus be delivered on time
Happy
Ana's User Journey
Goal: Wants to use the easiest way to order food in a family gatherings on weekends with the best quality.
Action
Task List
Pain Points
Emotion
Improvement
1.
View recommendations
A. Click on the review page
B. Click on desired meal
C. Read food recommendations
Excited to take advantage of the family gathering opportunity to try new food
Excited
2.
Select restaurant
A. Use the filter to find a restaurant
B. Click on the restaurant page
C. Read menus
D. Read the comments below
Frustrated when spending too much time searching for the food that suites her diet preference
Frustrated
Provide advanced search engines and filters to find desired food more efficiently
3.
Collect orders
A. Communicate with family members for the food options
B. Collect orders from family
It is exhausting and time-consuming to order multiple dishes one by one
Exhausted
Provide more family combo with recommend number of people to enjoy
4.
Submit orders
A. Order food items
B. Provide payment information
C. Submit orders
Anxious and frustrated in not being able to switch and edit credit cards or delivery addresses successfully
Frustrated
Provide advanced order system, to switch credit card and address easily. Also before submitting their order, double confirm the usage of credit card and address
Competitive Analysis
Competitive analysis goal: compare the food ordering experience with each competitor's app.
Competitor Type
Direct
Direct
Product Offering
Food, Grocery, and Cosmetic Delivery
Food & Grocery Delivery
Indirect
Pizza Restaurant
Mostly for Delievery
Target Audience
Busy people to order food from the office and household with higher social status
Competitor's Strengths
1. Enterprise settings for group orders.
2. Able to save user's favorite restaurants
3. Simultaneous group orders options
4. Great user flow design and features that allow their target audience to complete their user goal smoothly
People who are adventures to try and enjoy different food
1. Encourage users to invite friends to become a member of the app to receive discount
2. Have a distinct page for discounts and deals
3. An exciting, informal, and humanized tone and wording
People who put up family, business, party gatherings
1. Provide family combo meals options for people to share as a group
2. none-membership delivery options
3. Customization options
4. Fast ordering options to order from the order history
Competitor's Weaknesses
1. Fewer categories and filters for user's diet preference
2. The pre-order button is not clear
3. A less humanized tone and wording
4. No features with audio or visual impairment
1. The layout and categories are confusing, some categories seem to be repetitive, too wordy
2. The pre-order button is not clear
3. no features with audio or visual impairment
1. The layout of the interface is a bit messy
2. Difficult to order meals at the beginning of user flow
3. The wording of bottoms is confusing
4. No features with audio or visual impairment
Gaps
UberEats, foodpanda, and Domino’s does not make the group order process easier and faster for the user who orders for a group, and no features with audio and visual impairment.
Oppurtunities
Provide a great food preference filter to precisely recommend the user’s favorite food for the user.
Users often order food delivery as a family or a group of people, therefore providing group order options, to order group combo according to the number of people who will dine together, diet preference, price preference, time preference, and the style of cuisine will help the users complete their goals easier and faster.
My Proposal: The User Flow
In the user flow I proposed, the users can order food in 5 ways, one is directly searching for the restaurant name for ordering, order within the sales section, order from a favorite restaurant, use a filter to find restaurant, and order from history.
(Please click on the following images to expand them.)
![Google UX Design Certificate - User flow [template]-4-2.png](https://static.wixstatic.com/media/619ffa_7c49d20418a44797859f462a718b78a8~mv2.png/v1/fill/w_596,h_335,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Google%20UX%20Design%20Certificate%20-%20User%20flow%20%5Btemplate%5D-4-2.png)
My Proposal: Storyboard
To showcase how the food delivery app with customization will solve the user problem in the setting of family dinners, I draw a storyboard to convey my ideas.
Monica is just got home from work, worries about how to put up a quick meal while her children are already hungry.
1.
3.
Monica clicks on the group order options and filled out her diet preference and the number of people to dine with.
5.
After Monica submitted her order, the real-time tracking map keeps her updated from the delivery process.
Monica opens the app.
2.
4.
The app gives Monica a list of recommended food combos, based on her prior selection.
6.
Monica receives her meal and enjoys it with her children and husband, worries-free and effortlessly.
- Design -
Sketching w/ Pen & Paper
Entering the design phase, I kept in mind everything I had collected so far - personas, their pain points, and the user flows. I started visualizing stuff by roughly sketching out concepts.
Home
My Preference
Diet Preference
Food Recommendation
Order Now or Order Ahead
Real-time Tracking
Digital Wireframe
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Home
My Preference
Diet Preference
Food Recommendation
Order Now or Order Ahead
Real-time Tracking
Usability study: findings & iterations
I conducted two rounds of usability studies, with 5 participants each remotely. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
1
Users are confused with the filters, wanted to be able to freely choose the filters options rather than fixed order
2
Users want a straightforward wording
3
Users wants to be able to change a few dishes in order from history page
Round 2 findings
1
Users find “order from filter” has too many pages
2
Users want to have filter in “order from favourites” and “order from history”
Iteration from Round 1
1. Early designs allowed for viewing the filters in a bird-eye view, but after the usability studies, I tried to make the app easier to use by creating a stepper at the top of the page, so the users can click on the different filters without a fixated user flow.
2. The users were confused in the wording of "schedule order", therefore I have changed the wording into "order ahead" to create a more distinct difference between the wording of "order now" and "order ahead".
3. Early design does not allow users to add more items, therefore I add the button " add more", so the users can click on it and go to the restaurant page to order more items.
Iteration from Round 2
1. The second usability study revealed the frustration of too many filter pages. So after the usability studies, I tried to make fewer pages by iterating the layout as an overlay page for the users. Therefore the users can feel fewer pages are required to complete in the filter.
2. Through filters, users may easily find their desired restaurant in their favorites restaurants and order history, especially when users add many restaurants as their favorites and have ordered multiple times. Therefore I add the filters in the pages of "my favorites restaurants' and "order from history".
Mockup
In this phase, my emphasis was put on visual consistency and how my interface and interaction could serve the core functionalities. Also, I challenged myself a little bit by using Android as the device.
Order from filters (ordering dishes)
Order from favourites (ordering dishes)
Order from history (ordering dishes)
Checkout Flow
Prototype
Check out the
High-fidelity Prototype
- Impact -
The app makes users excited to use this app in real life, which creates easy options to order food for a group of people.
One quote from user feedback
“ If this can really work, I would totally use this app, that would save a ton of time to find food online!’
- Next steps -
Usability Studies
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Merchant Account
Create a website or an app where merchants can be one of the stores in Familyfood+ by creating a merchant account.
Develop & Improve Functionalities
My design has touched on the issue of customization food by dietary preference, but by conduct interviews with merchants, may give us a clearer glance at the possibilities of customizations.
- What I learned -
User feedback
I have found out that users are clearly the best resource to improve the app, sometimes the most brilliant ideas and solutions are coming from the users, also a mutual theme does come out after conduct a usability study with multiple users, which provides a great guide for the iteration.
Seek inspirations
As an entry-level UX designer, there are times I wondered why my design is not as beautiful as the designs in Behance. So I studied the difference between my mockup with their mockups and found several design tips that can really make a difference.
The devil is in the detailes
Often the user feedback for improvements are the little things I have forgot along the way, including the feature of enabling GPS to find their current locations, so the users didn't have to retype their address every time they go to a new place, etc.
- Challenges & Constraints -
Because I am currently living in Taiwan, so all of my participants are my friends and family in Taiwan, therefore it can only be applied in Taiwan, rather than apply it internationally.
Also, this is the study that I did on my own, therefore I might have bias over the design since there were no stakeholders, fellow UX designers, and engineers to discuss and go through the possibilities of every idea with me.