Hotels.com Redesign and Feature Integration

Roma Patel
Nov 6 · 8 min read
Planning out the steps for the Hotels.com Redesign Project.

Overview

For this project, my team was tasked with redesigning the interface of Hotels.com and integrating a new feature into the site. Hotels.com is a website where users can book hotels, as well as other travel accommodations. The site allows for the user to be able to plan ahead and secure their travel necessities before a trip ensues. We also incorporated a more charitable cause within the checking out process to target more socially conscientious consumers.

Problem Space

The main problem that was seen in our user research was that there was a huge lack of price transparency. If a user is under a certain budget and selects a hotel to check out, it’s very likely that they are going to be upset when a bunch of hidden fees are added to their purchase at the end that pushes the total out of their budget. Prices need to be upfront with users so that they can build a trust with Hotels.com

Users

Our users include the general audience that book hotels and travel often. These are the people that are going to be using Hotels.com the most. Ultimately, we are solving this problem for the Hotels.com stakeholders and the users of the site that are leaving to go to its competitors. A persona was able to be created from the overall user data to be able to clearly see what the users want and to be able to establish more user empathy from the UX Designer point of view. Her name is Xia Delgado.

Scope and Constraints

This project took place from October 24th, 2019 to November 5th, 2019. The biggest issue during this project was the time constraint. It was also difficult to learn how to work as a group with all different backgrounds. Everyone is so structured in their way of thinking, but UX is the type of field where creativity and open minds are needed to keep the process going. Communication was also a large issue within our team. Any changes, no matter how big or small, need to be communicated with the rest of the group to prevent confusion and time delay. Within the project itself, it was difficult to incorporate a corporate social responsibility aspect into the site. We wanted to target more socially conscientious consumers whose portion of their bill would go to a charitable cause. However, within our research, this did not apply to many of our users. The integration of picking a charity to donate to at checkout was applied without hardcore user data, which is a mistake I learned to not make in the future.

At the end of checkout, the user can decide which charity they would like to donate to before proceeding to book their stay.

Personal Contributions

User Research

To begin the process of figuring out what exactly the users dislike about the current site, we needed to conduct user interviews. I personally was responsible for creating the discussion guide that would allow each member of the team to conduct a user interview, giving a total user sample of 4 individuals. After some of the interviews were done, the discussion guide was iterated to guide the users into answering more specific questions about their past booking experiences.

Research Synthesis

An affinity map was created to compile all of the data that was gathered from the user interviews. This allowed us to see different things that the users liked and disliked about the current way they book hotels. “I” statements were generated from each of the categories formed. The most prominent “I” statement was, “I like price transparency.” Out of this category, a persona was created to highlight prominent user needs, goals, pain points, and behaviors. I was able to collaborate on these sections with my team to create a digitized page of who our persona, Xia, is and what she represents.

Journey Mapping

Working on a User Journey Map.

A journey map was created to show the emotions and pain points Xia faces throughout her experience of booking a hotel with hidden fees. Emotionally, she was feeling content at the beginning of the experience, but that line quickly decreased as the hidden fees were brought to light at the checkout stage. I was able to refine and digitize the notes of the journey map into a clear table.

Problem Statement

The components of the problem statement needed to be broken down to individually see what the user needs in each part. I was able to brainstorm and contribute parts of the scope, insight, persona, problem, and opportunity. We found that users really disliked the hidden fees popping up right as they are about to checkout. We needed to figure out: How might we make the true cost of booking hotels more transparent to Xia?

Usability Testing — Existing Website

Each individual member of our team, including myself, took part in conducting one usability test on individuals that met the criteria as a user of Hotels.com through a previously shared screener survey. I summarized the content of my usability test in a document labelled “key takeaways,” so that all of the important and relevant information was condensed into simple bullet points.

Design Studio

A total of three design studios were done to begin the ideation phase of the double diamond process of UX. The first design studio was done as a team before the first round of user interviews. After the interviews were done, another round was conducted with the new insight we’ve uncovered within them. This allowed our ideas to be refined and more specific to the main user issue. Throughout the ideation process, constant iterations were made. It was difficult to fully design a new idea without running into issues that would keep the user problems from being solved. To work past this roadblock, I participated in a third, mini design studio with one other teammate. I was to sit silently for five minutes with my teammate as we both simultaneously drafted ideas on paper. Somehow, we both ended up having the exact same idea and that led to the emergence of the mid-fidelity wireframes.

The idea was to create a comparison tool within Hotels.com that would help users see clear prices without hidden fees as they are navigating through their search results. By selecting certain hotels to add into the comparison tool, users would be able to see a side by side of their selected preferences, their cost, and description to easily compare and make the best decision. This helps eliminate the lack of trust from our users, and keeps them from comparing with competitive sites and services to prevent them from leaving Hotels.com. The price breakdown of each specific preference on the selected hotel pages also gives the user price transparency.

Low Fidelity Wireframes

As a group, lo-fi wireframes were sketched to map out the user flow with our new design. A short, informal round of usability tests were conducted to catch any discrepancies before the mid-fidelity wireframes were constructed. The main issue discovered in the tests was clarity — the users weren’t exactly sure how to navigate the redesign and new feature integration of Hotels.com. I took part in redesigning the lo-fi wireframes because there were too many issues that prevented the construction of the mid-fi wireframes to begin. After the redesign, we, as a team, tested the iteration on two more different users. Although there were some minor issues, the flow was clear and we were able to move on to creating the mid-fi.

Mid Fidelity Wireframes

Before we could begin building the wireframes in Sketch in grayscale, we needed to confirm what the user was going to do to navigate from page to page. To make our process a bit easier, I created a document of the possible user flow steps within our scenario and task. By making the user flow steps, it made it much easier to create each wireframe.

Usability Testing — Clickable Mid Fidelity Prototype

Before the next testing round on the mid-fi prototype can begin, I created a user test script that would guide my team and I while conducting the tests. It allowed us to make the user comfortable and gain our trust with some opening questions and have them walk through our prototype while thinking out loud to find any issues that my team and I could have missed while designing.

High Fidelity Design

After enough data was collected from the mid-fi prototype testing, we needed to make the design into high fidelity. This essentially involved adding more visual aspects such as color, typeface, etc. Afterwards, I transferred the Sketch file into InVision after my last edits to make the prototype clickable. I was able to create hotspots within the prototype to help guide the user within the given scenario/task based off of Xia. A second breakpoint was also redesigned to make this flow accessible and easy for users who book hotels on their mobile device rather than desktop. I then annotated and labelled the second break point design to help identify which elements corresponded to each other from desktop to mobile.

High Fidelity Usability Testing and Report

After creating the desktop version of the hi-fi prototype, we needed to test to see if it had good usability and learnability within our user sample. Each team member conducted one usability test to give a total sample of 4 users. After all of the tests were completed, my teammates and I were able to collaborate and create a usability test report which summarized the main and recurring issues found within our iterated redesign. Although there were still some minor issues, it was a good start for further iterations.

Contributing with Team Members.

Outcomes, Results, and Next Steps

Our overall outcome was a success. It always amazes me to see an idea in my head become a physical prototype. Many of our users were satisfied with our new feature and thought they would actually use it if it were really integrated into Hotels.com.

I think I grew a lot during this project. It was my first time working with a group of other UX Designers and I was able to break out of my way of thinking. I have always taken on the role of the leader and I made it a goal for myself to learn how to just be part of the team and not seem more than. I also learned to not be so rigid in my way of thinking. I always think that my ideas are really great, but then I hear even better ideas from my creative teammates. At first, I felt insecure. “Why didn’t I think of that?” However, as the design process continued, I realized it’s not about me or my ideas. It’s about making the user and client happy — and I think we were able to accomplish that successfully.

No project is ever 100% done. For next steps, the site should figure out a way to redirect users from competitors to Hotels.com and keep current users from leaving to competitors. In that way, the users can be satisfied and at ease when booking hotels for their trips while generating more revenue and foot traffic for the stakeholders at Hotels.com.