Menu and Ordering App for a Family Restaurant
Creating an app with informative menus and comprehensive customization to meet different user needs
Product
Mobile app
Time
June 2022 - August 2022
My Role
UX Researcher & Designer
Methods
Journey Mapping, User Interviews, User Persona, Competitive Analysis, (un) Moderated Usability Studies, Prototyping
Brief
This is an independent project that I completed as part of the Google UX design certificate. I chose this random prompt because I was personally frustrated with my online food ordering experience. I practiced the skills from the course to understand user behaviors and needs to create this menu and ordering app.
Probelm
How might we help customers with different ordering and dietary needs to easily order food online?
Goals
-
Provide people with better information on the menu items
-
Assist people with decidophobia to make food choices faster
-
Allow people to customize their food to meet their dietary needs
-
Help people track their orders in real-time
Solution
User Research
I first interviewed two participants (one female and one male) using convenient sampling to understand people's online food ordering processes and challenges. The participants were screened to order food online at least once a week. One of them is single and the other has a family to take care of. This helped me create user journeys and personas to identify specific user pain points and ideate design opportunities.
User Journey
User Persona
User Painpoints
-
Both participants reported that it is often hard for them to make choices or order online when only limited information about the food is available
-
Both revealed that their unmet special needs (diet control and allergy) deter ordering behaviors
-
Both highlighted the need for accurate delivery time and the participant with a family stressed delivery safety
-
One mentioned that making choices is difficult
-
One mentioned that money saving is a big incentive
Design Opportunities
-
Detailed descriptions and illustrations
-
Provide ingredients and nutritional values
-
Customization with "leave a note" space
-
Personalized notification (allergy/preference)
-
Live track delivery with driver information
-
Food recommendation
-
Daily discounted specials
-
Reward program
Competitive Analysis: identifying space for improvement
I also conducted a competitive analysis of 3 local restaurants' mobile and web offerings. An evaluation of the first impressions, interaction, visual design, and content helps me identify the following gaps:
-
Most don’t have branding visuals and stories
-
Most don’t offer food customization
-
Most lack food pictures and detailed description
-
All of them are not equipped with in-store reservation
-
All of them do not have a reward or motivation system
-
All of their designs do not take accessibility into consideration
Ideation
User Flow
Lo-fi Prototype
Usability Testing
I conducted 5 unmoderated usability studies at the lo-fi stage to identify conceptual flaws at an early stage, and 5 moderated usability studies to gain in-depth insights to finalize the design. Qualitative data such as feedback and observation were analyzed with affinity mapping and entries were color-coded to represent the level of priority. I also included 3 key performance indexes (KPIs) to measure the success of the design. Together, this information helped me address issues in the visual layouts and device responsiveness as well as improve the user flow.
Lo-fi Testing Affinity Diagram
Hi-fi Testing Affinity Diagram
89
/100
Lo-fi Testing
96
/100
Hi-fi Testing
Improvement
Task 1:
Users reported that the user interfaces are too heavy and and call-to-action buttons are too small.
I adjusted the visual layouts by 1) reducing unnecessary information and components, 2) adjust font styles and size, and 3) enlarge action buttons.
Leaner Interface
Task 2:
The "allergy and preference" features were hard to notice. Users also wanted to add items directly without viewing the item page.
I adopted larger and more intuitive icons and added an additional feature to meet users' ordering behaviors.
Menu Feature and Order Flow
Task 3:
Several users found the "+" and "cart" icon to be confusing and have difficulty adding items. Some also thought of the descriptive tags as buttons.
I changed the button style by using descriptive texts and removed ambiguous buttons.
Add Item and Cart
Task 4:
Some participants thought the cart page is too overwhelming.
I seperate review order and payment into 2 separate steps to improve the checkout flow.
Easier Checkout
Task 5:
Users reported that they are afraid of accidently clicking "confirm delivery" button. They also cared more about the delivery progress on top of other information.
I redesign the order tracker to highlight order status and seperate action buttons to avoid unwanted misclicks.
Order Tracker
Reflection
This is my first time developing a mobile app independently. Being the only decision maker on the project, I found it crucial to incorporate research evidence from previous stages or sources when indecisive about how to deal with new feedback. This project helped me learn that "less is more" in UX design greatly challenged my skills to create a clean UI and seamless UX.