Case Study - Restaurant Booking App (Google UX Design Specialization)

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!