CASE STUDY - HOTEL PRICE COMPARISON WEBSITE

FLORENCIA LOPEZ

SMARP HOTEL PRICE COMPARISON WEBSITE

TABLE OF CONTENT

TABLE OF CONTENTS

01 02 03 04 SMARP | FEBRUARY, 2020

TASK BACKGROUND PRELIMINARY RESEARCH BENCHMARK

PRODUCT DEFINITION

05 06 07 08

USER FLOW SKETCHES LOW-FI WIREFRAMES

MOCKUPS

2

TASK BACKGROUND

TASK BACKGROUND

RE-BRIEFING Design a price comparison website for hotels in the world.

The deliverables must include:

WHAT WOULD I DO:

• Online research about user behaviour when interacting with these websites • Analyse the competitors to identify their

●

low fidelity wireframes of the website,

●

a high fidelity mockup of the homepage,

●

a user flow that explains how the users will conduct the

• Data synthesis

major tasks

• Propose and ideate solutions for the found

Duration: 3 days

approach on similar conditions

opportunities • Feature prioritisation • Establish the user flow • Generate low fi wireframes and a hi-fi mockup of the home page.

SMARP | FEBRUARY, 2020

4

TASK BACKGROUND

THE METHOD

This framework will allow me to keep in track my efforts and bring tangible results. Some of the steps had been reduced to achieve the time goal.

SMARP | FEBRUARY, 2020

5

PRELIMINARY RESEARCH

PRELIMINARY RESEARCH

UNDERSTANDING THE CONTEXT

Price comparison sites have no products to sell, they

Vacations have become fundamental for our way of life, so

merely act as a intermediary for other brands and

some people consider the exploration an opportunity to

residences owners.

daydream and pre-feel the destination.

Considering this, the user experience should be massively

But in some other cases, the overwhelming amount of

important to their business model as it’s the only way they

decisions makes the process over complicated and

can dierentiate from all the others sites who can provide

frustrating, especially for those who need to make a quick

the same service.

decision, either by short work travels or unplanned trips.

SMARP | FEBRUARY, 2020

7

PRELIMINARY RESEARCH

UNDERSTANDING THE CONTEXT According to a study conducted by Google, on average 60% of travelers are turning to search engines first vs. hotel

●

Hidden prices – 28%

●

No reviews – 24%

●

Complicated or lengthy booking forms – 13%

●

No photos – 16%

Compare prices on your website versus online

●

A site that isn’t mobile friendly – 13%

travel agencies.

●

Long page loads – 5%

Get more information about the hotel, like extra

●

Over 80% of consumers abandon their reservation

website to plan their online trips. This means that when a user visits an hotel website, they have already done some sort of research. Now, they want to: ● ●

services, more photos, videos. ●

Top Turn-Offs When Booking a Hotel Online

because of lengthy and complicated forms.

Check to see if there are any special deals or package offers for selected dates.

●

Contact the hotel directly to arrange for custom requests or direct bookings.

SMARP | FEBRUARY, 2020

* According to a study conducted by Google

8

PRELIMINARY RESEARCH

UNDERSTANDING THE CONTEXT

After only research and user inquires, I found out that the

To view photos easily is also very important. But users don't

location is important for users so they use map features

want to have too much detailed info at one time which will

often. However, users aren't really satisfied with the map

distract them.

feature of current hotel search tools. The priority for them is first location and price, then user rating and then conditions. The hotel star ratings are not that important.

“It would be great if the map shows the surroundings or attractions to help me make decisions.”

* Information taken from online research and user inquires

SMARP | FEBRUARY, 2020

9

PRELIMINARY RESEARCH

SCENARIOS

* Information taken from online research and user inquires

SMARP | FEBRUARY, 2020

10

USER FEEDBACK

PROTO PERSONAS

SMARP | FEBRUARY, 2020

11

”

INITIAL HYPOTHESIS

Regardless from everyone’s socioeconomic status, users don’t like feeling like we’re wasting money so they go on the Internet to look up information and compare and contrast possible destinations where they can get the most out their money but with the less hassle possible.

SMARP | FEBRUARY, 2020

12

BENCHMARK

BENCHMARK

Airbnb

BENCHMARK

Google Travel

BENCHMARK

Trivago

OBSERVATIONS • Almost all devices are log in a Google account • Trivago requires you select a destination • Their all have clear copies describing what they do • Although with more or less steps, their all have a clear goal: SEARCH • Airbnb and Google Travel are the most optimized applications in terms of number of steps to achieve a goal, their simplicity and arrangement of information.

OBSERVATIONS • Trivago has unnecessary whitespace that doesn’t fix with the content • Trivago search fields are not so clearly distinguishable • Google illustration and Airbnb look and feel leave Trivago very low on aesthetics.

• Airbnb palette is modern and pleasant, as well as Google Travel. Trivago uses too many colors that are not reflected in a clear brand strategy

OBSERVATIONS • Airbnb is the site with the best design, making good use of space and hierarchies allowing a good navigation even when the information displayed is too large.

• Airbnb has an appropriate use of language, thought for the user, but it exceeds in content and displays it badly.

• The rest has a neutral tone, but shows it correctly and structures it well.

BENCHMARK

Pleasant design, with clear focus on it’s users.

Good balance of white space and

Minimalist design, few steps to login.

The content is well defined and easy to

Goal orientated and a pleasant balance of information.

explore.

elements.

The description of the properties contain much information in an unclear order.

Could improve it’s visual design

The language used is neutral and does not focus on any type of user.

Its aesthetics can feel cold and impersonal.

PRODUCT DEFINITION

�

ELEVATOR PITCH

Create a trustworthy site that let the user explore and choose the better option for their travelling needs, interests and budget.

SMARP | FEBRUARY, 2020

22

PRODUCT DEFINITION

KEY FUNCTIONALITIES

1.

Mobile First. Create a clear interface that also has an optimal performance on mobile devices.

2.

Customize. Choose language and currency.

7.

Make it easy. Results should be clean and the copy short and easy to digest.

Focus on search box. No clutter and little to distract the user from the end goal of finding a hotel.

3.

6.

8.

Visual Appeal. Visitors need to the site see a website with great photography and simple, clear design.

Clear hierarchy. Optimize the legibility and prioritize the key elements for the user.

9.

Reviews. It’s important that people can book knowing that

4.

Exploration. Many people will have a specific date range and

the host is reliable and the apartment or house is as

destination in mind, but others may be more flexible.

described.

5.

Flexibility. Make it easier to switch between the list view and map view.

SMARP | FEBRUARY, 2020

10. Trusted checkout: The users will be redirected to their prefered website to finish the reservation.

23

PRODUCT DEFINITION

MVP

NEXT ITERATIONS

●

Search. No mandatory fields

●

Explore destinations. Explore top accommodations by city.

●

●

●

Suggest activities and tours. Suggest popular activities in the surrounding areas.

●

Suggest additional services. Such as car rental, travel insurance, etc.

●

Destination guide. Provide more info and cultural insights about the destinations.

Share favourites. Create a travel list, and share your favourites for second opinions

Book from the platform. When possible, don’t be redirected to another site.

Compare prices. Choose the price that best accommodates to the user’s budget

●

●

Explore surroundings. Connected with google maps, will display the most relevant attractions near

Host. Give the user the chance to include they places as options.

Refine search. Use filters to search by price, services and type or property.

●

●

●

Compare amenities. Choose two or more properties and compare details.

SMARP | FEBRUARY, 2020

24

USER FLOW

USER FLOW

FROM THE HOMEPAGE TO FILL PERSONAL INFORMATION Full resolution

SMARP | FEBRUARY, 2020

26

SKETCHES

WIREFRAMES

HOME

DISCOVER

SEARCH RESULTS

FILTERS

DETAIL & FAVOURITES

SETTINGS & LOG IN

WIREFRAMES

HOME

WIREFRAMES

1

2 1 Menu

Provides access to login and settings like language and currency

2 Hero image

Presents the page to the user

3

3 Search criteria

User can opt to ďŹ ll them or click on search and explore destinations and accommodations.

They can also search by one value at a time, such as date or destination.

4 Discover places

We give the user the chance to explore destinations, suggesting some countries where they can browse for the best accommodations or use ďŹ lters to narrow their search.

SMARP | FEBRUARY, 2020

4

38

WIREFRAMES

6 Accommodations suggestions

Another way to help users to find what they could be looking for. This section will showcase the best accommodations, being hotels, b&b or hostels.

7 Footer

Here the user can find different pages of interest such as the terms and privacy, as well as the help portal.

6

7

SMARP | FEBRUARY, 2020

39

WIREFRAMES

DISCOVER

WIREFRAMES

1

2 1 Menu

Provides access to login and settings like language and currency

2 Search criteria

In this case the user didn’t specify a date or a place, so they would enter the exploratory mode. They can start from here and refine the content using the search criteria

3

3 Discover countries

We give the user the chance to explore destinations, suggesting some countries where they can browse for the best accommodations or use filters to narrow their search.

4

4 Accommodations suggestions

Another way to help users to find what they could be looking for. This section will showcase the best accommodations divided by categories: Hotels, hostels and B&B

SMARP | FEBRUARY, 2020

41

WIREFRAMES

5

4 Accommodations suggestions

Another way to help users to find what they could be looking for. This section will showcase the best accommodations divided by categories: Hotels, hostels and B&B

7 Footer

Here the user can find different pages of interest such as the terms and privacy, as well as the help portal.

7

SMARP | FEBRUARY, 2020

42

WIREFRAMES

SEARCH RESULTS

WIREFRAMES

1

2 1 Menu

Provides access to login and settings like language and currency

3 2 Search criteria

In this case the user did specify search parameters, so the results will be more speciďŹ c.

3 Search results

The search results in list format provide a thumbnail carousel, the option to save to fav., the rating the accommodation has, and what type it is. Also, a short description will be included and if possible, the best voted review.

4 Change to map view

Floating button that allows a quick switch to the map view.

4 SMARP | FEBRUARY, 2020

44

WIREFRAMES

1

2 1 Menu

Provides access to login and settings like language and currency

2 Search criteria

In this case the user did specify search parameters, so the results will be more speciďŹ c.

3

3 Search results

In this view I prioritize the cheapest price. Users can click on each price and see a card with the description of the hotel

4 Change to list view

Floating button that allows a quick switch to the map view.

4 SMARP | FEBRUARY, 2020

45

WIREFRAMES

HOTEL DETAILS

WIREFRAMES

1

2 1 Menu

Provides access to login and settings like language and currency

2 Images, back and favourite button

Images can be expanded and horizontally scrolled.

3

3 Details of the hotel

The details of the hotel includes the description with the contact options and services, the reviews made in sites like Tripadvisor, and a map of the surroundings, to explore the location.

4 4 Price list

Here is listed all the prices found for that hotel, with the option to choose the prefered website and be redirected from here.

The total per night/Total stay provides a clear and exible view of the amount to pay.

SMARP | FEBRUARY, 2020

47

WIREFRAMES

FAVOURITES LIST

WIREFRAMES

1

1 Menu

Provides access to login and settings like language and currency

2 Favourites

2

3 Share favourites

3

Here there will be saved all the accommodations the user marked as favourite.

By default, the list will be named by the search criteria + year, but can be changed and renamed, as well as their elements can be deleted

To help the decision making, the users will be able to share their favourite list to get a second opinion of their choices.

SMARP | FEBRUARY, 2020

49

MOCKUPS

HOME MOBILE

HOME WEB #1

HOME WEB #2

THANK YOU