Hidden Fees, Hotels.com, and Price Transparency — A Case Study
Ask yourself something for me: do you trust the prices that hotel, flight, or travel websites give you? When you look for hotel stays somewhere, do you trust that one website or franchise alone will give you the best price? Or do you wind up opening a dozen tabs or more in the same browser window, trying to keep tabs — literally — on every option you have?
If you’re like our users, then you would have answered with “No,” “Heck no,” and “All the time!” to the questions above. This is a major problem our team discovered when we, General Assembly UX design students, were tasked to work with Hotels.com. (Perhaps not literally, but we were assigned Hotels.com as our client!)
Our focus was to create an adaptive redesign of the primary platform users browsed Hotels.com on, and to incorporate a corporate social responsibility feature into Hotels.com.
I had the pleasure of working with fellow UX students Zarah Ferrari, Roma Patel, and Matthew Alexander Boaten on this project.
Now, how did our team come to discover this problem?
Where else would we begin but with research?
After we received Hotels.com as our client, we began where every good design process does: with user research. I created a short screener survey to begin collecting users we would love to talk to more about. We refined the survey together as a team.
Our user qualifications were as follows:
- Users who used the Hotels.com desktop site or mobile site (not the app);
- Users who booked their Hotels.com stay within the past year;
- Users who were willing to be contacted for an interview.
While teammates Zarah and Roma created the interview discussion guide, Matthew and I went out into the field (rather, General Assembly NYC campus) to ask people to take our screener survey.
After we got our total of 4 qualified applicants, Zarah and Roma interviewed them. Our applicants were split evenly between female- and male-identifying applicants, although our age range was a bit narrow (18–29 year olds, with one 30–39 year old).
Some of the key quotes to come from our interviews include:
- “I feel like I’d have to refresh the page multiple times to see what deals I can get because they’re not going to explicitly show me.”
- “I have 10 tabs open of just different websites trying to find the same exact thing, and half the time they’re all pointing me in the same direction, but I don’t want to have to do all of it.”
- “I don’t like seeing those hidden fees.”
Through our interview data, we all worked together to synthesize data and create “I” statements.
Pump up the synth(esis).
Our whiteboard was decked out with wonderful colored post-it notes after we were done. In the end, we came up with these core “I” statements:
- “I like to travel with people I am close to.”
- “I like to travel for a week at a time.”
- “I like price transparency.”
- “I like my hotel and its location to have many options.”
- “I want the best deals to be easily visible.”
I italicized the “I” statements our team honed in on for our persona and problem statement. The core pain point users had had to do with hidden fees on sites like Hotels.com. We continued to look at our affinity mapping post-its and came up with users’ behaviors, goals, and needs as well. Together, we crafted our primary user persona: Xia Delgado. (Our revised and streamlined version is below!)
We also created a journey map to chart Xia’s emotional journey as she went through the process of booking a website. User quotes, phases, actions, mindsets, and emotions were all pulled from research data. I created the first draft, which we all refined multiple times as a team; the final product is below.
Essentially, Xia would be excited at the start of the trip, shopping around for hotel and flight options. But by the end, Xia would be upset with how complicated the booking process could be when it came to considering and comparing all her options. Her emotions would be at their lowest point when she saw all the revealed hidden fees at the end of the checkout process.
Finally, we created our problem statement.
Users do not use one site when booking hotels because there are many hidden fees, and they do not trust that the site will offer the lowest travel cost. Xia travels often, but she is overwhelmed by the booking process because the true costs of accommodations are not upfront.
How might we make the true cost of booking hotels more transparent to Xia?
Can we begin solving yet?
Ideation time!
Our team ran two design studios to come up with rapid lo-fi ideas for our product. We focused on both user flows and specific pages during our sessions. We also ran 4 usability tests on the existing Hotels.com website, asking users to book a hotel with a certain budget and with certain filters checked.
Our findings on the usability tests were as follows.
To simplify: Hotels.com had an ugly, unclean, and unpleasant user interface. Combining our findings from the usability test and our user interviews, the team settled on a product that solved for both price transparency and comparing hotel options.
We wanted to clean up the home page, the preferences bar, and the overall feel and organization of Hotels.com. We also hoped to add an easy comparison tool within Hotels.com so users could check out multiple options on the site at the same time without opening many different tabs.
Our user’s steps would, ideally, go like this:
- Xia opens Hotels.com to look for accommodations which fit her preferences (#1).
- As she browses her search results, she clicks on a particular hotel to see more information about its amenities.
- She adds it to her comparison tool (#2), and she looks for another hotel which fits her desires.
- Once she finds that second option, she adds it to her tool as well.
- Within her tool, Xia can now see price breakdowns for what she’s paying at each hotel and what both options will cost her (#2 and #3).
After we ran two lo-fi usability tests as a group, I took charge of the mid-fi wireframes. Some of the upgrades we made are below, all changed as a result of user feedback.
We kept the more clean appearance of the results page, and we kept the preferences bar up top. We did modify some of the fields within the bar. Additionally, we added our “Compare” feature, which would work as the comparison tool within Hotels.com outlined above.
We expanded on the comparison tool within the hotel information page, laying out what it would look like if Xia added two hotels to the comparison tool. We made sure information was more clear.
Most importantly, we changed our comparison tool icon from a cart to a scale with money symbols, which we found on The Free Icon Library. This is due to a user stating that the cart felt too final, like they were definitely purchasing the rooms. Finally, we also added buttons to add the hotel to the comparison tool, and to book it right then and there.
Finally, we kept the price transparency on the booking page to make sure users could always see what they were paying for, and what was going into their final price. We also ensured that the comparison tool could still be toggled from the booking page in case anyone wanted to make any last minute comparisons.
So how did our mid-fi do in our usability tests? Actually, we found that users still needed more information and transparency.
We decided we had to expand on the information available in the comparison tool, and we had to make sure prices were visible from the earliest point possible within the user flow. We brought these changes and more into our hi-fi prototype.
Zarah Ferrari worked to upgrade our mid-fi wireframes into hi-fi ones, and Roma Patel made a prototyping demonstration.
The pizza prototype is being delivered.
Zarah Ferrari made some wonderful infographics to demonstrate our choices in changes from mid-fi to hi-fi.
We modified the home page to show a new ad campaign: “No more hidden fees.” This would be the first step in establishing more price transparency on Hotels.com, front and center.
We broke down prices further on the hotel information pages themselves, not just within the comparison tool. This was to further ensure users would see more price transparency every step of the way.
Finally, visibility! There needed to be more real estate on the comparison tool for all our users’ desired information. We made sure it could all be seen.
But we didn’t stop here. We conducted usability tests on our hi-fi, and we came up with the following findings:
It’s a bit of a mixed bag, but in the end, we still need more price transparency! Some reorganization of content and when information is introduced to the user would likely benefit our prototype.
So how did we incorporate corporate social responsibility into the project? In the end, we decided to follow the idea that Amazon Smile came up with: make a portion of the final price go towards a charity of the user’s choice. Since 3 out of 4 users we interviewed claimed that social movements and/or philanthropy were important to them, we believed this would be a painless way for users to choose where to contribute along the way.
A demonstration of this is here:
There’s one last thing!
This was an adaptive redesign of a website, after all. Zarah Ferrari created a few mobile breakpoints, and we all worked together to refine them. Here is a comparison between the mobile home page and the desktop page, made again by Zarah Ferrari:
A brief demonstration of the screens are below.
So what’s next?
It would be fantastic to actually be able to work with Hotels.com on implementing the changes and features we came up with. However, before anything would go live, we would recommend these next steps:
- Continue to refine the hi-fi prototype based on usability test feedback, and continually test the changes.
- Optimize the user profile feature to keep track of hotel preferences and create recommendations for users.
- Continue to research what socially conscientious users expect or want from Hotels.com to implement corporate social responsibility into the website.
And what did I learn from all this?
This was actually the first time I worked in a team setting with other UX designers. While I’ve done hackathons and solo projects as a UX designer, I’d never not been the sole person making the design decisions. To coordinate, communicate, respect, trust, and empathize with others in a design setting for the first time was a fantastic experience, and I think our first time as a team went well.
Another lesson I learned was the true value of timeboxing and letting ideas speak for themselves. While I was used to scheduling out assignments and sticking to deadlines, I encountered my first pothole as Roma Patel and I were ironing out the details in our first lo-fi wireframe. How should we lay this out? Maybe we should do this. No, let’s do that. No, this!
I think we must have spent upwards of twenty minutes just discussing details, until I finally said, “Let’s just run a five minute, silent design studio and come back to discuss afterwards.”
That got us out of our obsessive focus on small details, in no time. We found a solution and moved on very quickly after that, and it was a huge time saver. I wish we had done that from the start!
All in all, I continue to learn more about the work I’m doing and myself as the General Assembly course goes on. I can definitely say I’m excited to keep going.
Want to learn more?
If you’d like to…
· get an industry-recognized Course Certificate in Usability Testing
· advance your career
· learn all the details of Usability Testing
· get easy-to-use templates
· learn how to properly quantify the usability of a system/service/product/app/etc
· learn how to communicate the result to your management
… then consider taking the online course Conducting Usability Testing.
If, on the other hand, you want to brush up on the basics of UX and Usability, then consider to take the online course on User Experience. Good luck on your learning journey!
