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