top of page
Restaurant 'Small Italy'

Time reservation application

efefef.png
Rectangle.png

May - Sep 2021

B2C | Native application

Project overview

The product

'Small Italy' is a regional Italian restaurant located in Texas region. “Small Italy” strives to serve Italian food based on popular and healthy Naples recipes. They offer a wide spectrum of medium pricing. The target customers are families and couples, who want a healthy meal in cozy and stylish interiors.

Group 7.png

The problem

Not comfortable to call to the restaurant for reservation the date and table.

Group 5.png

My role

Lead UX designer of an app for restaurant 'Small Italy' from conception to delivery.

Group 6.png

The goal

Design an additional page of the app 'Small Italy' that allows users to easily check and reserve date, time, and table in the restaurant.

Vector.png

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the user

●  User research
●  Persona
●  Problem statement
●  User journey map

User research: summary

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified throw research was working adults who don’t have time to cook meals.
 
This user group confirmed initial assumptions about restaurant customers, but research also revealed that time was not the only factor limited users from eating in restaurant. Other user problems was picking up cozy place in restaurant, what they can’t make in advance.

Group 16.png

User research: pain points

1

Time

Working adults doesn’t want to spend time for telephone reservation the table for lunch or dinner meals

2

Forgetfulness

People forgeting about their date and time  reservation

Persona: Luisa H.

Problem statement

3

Cosy place

People want to know or pick in advance the place to seat in the restaurant

Luisa H. is a wife and mom of 2 children who needs an app to reserve date and time in a restaurant for dinner with all family because it is more comfortable to pick the time from the screen.

Group 2.png

User journey map

Mapping Luisa’s user journey revealed how helpful it would be for users to have online date and time reservation of the restaurant.

Persona: Luisa H.

Goal: To have a nice dinner with her family

Group 3.png
Starting the design

●  Paper wireframes
●  Digital wireframes & low-fidelity prototype
●  Usability studies
●  Digital wireframes changes

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.

Рисунок3.jpg
Рисунок4.jpg

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Digital wireframes & low-fidelity prototype

As the initial design phase continued, I made sure to base screen designs on feedback and findings from  the user research.

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected is building and ordering a pizza, so the prototype could be used in a usability study.

asfvasfb.JPG

Usability study: findings

Background

We’re creating a new function for the app: reservation date and table. We need to find out if the main user experience, picking the date, time, and place is easy for a user to complete.

Study details

Research Questions

  • How long does it take to reserve the table in the restaurant?

  • Are there any parts of the reserving process where users are getting stuck?

  • Is it comfortable to choose quantity of people for the table?

  • Is user getting notification after reservation?

  • Is user getting a reminder before the time reservation?

Participants

10 participants:

3 males between 25-70

3 females between 25-70

1 participant of assistive technologies

1 participant with a visual impairment

1 participant with an auditory impairment

1 participant who isn’t fluent in English

Methodology

25-30 minutes per participant

United States (remote)

Unmoderated usability study

Users were asked to perfom tasks in a low-fidelity prototype

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 a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

1

Users want to see Google maps in the final confirmation form

2

Users want to control the reminder time

3

Some of users want to have login function

Round 2 findings

1

Not so comfortable calendar for picking the date

2

Add more details final sceen and e-mail notification

Research insights

Users need more specific date picker, which will show days in the week

Calendar

Make reminder more clear with options of chooseing the time of the reminder

Reminder options

Show all information before final reservation

Pre-confirmation screen

Need to have Google maps in the last confirmation screen

Google maps

Digital wireframes changes

Calendar

Usability study showed that the best for user experience will be to split the main actions: choosing guest's quantity, pick date and time to 3 steps.

BEFORE

Рисунок2.png

AFTER

Рисунок3.png
Рисунок4.png
Рисунок5.png

Reminder option

Early designs allowed for some customization, but after the usability studies, I deleted the step, where user can choose the time for a reminder of the event in the pop up and changed it to a dropdown menu.

BEFORE

Рисунок6.png
Рисунок7.png

Pre-confirmation screen

Important to add a new screen with full information about reservation before final confirmation.

NEW SCREEN

Рисунок10.png

AFTER

Рисунок8.png

Google maps

The usability study showed that users would like google maps connected to the final screen with full information about the reservation.

BEFORE

Рисунок11.png

AFTER

Рисунок12.png
Refining the design

●  Mockups
●  High-fidelity prototype

●  Accessibility

Mockups

Colors

Primary

Group 99.png
Group 98.png

Secondary

Group 100.png
Group 101.png
Group 102.png

Typography

Group 103.png
Rectangle.png
Rectangle-2.png
Rectangle-1.png
Rectangle-5.png
Rectangle-4.png
Rectangle-3.png

High-fidelity prototype

Using the completed set of UI I created a high-fidelity prototype

xfhmxfgn.JPG

Accessibility

Used icons to
help make
navigation easier.

1

Provided access
to users who are vision impaired through adding alt text to images for screen readers.

2

© 2024 by Yulia Krepacheva

bottom of page