Case study Sakshi Chaudhari
Project overview
The product: NowEat is a restaurant booking app. It helps users quickly find restaurants near them, get information about the selected restaurant, explore their menu.
Project duration: 6 weeks
Project overview
The problem:
The goal:
It takes lot of time to find out if the restaurant
To create not just a booking app but also
has a vacant table, also it wastes time by
include some more simple and useful features
looking for a suitable restaurant, cannot find
that will help the users explore more about a
cost of dishes, diners have to wait in long
certain restaurant easily complete tasks and
queues in order to dine. These issues are
reach their goals.
becoming a common scenario in many popular restaurants in the city.
Project overview
My role:
Responsibilities:
UX designer designing an app for fancy
Conducting interviews, paper and digital
restaurant booking
wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for
accessibility and iterating on designs.
Understanding the user
●
Research and analysis
●
User research
●
Personas
●
Problem statements
●
User journey maps
Research and analysis • Interview goals:
• Target participant characteristics:
I want to understand common challenges people face in the
Ages 18-62
restaurant booking process
Lives in metropolitan or suburban area
I want to identify frustrations & pain points people experience
People who visit restaurants at least twice a month
during the process of booking a restaurant
Include participants with different genders Include participants with different abilities
Interview questions: • How often do you order meals from a restaurant?
Key Insights
• What challenges do you face in the booking process? How does
• Most participants claim to have pain points mostly
this make you feel?
• What challenges do you usually face in the dishes choosing, reviewing and payment process? How does this make you feel? • Is there any way in which you feel these challenges could be resolved?
when finding seats, choosing dishes and about payment
process • Participants get together with friends, family or peers to the restaurants on average 3-4 times • Needed a food recommendation platform or some
reviews from other customers
Interview transcript Interview goals: I want to understand common challenges people face in the restaurant booking process I want to identify frustrations & pain points people experience during the process of booking a restaurant
Empathy map Now that I’ve reviewed the interview transcript, the next step was to build an empathy map. This empathy map breaks down all the points that I will need to determine how my app can meet Avinash’s needs.
Persona: Avinash Deshmukh
Problem statement: Avinash is a busy working adult who needs quickly nearby restaurant and available table for dinner because it wastes lot
of time by looking for a suitable restaurant and sometimes table aren’t available
User story To understand my users user story was build around their experiences with product. Fictional one-sentence user story told from the persona’s point of view helped me to inspire and inform design decisions.
User journey map Mapping Avinash’s user
ACTION
TASK LIST
journey revealed how helpful it would be for users to have access to a dedicated restaurant booking app.
FEELING ADJECTIVE
IMPROVEME NT OPPORTUNIT IES
Awareness
Browsing
Searching
Restaurant
Booking
Tasks
Tasks
Tasks
Tasks
Tasks
A. Don’t have time to cook food B. Plan to eat out for weekend C. Come to an agreement with the group of people going for dinner
A. Searches appropriate restaurant booking app B. Ask friends to suggest better option C. Browse the app and looking for restaurants
A.
Find restaurant s nearby B. Uses filter for better option
A. Read reviews, information and watch photos of selected restaurant B. Goes through the menu C. Decides on food and order
A. Search & book a table B. Add group of people whith whom going for dinner C. Make a payment and get QR code
User emotions Curious Hungry
User emotions Curious Excited
User emotions Impatient Restless
User emotions Pleased Excited
User emotions Satisfied Relieved
Better wayfinding
Better browsing options
Suitable restaurants around me
Menu options Reviews of restaurant
Able to book a table for as many as people you want
Problem Statement After building user journey map problem statement was build which defines who the user is and what their needs and motivations are. Problem statements provided clarity about your users’ goals and help me to identify constraints that prevent users from meeting those goals. Avinash is the user name. Their user characteristic is that they are a busy working adult. The user need is that they need quickly nearby restaurant and available table for dinner. Avinash’s insight, or why they have the need, is that it wastes lot of time by looking for a suitable restaurant and sometimes table aren’t available.
User research: summary
I conducted interviews, created empathy maps, user story to understand the users I’m designing for and their needs. A primary user group identified through research was adults between 20-40 age group.
This user group confirmed initial assumptions about restaurant booking customers, but research also revealed that time was not only factor limiting users from finding vacant table in restaurant. Other user problems included also it wastes time by looking for a suitable restaurant, cannot find cost of dishes, diners have to wait in long queues in order to dine.
User research: pain points
1
2
3
Pain point
Pain point
Pain point
Wastes time by looking for a suitable restaurant
Cannot find cost of dishes
Cannot find if the restaurant has vacant table
Competative Audit UX (rated: needs work, okay, good, or outstanding)
General information First impressions
Interaction
Content
Visual design Competit Location( Product or type s) offering (direct or indirect)
Direct
Direct
India
India
Indirect India
Indirect
Price ($ - Website $$$$ (URL) )
Restaurant $ booking
Table booking
Food ordering
India, Food Australia shopping
$$
$$$
$$
Business size Target Unique value (small, audience proposition medium, large)
https://www.dine Small out.co.in/
Everyone
"A place for everyone"
https://eatigo.co "Table for Medium Families m/ families"
https://www.zom Large ato.com
https://shupple.c Small om/
Everyone
Families
"Food for everyone"
"Food shop for families"
Desktop website experience
App or mobile website Features experience
Accessibility
User flow
Navigation
Brand identity
Tone
Good Okay Outstanding Needs work Outstanding Good Needs work Friendly and + Simple to navigate + Easy to use + Detailed tracker with - Only available in + Straightforward user + Buttons are clearly - Minimal brand informative - Minimal features and + Lots of intuitive live updates English flow marked identity visuals features + One-click payment - No features for audio + Order and payment + Easy to switch - App is simple - App doesn't offer or visual impairments processes are simple, locations - Only uses two colors any audio accessibility clear, and efficient - App sections are not - App is only available defined by color in English Good Good Okay Outstanding Needs work Okay Outstanding Friendly and formal + Visually appealing + Visually appealing + Group order option + Available in five - Payment process is + Easy to switch + Clear brand identity, + Makes customers + Makes customers + Order filter feature languages repetitive and languages including colors, font, feel welcome feel welcome - Simple, unreliable + Audio available for frustrating - Some elements style, motion, - Navigation is + Accessibility-friendly delivery tracker entire menu - Difficult to find key seem clickable but are imagery, and complicated - Payment process is + Integrated with info (menu, location, not photography difficult to complete voice assistant hours) technology Good Okay Outstanding Needs work Outstanding Good Needs work Friendly and + Simple to navigate + Easy to use + Detailed tracker with - Only available in + Straightforward user + Buttons are clearly - Minimal brand descriptive - Minimal features and + Lots of intuitive live updates English flow marked identity visuals features + One-click payment - No features for audio + Order and payment + Easy to switch - App is simple - App doesn't offer or visual impairments processes are simple, locations - Only uses two colors any audio accessibility clear, and efficient - App sections are not - App is only available defined by color other languages Okay Outstanding Good Good Needs work Okay Outstanding Friendly and formal + Visually appealing + Visually appealing + Group order option + Available in five - Payment process is + Easy to switch + Clear brand identity, + Makes customers + Makes customers + Order filter feature languages repetitive and languages including colors, font, feel welcome feel welcome - Simple, unreliable + Audio available for frustrating - Some elements style, motion, - Navigation is + Accessibility-friendly delivery tracker entire menu - Difficult to find key seem clickable but are imagery, and complicated - Payment process is + Integrated with info (menu, location, not photography difficult to complete voice assistant hours) + Easy to switch technology languages - Some elements seem clickable but are not
Descriptiveness
Outstanding + Short and to the point + Focused on info relevant to target audience
Okay + Focused on info relevant to target audience - Wordy - Unnecessary details
Outstanding + Short and to the point + Focused on info relevant to target audience
Okay + Focused on info relevant to target audience - Wordy - Unnecessary details
Other Competitors Open Table
Yelp
Strength • International location • Avoid long waits • Availability at the restaurant without committing to a special time
Strength • Visually appealing • Low costs • Content generated by users
Weakness • Not easy to navigate • System is not really understood
Weakness • Navigation is complicated • Difficult to find key info (menu, location, hours) • Customers have limited budget
Competative Audit Report
Goal Statement • Identified the product as an app that will be created • Defined the action the product lets
people perform, which is placing group orders in advance • Indicated who the action will affect, which are people who need to book restaurant • Described how the action will affect them, by letting users explore more
about a certain restaurant & easily complete tasks & reach their goals • Defined how the app’s effectiveness will be measured, by analysing the
number of daily & weekly bookings
Outlining user flow This user flow provides: •
A clear and easy flow for users to get from the entry point of opening the app, to task completion of an order confirmation.
•
Clearly labelled steps that are each represented by the appropriate shape.
•
Lines with arrows connecting all the steps of the user flow.
Big picture storyboard Big picture storyboard was created by
focusing on what the user needs, their context, and why the product will be useful to the user.
Close-up storyboard Close-up storyboard help me to understand that how concentrate on the product and how it works
Information architecture Information was clearly organized and sorted, so users can successfully experience and interact with the app
Starting the design
●
Paper wireframes
●
Digital wireframes
●
Low-fidelity prototype
●
Usability studies
Paper wireframes Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home
screen, I prioritized a quick and easy ordering process to help users save time.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital wireframes As the initial design phase continued, I made sure to
The user can immediately see popular categories, nearby restaurants and this week’s highly rated dishes
base screen designs on feedback and findings from the user research.
This button provides an easy option, on this screen you can find all the info you need of restaurant.
Digital wireframes The user can book a table simply by choosing a free table, indicating the date, time and number of people. After completing the booking, the user receives a
QR code.
Easy to select details and book a table.
Gestalt Principles in wireframes By keeping these 3 concepts -
Similarity, proximity, and common region I designed wireframes
Low-fidelity prototype The low-fidelity prototype connected the primary user flow
of booking a restaurant, so the prototype could be used in a usability study with users. View the prototype: here
UX research plan With a well-crafted methodology,
UX research study plan helped me to understand research deliverables, define user needs and Ensure data and design quality Usability study here
Usability study: findings I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used the high-fidelity prototype and revealed what aspects of the mockups needed refining. Round 1 findings
Round 2 findings
1
Users need more details on pick a table page
1
Users needs more detail and add N/A on tables which are not available on pick a table screen.
2
Users need apply coupon option & more payment options to proceed.
2
Users needs add call to action button to allow users to add more items if they would like to.
3
Users need a way to find offers & deals and a QR code scanner in the app. Need to change word select a slot to avoid confusion
3
Users need order a meal option at end of table booking process screen
Sticker sheet
Refining the design
●
Mockups
●
High-fidelity prototype
●
Accessibility
Mockups Early users had trouble, they needed more option & service to pick a table. I added available & N/A option was added. Customer can choose where they want to sit. Number & alphabets were added on table. Special arrangenment can be made for customers
Before usability study
After usability study
Mockups The second usability study revealed frustration with adding items. I added button to allow users to add more items if they would like to.
Before usability study
After usability study
Mockups – Splash screens
Mockups
Mockups
High-fidelity prototype The final high-fidelity prototype presented cleaner user flows for
booking restaurant, order a meal and complete checkout process. View high-fidelity prototype here
Accessibility considerations 1
2
Used icon to help make navigation easier.
Used detail table icon and mention numbers, alphabet & N/A option on pick a table page to help all users better understand the design.
3 Used detail imagery of food in menu page.
Going forward
●
Takeaways
●
Next steps
Takeaways
Impact:
What I learned:
The app makes user feel like NowEat really
While designing app I learned many new things
thinks about how to meet their needs.
and got to know the ux process. Usability studies and feedbacks influenced and helped
me to iterate on designs of app.
Next steps 1
2
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Let’s connect!
Thank you for your time reviewing my work on the restaurant booking app! If you’d like to see more or get in touch, contact information is provided below. Email: sakshirchaudhari@gmail.com
Thank you!