Many hotel booking sites have suboptimal booking user experiences. Users often do not have a holistic overview of hotels in the desired booking area to compare, evaluate, and make informed decisions on their hotel bookings.

Users also have trouble understanding different hotel rooms and rates offered, hotel cancellation policies at a quick-glance, as well as difficulties in comprehending hotel add-on services and their value to the user.

🎯 Goal 🎯: The aim here is to redesign the long, information and choice-dense process of booking a hotel for the user. To aid the user in such a cumbersome process, the intention is to significantly reduce the time and number of clicks it takes for a user to get through the process. Information that is provided to the user needs to therefore be presented in a succinct manner that is supported by iconography to provide the user a quick-glance understanding of the information at hand.

The focus of the project was on the booking process: how users search for, select, and book hotel rooms, alongside any add-ons.

Based on the analysis from the research I carried out, I designed a user-friendly, clickable prototype for a fictional boutique hotel (AHOTEL) that addresses the above issues.

The redesigned booking process for AHOTEL should therefore be:

Streamlined and intuitive

Based on users' mental models of hotel booking processes

Able to provide users with the relevant information they need at key stages of the booking process - no later nor earlier.

Competitive benchmarking, insights from user interviews, affinity mapping, customer journey mapping, wireframes, and interactive prototype

An interactive medium-fidelity prototype and a set of annotated wireframes that provides a streamlined booking process without ambiguities such as unclear pricing or add-ons.

The newly redesigned booking process does not veer far off from users' mental models of a hotel booking process, but trims the excess time and clicks it takes for them more to get to the finish line.

Users can now compare and evaluate hotels and room types with the aid of more at-a-glance information, as well as be given the tools to easily filter on hotels based on their needs and wants for their ideal stay.

The majority of this project was carried out on Miro, Figma and FigJam.

🔗 LINK TO PROTOTYPE

All by my lonesome - this project is part of my UXDI Professional Diploma's capstone project. I did the research, analysis, conception and design work for this project. Over the 6 months that the project (and course) took to complete I took on the roles of both UX Researcher and UX Designer.

To kick things off, I conducted a competitive analysis of the desktop booking processes for Airbnb, The Hoxton, Trivago, and Plum Guide. I chose a wide array of websites to analyse for broader findings, choosing from rental booking giant Airbnb, design-focussed boutique hotel The Hoxton, hotel booking site Trivago, and upscale rental booking site Plum Guide.

My goals were to:

Understand how best-in-class teams solve the problems I'm looking to solve

Determine pain-points from current booking flows

Identify best practices and conventions to emulate

Convention for booking flow is split into 6 stages: Search (home page), Results, Room Selection, Booking & Add-ons, Payment & Confirmation

Calendar drop-downs are the most user-friendly convention across all booking sites, with the current month and year as a default setting upon selection

A boutique hotel's own online booking process is going to be slightly different from a rentals and hotels booking site, as there will naturally be fewer and less varied hotels to select from

Rental booking sites like Airbnb and Plum Guide have little to no emphasis on on-site bars and restaurants than hotel booking sites

A split map and list view is the most widely used and intuitive way of navigating the results list, but where sites often miss the mark is having the results on the list and map correspond in a logical and cohesive manner

Next, I created and distributed a 10-question online survey. My main goal was to understand the goals, context, and behaviours of users who book hotel stays online. For what reasons do they book a hotel stay? How do they usually do so? How would they prefer to do so? Did they particularly enjoy or struggle through any parts of the process from the last time they did book a hotel stay?

I come from an operations background. It was important that the results I collected from the survey be structured and had good data hygiene. I made sure the response options in the surveys were mostly drop-down select fields to avoid overlapping answers filled in with free text (a codifying nightmare).

Bear in mind this was a capstone project so my survey results were a limited to the 25 respondents I had, mostly within my network of young, working professionals living in urban areas. I would have gotten more diverse results had I used a survey distributor.

Book hotel stays to plan for a vacation/holiday

Booked a hotel stay within the last three months of responding to the survey

Visit the booking site both on desktop and mobile during the consideration and booking process

When asked, ease-of-use and familiarity with mental models of a booking site were the biggest reasons behind respondents' choice of hotel booking sites - many users picked booking sites they used out of habit

Particularly enjoyed the search and select aspect of the booking process, so under the notion of "if it ain't broke, don't fix it", I decided to focus more on finding issues within other sections of the booking process

I then conducted a usability test on my partner, who had recently booked a hotel stay in London. If not for the capstone project task, I would have gotten more diverse results having conducted the user testing on a few more candidates from different backgrounds. I used Vidyard to record the usability test. The two hotel sites we looked at during the test were Hilton Hotels and Radisson Blu, as they are both hotel chains with several locations under one brand (which differs from sites like Booking.com or Airbnb, which I have already done competitive research on).

In addition, we also had two recordings of user tests provided for two other hotel booking sites (Barcelo Group and Doyle Hotels) as a note-taking exercise. I was also able to use the insights I gathered from observing the recordings as part of my findings.

Rates and packages need to be clearly defined at a quick glance. Users can easily be confused if a description to differentiate rates and packages are not provided clearly

Rich, wordy descriptions of hotels do not matter much to the user when booking - instead they are looking for conventional information such as location, transport and connections, facilities, reviews, and amenities

Photos are extremely important in helping users make decisions on hotels and room types. Photos need to be taken in good lighting to capture and provide enough information for the user to make an informed decision. For example, photos can help users gauge information on the size of a room

Room size information (e.g. 20 square metres) provided in isolation is often ignored or doesn't read to the user. Users need the aid of more visual representations of sizing to judge the size of a room, in addition to the room size information provided.

With a large amount of data to sort through and codify, creating an affinity diagram was the next logical step.

Some of the most problematic areas of the booking process were around:

Calendar picker options, where year and month drop-downs are missing

Location picker options, where location results are not intuitive or standardised (e.g. a search for "London" can yield results from "London, UK", "London City, Greater London, UK", to "City of London, London, United Kingdom" on one single search bar)

Map view versus results list do not correspond

Results filters not being specific enough

Not enough photos on results or if photos don't provide enough information

Unclear cancellation policy that is difficult to access

Lack of quick, at-a-glance information around hotel surroundings/location

Confusing room rates

Convoluted add-ons

Lack of a clear booking summary

See the affinity diagram 🔗

To then visualise, segment, and map out the pains, context, behaviours, and objectives of users based on the data I had now codified, I created a customer journey map. Mapping out the key emotions over the customer journey allowed me to truly put myself in the users' shoes whilst visualising key stages in the booking process.

Key Learnings:

At a quick glance, it is clear that the most frustrating part of the booking process is the results page

Booking and payment is a key step in the booking process for the user. This is where they are putting down their money, and it is vital to design an experience that provides enough information on important factors related to cancellations, refunds, how much they're putting down and when, and most importantly - is what they're paying for what they actually want to pay for?

Most users book hotel stays for their upcoming vacation/holiday, which is likely associated with positive emotions related to relaxation, excitement, and adventure. With that in mind, it's important to design a process that retains these positive emotions as much as possible throughout the cumbersome process of evaluating the large volume of hotels, rooms, and of course data entry upon booking and payments.

The entire booking process covers several steps, and often involves many clicks and a lot of time. To prevent users from spending extra time and clicks, provide relevant information in an easily digestible fashion

From my research, it was clear that the current hotel booking process needed to be more streamlined and provided users with enough at-a-glance information to help them make informed comparisons on the different hotels they had to sift through.

I decided then to focus on my design decisions to bring quicker clarity to users on each interaction to save them extra clicks (bad for conversion, frustrating for users) in an already convoluted process.

Some important aspects in my design decisions were:

Quick, easily digestible information at-a-glance

Clear CTAs and breadcrumbed navigation so the user understands how to proceed, how to go back, and how many steps have been and will be taken

Add-ons with clear, succinct descriptions that can be easily added or removed

I created a task flow for booking a hotel room with a pool with the addition of booking an airport transfer. The task flow needed to be high-level enough to capture the entire booking process, but be specific enough to address the specific pain points surrounding the results page and booking add-ons.

I debated back-and-forth between how to set up the location field in the hotel search bar. As this is a boutique hotel possibly with fewer locations, the search field wouldn't work the same way as the search bar on Airbnb, for example, where there would be hits for almost all locations searched and entered in the field. This got me thinking about the error state that would appear when a location that the hotel is not present in is entered. How frustrating would it be for the user to finish entering in a location only to be presented with an error message saying "sorry, there are no AHOTELs in this location"?

I revisited The Hoxton's search bar. The Hoxton being a boutique hotel with around 15 locations total (and some in the same countries and cities), their location search field was aptly designed as a dropdown select. No search bar is included.

I then had a gander at AMAN's website. Despite having a scrollful (definitely not a dictionary-approved word, but it took quite a few scrolls to get to the bottom of this list) of locations, there still wasn't a search bar included. I personally really did not like the layout of their search page, as you couldn't get a holistic view of where their locations were immediately without scrolling. You couldn't even search to narrow this down. Whilst I did appreciate the images accompanying each location, I felt that without a search bar to quicken the search, they were almost more of a nuisance, taking more space and time when it came to going through the complete list from A-Z.

Whilst not having a search bar was a good solution for The Hoxton, the lack of a search bar with an input field on AMAN's search and select interface was also not a great option for a quick-search use-case. Suppose a user knew exactly which location they wanted, would they want to scroll through or look through an entire list of locations?

Given this is a fictional hotel, I decided to go with an input field and dropdown list option. I realise this is not very well reflected in my flow diagram, as my primary scenario in the flow is based on a user knowing which location to book from (London). The input field allows the use-case for a user needing a quick search, and the dropdown also allows them the flexibility to quickly understand which locations the hotel is present in.

Using the flow diagram as a skeleton, I proceeded to visualise the booking process in the form of sketches.

This was an important step in the journey as I was able to visualise the initial flow I created and really think about the layout and placements of certain elements in my design.

There were a few things I had left out by accident, for example the breadcrumbed navigation that should have been added starting from the Results page. To make things a bit simpler I also decided to change up the scenario for the prototype to just include adding a spa treatment instead, which is a more straight-forward flow.

I also made sure that my designs addressed the issues identified from my research and analysis phases:

Lots of information at a quick glance is provided for each hotel result, on the hotel page itself, as well as on the rooms and rates interface.

A good summary is provided at the payment step, where the user is able to see their exact payment breakdown, confirm what they have booked (number of nights, guests, hotel name, room type, add-ons), and also confirm what they need to pay right now.

Information is given on cancellation policies early on to remove any ambiguities in the process

An entire section on the interface for results page is dedicated to filters for quick filtering purposes

Instead of relaying information through lengthy, rich descriptions of the hotel, I wanted to provide as much concise information to the user. By presenting information in buckets of concise summaries aided with iconography, for example under "What we offer", the user is able to quickly discern the top featured amenities the hotel has to offer to quickly make a decision. If the amenities do not match her needs, the user can quickly move on to the next hotel in her evaluation process.

The booking breadcrumb navigation starts at the Rooms and rates page, as this is the beginning of the booking process. The user has now selected a hotel, and will continue on to select a room within the hotel they have chosen. This explains why the breadcrumb navigation says "Step 1" at this page.

The breadcrumb navigation on the top right of the page indicates a way for the user to go back to the hotel page if they would like to go back to evaluate the hotel choice again, or even to go back to the Results page once more to evaluate more hotels in their search area.

Quick-select tool for room types

The quick-select tool was designed to tackle the issue of users being unable to quickly see which room types were available, as well as make a quick decision on which room type they need, based on their search selection.

The quick-select tool also presents the user with a suggested room type - which is indicated in a subtle, small text under the room type suggested. The small type-font relays that this is merely a suggestion based on the search selection (number of nights, number of guests, and guest type) for those who need a quick selection and do not have the time to look through all the available room types.

I believe that this tool can help to eliminate the extra time a user needs to sift through even more information towards what is the end of the evaluation process, but only the beginning of the booking process. At the same time, the user is also presented with the option to ignore the suggestion if time allows for them to evaluate the available room types.

After designing each screen in medium-fidelity, I created an interactive prototype. The prototype has been validated with users and brought some minor iterations to the interactions.

Hand-off documentation with annotations (annotations are in comments)