UX Design

Professor: Marco Catani
Team players: Rujuta Pande & Guiseppe Mete

UX Use Case

Redesign
of thefork

The process

brief research benchmarking brief brief brief brief brief brief brief brief brief final

Brief

Thefork is a restaurant booking application which offers discounts and other services related to your booking. The aim of the app is to involve the user in booking a table and to build a longterm relation with them. It should have an interactive user interface and it should be easy and quick to book a table. In this project our task is to define painpoints of thefork’s current application and find solutions of how we can improve, and finally design our proposals.

Research

Benchmarking

We looked at other similar applications to see where thefork is positioned on the market in comparison with them.

benchmarking
Statistics and trends

During our research we made a major analysis of painpoints in the app when testing it. We also searched for information regarding what the user expects from the app. What are people’s eating style in general? Is it essential with different requirements like lactose-free, vegan due to allergies or

During our research we made a major analysis of painpoints in the app when testing it. We also searched for information regarding what the user expects from the app. What are people’s eating style in general? Is it essential with different requirements like lactose-free, vegan due to allergies or other reasons? And lastly, we had a workshop to comprehend all our findings and set a priority to them. By analyzing trends we found out what content the users want to focus on and what areas that could be of extra service.

other reasons? And lastly, we had a workshop to comprehend all our findings and set a priority to them. By analyzing trends we found out what content the users want to focus on and what areas that could be of extra service.

allergies allergies allergies
Online questionaire

To find out what people prefer seeing in an app and what the users’ needs are we created a questionaire which we sent out to several friends, and frend’s of friends, trying to reach out to as many people as possible.

allergies

Personas

In order to understand and visualize different point of views and interest from a potential audience we created three personas.

persona one

Martini

Special requirements

About
Martini likes to use online booking restaurants apps. However, she is lactose intollarent and prefer in generall that different allergy considerations are present in the app as their is often some allergies in a group of people going out for dinner.

Painpoints
When using thefork she finds it hard to set the filter to aid in the search of restaurants providing allergy friendly options. It is very hard to find the filters for this purpose, especially for mobile.

persona two

Carlos

Businesss traveller

About
As Carlos travells a lot and have a tight schedule when doing so, it's important for him to know if the app work in the destinated area.

Painpoints
When he tries to search for restaurants outside the scope of the fork’s area the feedback to the user is lacking. It is possible to search for these cities but the user get no hits and the feedback is misleading.

persona three

Joe

Common User

About
Joe often goes out to eat with friends and collegues. He doesn't have any requirements outside the ordinary flow but would like to pay as little as possible and to book table quickly. He wants to find the best value for the money immediately, preferribly using discount. He does not want to login to the application and provide personal details.

Painpoints
The information in the app is not user adjusted, and even though Joe is using it a lot he needs to provide the app with the same information multiple times. He needs ot look for the discounts nearby with multiple clicks.

Insights

  • User interaction with proper feedback missing
  • Booking flow is too complicated and long
  • Online payment not present
  • Have to ask waiter for discount explicitly
  • Booking was not updated to restaurant even after booking
  • Hard to find for filters for restaurants immediately

Ideating & Workshops

As a team we wrote down on notes ideas of opportunities and potential solutions. When done we placed all the notes on a tabel and started grouping them into different

As a team we wrote down on notes ideas of opportunities and potential solutions. When done we placed all the notes on a tabel and started grouping them into different categories. In this way we could easily select which groups we thought was more important and which we chose to continue with.

categories. In this way we could easily select which groups we thought was more important and which we chose to continue with.

allergies allergies allergies

Solution proposal

In order to improve and optimize the UX of thefork mobile app we found the following flows and pages to be the most important.

  • Home/Start page for new users
  • Quick search using filters
  • Booking without registration
  • Payment through the app
  • Personalized account

User flows

Booking without logging in

table research

Payment by app

table research

Personalize profile

table research

Specifications

Plotting out the flows made us realize that some pages needed extra attenction and its functionalities and specifications were needed.

specifications

1st stage of Prototyping

Creating an account

prototype prototype prototype prototype prototype prototype prototype prototype prototype

Creating an account

prototype prototype prototype prototype prototype prototype

Booking a table

prototype prototype prototype prototype prototype prototype prototype

2nd stage of Prototyping

Restaurant page, Search & filters 1, Search & filters 2

prototype prototype prototype

Visual design

Colours
For colours we decided to stay with there current green, which makes the brand stand out and is easily recognized by thefork's users. And as supportive colours white and black, but staying away from the #ffffff and #000000 as these are not optimal for screens.

#508246

#F7F5F4

#202124

Typography

Icons

Final Prototypes

Userflows
In these three videos, you'll see the below listed main flows.
From the left:
1. Start page for a non-member user
2. Booking a table
3. Creating my account

startpage startpage startpage
User flow 1:
Start page for non-members
booking flow booking flow booking flow booking flow booking flow booking flow booking flow
User flow 2:
Booking a table
startpage startpage startpage startpage startpage startpage startpage
User flow 3:
Creating an account
Back to top