Dine In

type
UI/UX Design
Mobile
INDUSTRY
Hospitality
YEAR
October 2022
tools
Overview

There is an app for everything these days, and restaurant reservations are no exception. Gone are the days of calling to book a table as most people expect tasks to be done seamlessly through a phone or computer. However, what if you are looking to book a more private table for a romantic date or a more central table for a celebration?

How can we give users more control over their dining experience?
?

Problem Statement

It can be difficult to get the exact seating arrangement for what you've planned

Hypothesis

With a graphical representation of a restaurant layout, we can allow users to see and select available tables to get the desired seating of their choice

Research

I began the project by coming up with some key research goals that would help me empathize with users:

1

How users interact with restaurant reservation apps

2

How users decide on a restaurant

3

User demand for choosing your own table when dining

4

Determine user goals, difficulties, and interests

Competitive Analysis

I conducted a competitive analysis to see what the competition does well and what areas can be improved upon.

Secondary research

I reviewed existing studies on online reservation systems in order to fully understand the potential they can have for improving user needs. Secondary research was also conducted by reviewing information from related articles and case studies to further identify industry trends and user expectations.

Interview & Survey

I conducted an online interview and survey about restaurant booking habits. Based on my target audience, I interviewed participants who enjoyed dining out, travelled often, and lived in metropolitan areas.

70%

Users who have a restaurant in mind when making a reservation

71%

Users who want to be able to select their desired table when booking a reservation

75%

Users who drive their car to a reservation

72%

Users who like to keep track of places they have eaten at

Project Goals

I outlined the main goals of the project based on the research findings.

1

Allow users to choose their desired table every time they dine out

2

Allow users to make a reservation quickly and easily

3

Provide an easy way to see nearby parking of restaurants

4

Enable the discovery and sharing of restaurants

GOAL STATEMENT

Dine In will allow users to select their own desired seating of choice at restaurants which will make booking reservations easier and save time for both sides.

Value propositions

Personas

I have created a user personas from my research findings that would represent archetypes for decision making and development of the design.

User Flow

I created a flow to illustrate the quickest way a user would make a reservation using the app.
I created more user flows for different scenarios that could occur when a user is interacting with the app to make a reservation; booking a reservation at a favourite restaurant for a special date, looking up a restaurant the user read about, deciding on a reservation based on a specific cuisine, and browsing for nearby restaurants based on the user's area.
SCENARIO 1
It’s Wednesday evening and David wants to set up a dinner date for Saturday. He wants to take his date to his favorite steakhouse in the city, so he reserves a table for Saturday night.
SCENARIO 2
David wants to try out a top rated restaurant that he read about in a busy area he is unfamiliar with. He searches for the restaurant to read about their parking information before reserving a table.
SCENARIO 3
David and some coworkers want to have some dinner and drinks after their meeting in a new city. They are in some mood for Mexican but are not familiar with the area so they decide to open the app and filter by the top rated Mexican restaurants in the area.
SCENARIO 4
David finished his workout Saturday morning and wants to grab lunch with a few friends. He is not sure where to go but wants to see what is available in his neighborhood.

Information Architecture

Once the main user flow was established I created the information architecture of the app. This allowed for a visual display of hierarchy and clear organization of the content.

CONSIDERATIONS

I found several considerations to take into account with designing a graphical restaurant layout:
I tried to solve these problems by creating different types of seating on a screen with horizontal scrolling. I also included an expand and help option to enlarge the layout and provide information on the different states and types of seating arrangements available

Sketches & Wireframes

Once the key elements were defined I began to create sketches of different versions of page layouts of the app.

sketches | Home PAGE

sketches | TABLE SELECTION PAGE

wireframes

Branding

I wanted the brand to convey classiness and creativity in order to create a good dining experience. I wanted a bit of a challenge and to have fun with this personal project, so I opted to not use any obvious color schemes. I went with gold and purple to bring out feelings of fine dining and a good time.

MOODBOARD

Color palette

TYPOGRAPHY

Design System

I created a design system of various components that may be required based on the wireframes to optimize the design of the app. Some of these components include the table selection system created to help users select their desired seating and restaurant cards that display information to help users make a reservation seamlessly.

Button components

The button component facilitates reservation bookings; to enhance its usability in cards, I added a label to signify the corresponding experience state.

FIELD INPUT components

I created different states for field input components to make them more dynamic and responsive to user actions and to address accessibility concerns.

Card components

The significance of the design and layout of the restaurant cards was paramount, as these elements serve as the primary means for users to glean crucial information, greatly influencing their overall experience.
In response to the findings from secondary research, I strategically incorporated a menu button on the primary restaurant card, recognizing the pivotal role menus play in attracting customers.

SEATING SYSTEM

There are four types of seating in the reservation seating system:
  • Active
  • Available
  • Occupied
  • Unavailable
There are four states for seating in the reservation seating system:
  • Booth
  • Bench
  • Round
  • Regular
Each type of seating can be configured to two, three, or four people seating. Each type of table can be configured to two, four, six, or eight seating. Each type of seating consists of a bench seat with a size set at 16px by 16px. This bench seat can also be used as an individual seat for areas such as a bar.

UI Design

All the elements are combined to create a high-fidelity prototype.

HIGH-FIDELITY

Usability Testing

I conducted a usability study using the high-fidelity prototypes. I wanted to find out if the main user experience of finding a restaurant and booking a table is easy to complete. I also wanted to know if the additional features are well implemented for helping users find their desired restaurant reservation. Research goals were:

0%

Users who used the hamburger menu when making a reservation

100%

Users who successfully made a reservation

100%

Users who made a reservation under 5 minutes

80%

Users who found the parking information helpful

80%

Users who found adding a review or photo to be easy

100%

Users who want to see the parking information before confirming the reservation
I made a few changes based on the results from the usability testing.

Latest Prototype

Takeaways

The research conducted for this case study has provided valuable insights into creating a seamless and delightful dining experience for users.

One of the key learnings is the significance of a user-friendly and intuitive interface. By simplifying the reservation process and reducing the number of steps required, we can enhance user satisfaction and encourage higher conversion rates.

There can still be more areas of growth for restaurant reservation apps. Additional features to be implemented down the line include: