top of page

Spring Hotel

Designing an intuitive hotel booking experience 

final_615cf8ce1b974200555155de_833190.gif

Project Overview

Challenge

Spring Hotel is a fictional enterprise that is a newly opened hotel. Booking a hotel room online should be a simple process, but sometimes it can be overwhelming with all the options.

 

The client is currently looking to create an online booking experience that is simple, accessible, and based on a deep understanding of their target users. 

Objective

Design an easy-to-use website that focuses specifically on the hotel booking process including how users search for and book hotel rooms online. 

Project Type

Student Project at The UX Design Institute

Role

UX Researcher, UX Designer

Duration

6 months

(Apr 2021 to Sept 2021)

Part I: Empathizing

"The first step to designing is understanding your users."

Research Goals

  • Understand how existing hotels currently cater to user needs while identifying strengths and weaknesses.

  • Understand preferences, frustrations, goals, and needs of target users in relations to online hotel booking experiences.

Competitive Analysis

4 competitors were explored for this analysis to learn through existing solutions and products.

Competitive Analysis Hotels.jpg

Surveying 

A survey was sent out to users who had booked hotel accommodations at least once in the past year. The goal of the survey was to collect more information about behavior, needs, and opinions in relation to booking a hotel stay. 

Of the ten survey participants it was revealed that for most individuals, price was a crucial consideration when booking a hotel. This is followed by other factors like location and amenities.

3.png

Survey respondents also reported the following as reasons to visit a hotel website.

2.png

User Interviews

To understand users motivations and pain points further regarding the online hotel booking process, two user interviews were conducted.

 

During these interviews, users were also asked to walk through a hypothetical hotel booking task while sharing their screen so that I could better understand the user journey taken to book a hotel room.

sapiens (2).png

J.L. 24, Engineer

sapiens (1).png

J.C. 27, Nurse

"Reviews are so important. If the reviews aren't on the hotel website, I would google it or look on TripAdvisor."

"I hate it when I don't know what I'm paying for. I want to know straight up what I'm going to be paying for and how much my stay will cost."

"For me, location is important. I want to be close to all the tourist attractions."

Research Insights

Price transparency is crucial when booking a hotel room.

Users want to know exactly what they're paying for. It should be easy to compare prices across different rooms and packages offered. The cost breakdown should be provided showcasing the price with taxes and fees included. At payment, a summary must be provided so that users can be confident with placing their order.

When it comes to deciding on a hotel, users want accessible reviews at hand.

Users find that reviews are helpful when helping them decide whether or not to book a hotel room. Learning from other people's experience helps them choose the best hotel for them. Even if it's not something offered on the site, they'll go the extra mile to find it elsewhere. If possible, reviews should be accessible directly on the hotel site.

When booking a hotel, it's important to know its location and even better if visual aids are offered.

Location is something that is always important when booking a hotel. Showcasing the location of the hotel in relation to other attractions or key destinations is more helpful than simply showcasing the address.

Part II: Analyzing

Affinity Mapping

While affinity mapping, I focused on compiling quotes, insights, and interesting findings from the user interviews, survey results and competitive analysis. 

This led to clusters that gave me an understanding of common pain points and positive aspects that occurs throughout the booking process.

Hotel Affinity Map.jpg

User Flow Mapping

Mapping the user flow based on the user interviews conducted helped me to plan for which pages which would most important to build out in the prototype.

Hotel Booking User Flow.jpg

Customer Journey Mapping

Building out the customer journey map, based on the user interviews conducted, helped to develop a deeper understanding for user emotions as they book a hotel room on a hotel site.

Abbie Mui - Customer Journey Map.jpg

Part III: Designing

Early Explorations and Sketching

DESTINATIONS 2_edited.jpg
DESTINATIONS_edited.jpg
Search Tool_edited.jpg
Search Tool  2_edited.jpg

Medium Fidelity PrototypeScreens

HOMEPAGE.png
HOMEPAGE - SPECIFIC DATE.png

High Fidelity Prototype

Homepage

HOMEPAGE_FIRST LOOK.png

Accessible Hotel Search Bar

The hotel search bar is placed in an easily noticeable location above the fold on the homepage. As the main call to action, we want users to notice this right away.

Popular Destinations Suggestions

The site offers scenic destination suggestions for users who are unsure where their nice sweet destination might be.

Hotel Selection

HOMEPAGE_FLEX DATES SPECIAL RATES FILLED.png

Editable Search 

Users are able to change their search results anytime as they are booking their hotel. 

Transparent Ratings and Prices

Clear ratings and prices are shown directly in the search results. Users are able to check for ratings directly on the hotel site, saving them an extra step to search for reviews elsewhere.

Room Selection

HOMEPAGE_FLEX DATES SPECIAL RATES FILLED (2).png

Additional Room Details

A clear description with an option to click for additional room details is available for users. 

Component 1.png

Rate & Add-On Selection 

HOMEPAGE_FLEX DATES SPECIAL RATES FILLED (1).png

Package Options and Details

Users are presented with transparent costs of different packages. Users are also provided with a clear idea of what each package includes in their stay.

Add On Selection and Details

Add-ons are also available for users to select at an additional price. 

Cost Summary and Breakdown

Users are made aware of costs before heading to the checkout process to pay. 

Wireframes

AbbieMui_Project15 (dragged).png

Part IV: Testing and Reflecting

Remote Usability Testing

To test my high fidelity prototype design, I used Zoom for remote moderated usability testing. 

A total of 3 user tests were completed. 

P1

  • Costs are transparent and I know what I'm paying for. 

  • I'm able to make changes easily throughout the whole process.

  • I would like to know more about the cancellation policy. Make it as clear as possible.

  • I would like more pictures if possible. 

P2

  • I like that I can choose different packages. If I'm on a budget I can choose a cheap one.

  • I like that the checkout only asks for necessary information.

  • There's only two pictures I can view of the room. That's not enough.

  • Are these reviews legit? Can I trust them since they're given to me by the hotel?

P3

  • I like the filters. It makes it easier for me to find a suitable hotel.

  • I like that it tells you how many steps there are. There's only 4 steps.

  • I wish the map view showed more information. If I click on the numbers can I see how far the hotel is from like the airport?

  • More images would be nice.

Some Design Next Steps

Add more images!

 

Images are really very important in allowing users to choose a suitable hotel and room. The general consensus is the more images, the better!

Link Reviews from Alternative Sources

Reviews provided on the hotel site will be sourced from other trustworthy platforms like TripAdvisor or Google Reviews. Upon clicking on the review rating itself, it will link to the alternative source. This will ensure that reviews are unbiased and accurate.

Create a More Detailed Map View

Upon clicking on the hotel location, more details should pop up including location from popular destinations nearby like the airport or transit.

More Transparent Cancellation Policy

In the next iteration, more focus will be placed on the cancellation policy and presenting that so it is more clear to users. 

Learnings

Test on More Users

 

While I was able to perform some usability tests, I would like to perform more tests to gain a more widespread & accurate view on the design. I will aim to test on at least 5 users for subsequent iterations. 

Ask Why

I've come to realize that a huge part of designing is being able to defend your own design decisions. In this project, I focused on designing around user needs and goals. Therefore, when it comes down to explaining my design decisions I can be confident with sharing my thoughts.

Don't Over Complicate Things

Sometimes, it good to stick with conventions. Conducting user interviews helped tremendously with understanding user mental models. Doing a competitive analysis also aided in scoping out the hospitality landscape. When designing, I aim to keep things simple + intuitive for users.

bottom of page