Restaurant 'Small Italy'
Time reservation application
![efefef.png](https://static.wixstatic.com/media/dc2ce4_929fae5dead94108b23fe2d38b9de5c0~mv2.png/v1/fill/w_606,h_541,al_c,q_95,enc_auto/efefef.png)
![Rectangle.png](https://static.wixstatic.com/media/dc2ce4_8f7d3d5abcff4b1e8273dd20d560f12e~mv2.png/v1/fill/w_613,h_548,al_c,q_95,enc_auto/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](https://static.wixstatic.com/media/dc2ce4_d2e439aced47466e949d5f16269ac591~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Group%207.png)
The problem
Not comfortable to call to the restaurant for reservation the date and table.
![Group 5.png](https://static.wixstatic.com/media/dc2ce4_0cf9f0670142480d820d703bd87d3dc9~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Group%205.png)
My role
Lead UX designer of an app for restaurant 'Small Italy' from conception to delivery.
![Group 6.png](https://static.wixstatic.com/media/dc2ce4_3695e727adc1446b8d861c1618b74e53~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Group%206.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](https://static.wixstatic.com/media/dc2ce4_2898808bdb494f2f9adcfe2e51d4d947~mv2.png/v1/fill/w_50,h_50,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/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](https://static.wixstatic.com/media/dc2ce4_3db55255dd324c20a7cbce9019f507a7~mv2.png/v1/fill/w_90,h_90,al_c,q_85,blur_3,enc_auto/Group%2016.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](https://static.wixstatic.com/media/dc2ce4_46e0414fc22f47ecb80519074f8855a4~mv2.png/v1/fill/w_86,h_44,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Group%202.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](https://static.wixstatic.com/media/dc2ce4_175085537e1a4a1e90ae7057ee09f86e~mv2.png/v1/crop/x_67,y_276,w_3402,h_1965/fill/w_46,h_26,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Group%203.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](https://static.wixstatic.com/media/dc2ce4_5c496ca78db542448a55f526a5d6d6c0~mv2.jpg/v1/fill/w_64,h_50,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA3.jpg)
![Рисунок4.jpg](https://static.wixstatic.com/media/dc2ce4_d4010d8726a243178f1b676173a55bf0~mv2.jpg/v1/crop/x_0,y_6,w_1029,h_786/fill/w_65,h_49,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA4.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](https://static.wixstatic.com/media/dc2ce4_087a8527473a40528afaaa1bd36d830d~mv2.jpg/v1/fill/w_147,h_34,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/asfvasfb_JPG.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](https://static.wixstatic.com/media/dc2ce4_098983fda4844683976e0784e31b55ad~mv2.png/v1/fill/w_178,h_380,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA2.png)
AFTER
![Рисунок3.png](https://static.wixstatic.com/media/dc2ce4_a91301390ae84d9f8f69233040b1b019~mv2.png/v1/fill/w_176,h_374,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA3.png)
![Рисунок4.png](https://static.wixstatic.com/media/dc2ce4_85c98f85fb9e477fa9a3a79679e11155~mv2.png/v1/fill/w_174,h_374,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA4.png)
![Рисунок5.png](https://static.wixstatic.com/media/dc2ce4_ed5d4540d0a54478b22b49a74a3e56c6~mv2.png/v1/fill/w_175,h_374,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA5.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](https://static.wixstatic.com/media/dc2ce4_a0a952517c8047b3ad0f4281559e157f~mv2.png/v1/fill/w_177,h_368,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA6.png)
![Рисунок7.png](https://static.wixstatic.com/media/dc2ce4_52e91608e64440f2870e54b2ca0c4a8d~mv2.png/v1/fill/w_177,h_368,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA7.png)
Pre-confirmation screen
Important to add a new screen with full information about reservation before final confirmation.
NEW SCREEN
![Рисунок10.png](https://static.wixstatic.com/media/dc2ce4_9276f15412974f0281b8ab7668ecbfa7~mv2.png/v1/fill/w_178,h_368,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA10.png)
AFTER
![Рисунок8.png](https://static.wixstatic.com/media/dc2ce4_2597527bf7f340739e7baa6b34afadba~mv2.png/v1/fill/w_177,h_366,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA8.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](https://static.wixstatic.com/media/dc2ce4_9d7c1ae6a8fb42d9b7fafc8a2d16b4dc~mv2.png/v1/fill/w_177,h_368,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA11.png)
AFTER
![Рисунок12.png](https://static.wixstatic.com/media/dc2ce4_b5f67c529fc74a90b294309d79bdfb8b~mv2.png/v1/fill/w_177,h_368,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/%D0%A0%D0%B8%D1%81%D1%83%D0%BD%D0%BE%D0%BA12.png)
Refining the design
● Mockups
● High-fidelity prototype
● Accessibility
Mockups
Colors
Primary
![Group 99.png](https://static.wixstatic.com/media/dc2ce4_630701cfcc844ccaa8444ce31eae8189~mv2.png/v1/fill/w_102,h_194,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Group%2099.png)
![Group 98.png](https://static.wixstatic.com/media/dc2ce4_1eef505304a54a3194dc641f34936584~mv2.png/v1/fill/w_102,h_194,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Group%2098.png)
Secondary
![Group 100.png](https://static.wixstatic.com/media/dc2ce4_2d24c32c636e4d74ac291fe42dbb6b83~mv2.png/v1/fill/w_102,h_194,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Group%20100.png)
![Group 101.png](https://static.wixstatic.com/media/dc2ce4_2c7a3a5875c0464995fc19dc37807925~mv2.png/v1/fill/w_102,h_194,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Group%20101.png)
![Group 102.png](https://static.wixstatic.com/media/dc2ce4_986f10c643a64401a36926f5d002eaf6~mv2.png/v1/fill/w_102,h_194,al_c,q_85,usm_0.66_1.00_0.01,blur_3,enc_auto/Group%20102.png)
Typography
![Group 103.png](https://static.wixstatic.com/media/dc2ce4_f9715eaf0ee04e7c8de9bbbebf0a0f08~mv2.png/v1/fill/w_78,h_49,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Group%20103.png)
![Rectangle.png](https://static.wixstatic.com/media/dc2ce4_6d5d7a5804f64378b6d101bd899470da~mv2.png/v1/fill/w_51,h_45,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Rectangle.png)
![Rectangle-2.png](https://static.wixstatic.com/media/dc2ce4_de7d97bb289a47f59189735c4b013984~mv2.png/v1/fill/w_50,h_45,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Rectangle-2.png)
![Rectangle-1.png](https://static.wixstatic.com/media/dc2ce4_994c909bff40415e97250dea5c0c08ca~mv2.png/v1/fill/w_50,h_45,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Rectangle-1.png)
![Rectangle-5.png](https://static.wixstatic.com/media/dc2ce4_3fcf2545d24547d28d74fba9e784ea23~mv2.png/v1/fill/w_50,h_45,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Rectangle-5.png)
![Rectangle-4.png](https://static.wixstatic.com/media/dc2ce4_fc93df907afa47fda0811eaf49436e7a~mv2.png/v1/fill/w_50,h_45,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Rectangle-4.png)
![Rectangle-3.png](https://static.wixstatic.com/media/dc2ce4_f685f34ab049430d8167b88b8f842a73~mv2.png/v1/fill/w_50,h_45,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/Rectangle-3.png)
High-fidelity prototype
Using the completed set of UI I created a high-fidelity prototype
![xfhmxfgn.JPG](https://static.wixstatic.com/media/dc2ce4_566d8cc567a54e7bbfbeef4b7b2da178~mv2.jpg/v1/fill/w_147,h_32,al_c,q_80,usm_0.66_1.00_0.01,blur_2,enc_auto/xfhmxfgn_JPG.jpg)