Enhancing hotel search: the UX-led strategy behind a hotel giant's search page redesign
Client name and identifying information has been removed due to an NDA. Please contact me for more information.
A leading international hotel company aimed to update their web search and booking experience. As the lead UX designer, I was responsible for delivering designs for key steps in the search and hotel selection experience and providing recommendations across global domains. I spent nine months working closely with product, development, and design teams to improve the existing experience and craft a new web search results page.
Searching for a hotel should be quick, easy, and painless. This was anything but.
A major player in the travel and hospitality space, the company was eager to smooth friction points in their online booking experience and capitalize on the resurgence of travel following COVID-19 lockdowns.
This project focused on improving the search results page, a key step in the booking path. The initial request was to provide a north star view of a future search results page.
The current experience suffered from bugs and inconsistencies that negatively affected conversion rates. Interactive elements were unclear, information architecture was suboptimal, and the team didn't know the user search patterns for selecting a hotel.
The search results page was overloaded with information and haphazard functionality. To make sense of it all, I analyzed 90+ features across the top 25 hotel websites.
I conducted a feature analysis of 25 key competitor sites that revealed over 90 features for us to consider, spanning everything from merchandising tactics, to map functionality, to interaction patterns. I used a quasi-Kano model grid to map out each feature's user value against its prevalence in the market.
(Click to expand) A snapshot of the cross-platform feature analysis, detailing the pieces of content competitor hotel websites displayed in their search results on mobile. Items are ranked on prevalence (x axis) and perceived value to customer when searching for a hotel (y axis).
In sorting through my findings with the team, it became clear that we needed to define our scope. 90 features were too many to work through simultaneously. We defined new constraints, detailing that we’d limit the implementation to current technical capabilities.
The plan was to ship an MVP version of the search page for a limited percentage of users, collect KPI data, and iterate accordingly. In doing so, we wanted to make sure that we improved conversion rates (especially on mobile web, which sat at 6%), and that we provided an experience that better matched user expectations.
From a design perspective, we decided to focus on three key areas:
01 Page Layout
Where should everything sit on the page, and how much space should be given to a map, versus filter/sort controls, versus hotel cards? We wanted to ensure the future page layout reflected customer search patterns and dedicate the right amount of real estate to each item.
(Click to expand) The existing site layout required users to toggle between a list and map view. Our team knew that customers looked at photos, price, and location almost immediately, but we didn't know how the layout could best support their decision-making process. Should the map be smaller? Photos larger? Should we show more properties above the fold?
02 Filtering
The current experience required users to open a modal in order to interact with filters. Visually separated from the search results, this experience required users to hunt for each filter they wanted—and filters were organized in categories that didn’t match a user’s mental model.
(Click to expand) Navigating away from the search results in order to filter was not ideal. Additionally, some of the filter categorization didn't make sense to how users thought about the hotel search process. For example, if a customer was searching for hotels in New York City, they'd have the option to filter by hotels in nearby New Jersery versus those in New York state. Was this a meaningful way to think about the options? Also, distance was a filter. Distance from what?
03 Hotel cards
The cards included links that took users off the booking path, used four different text treatments to indicate interactivity, and included unnecessary pieces of information that routinely confused users.
(Click to expand) Mockup of the existing hotel search result card. All of the four labeled items was clickable, but each had a different treatment. As a result, interactivity was not clear. The address was not valuable for customers to see at this stage in the search process. Additionally, the "Level 6" designation confused every user with whom I spoke.
Narrowing in on these three categories gave our team a blueprint for building out product hypotheses, from which I built my research plan.
I sorted through old research and figured out knowns, unknowns, and assumptions. I used that to create a generative research and evaluative testing plan.
In the years preceding my team’s work, the company had amassed a collection of designs, prototypes, and various research findings.
I sorted through these assets and grouped each piece of information according to the three areas of focus we identified, and tagged it as either a known, an assumption, or a knowledge gap. I used these groupings to guide the questions I asked key stakeholders and users.
A key consideration that guided my research plan was understanding how users expected to search for hotels. Did they look at hotels on a map first, or did they filter results first? For the search result cards, I wanted to understand the relative importance of each piece of information about a hotel in the decision-making process. We knew that location and price were the two most important considerations, followed by guest rating. However, where should everything else fall?
To find out, I conducted card sorts with sample hotel information and analyzed click tracking data. I conducted 20 user interviews and 60 usability tests, where I had users search for different types of hotels in different destinations (cities, islands) and observed what elements of the page they interacted with, and in what order.
Because the company's global customer base was so large, I established a set of parameters around an individual's travel habits, demographic information and hotel memberships to identify research participants.
A sample of the content I tested in my card sort. Watching how users grouped these items helped inform where each piece of content should live: on the hotel search result card, in a details view, or farther down the booking path.
I sorted my research findings according to their origin (qualitative or quantitative data, behavioral or attitudinal) and connected each insight to a corresponding product hypothesis. Cross-team conversations with SME stakeholders helped provide a point of view on the strength of each hypothesis and the company’s bandwidth for testing.
With my new insights, I explored design concepts for the cards and page layout.
I matched the fidelity of my designs to the fidelity of the decision-making process we were in at the time. When we were determining the overall layout of the page, I created low fidelity wireframes and thought through potential interaction patterns between main elements. When we were determining content hierarchy and placement, mid-fidelity wireframes with detailed states helped keep us more focused on the content than the final visuals.
I looked at best-in-class examples from the travel, hospitality, and retail industries, and identified possible enhancements to guide the design direction.
Could we make better use of the professional photography at our fingertips and have photos of each hotel play a larger role in the search results?
The existing hotel card (first) and a mobile concept prototype (second) where photographs of the hotel are the focus of each search result, and unique amenities are highlighted.
Could we hide second-level information about each hotel (and display it on hover) in order to reduce visual clutter on the search result cards on desktop?
Desktop concept prototype where only the most important information appears by default. When a user demonstrates interest and cursors over the card to take a closer look at the hotel, categories of photos like rooms, shared spaces, amenities, and exterior appear on hover.
I cycled between rounds of feedback from design, product, and development at each stage and documented what was removed from MVP scope.
As I moved through design options for each of these elements, I was challenged by balancing the needs of the existing user base with the desire to modernize the e-commerce experience to achieve parity with other leading travel brands.
The majority of users were long-time, loyal customers who were accustomed to the existing experience, which, for better or worse, mirrored that of most legacy hotel companies. There was a sharp difference between these websites and the more robust experiences offered by online travel agencies (OTAs) such as Expedia or Booking.com. Our team struggled with where we should land between these two groups.
As I explored options, I ruled out designs that deviated too far from industry standards. For example, in the page layout, I considered a design that showed a smaller map and full width-carousels of each search result. The idea was to keep key information (such as hotel name and price) sticky, while showcasing more photos from each hotel. Ultimately, we needed to follow industry conventions that we saw across a dozen+ competitors, and keep the search results looking like a stand-alone card.
A quick exploration of page layout using an admittedly unconventional design pattern, where each search result was a carousel of images, so users could see key hotel information and the most important photos all at once.
Our work led to better information architecture, clearer interactivity, and smarter space usage.
Serving as the UX lead through concepting, research, strategy, and design iterations was a fantastic learning experience. This work challenged me to consider the downstream effects of design decisions across a complex booking path and to manage competing priorities from client-side stakeholders.
I'm not able to share a link to the live site or metrics due to an NDA, but please reach out to me for additional details.
Before & After: List View
For the list view, we condensed the search query section by removing the prominent Edit button and giving the section a tappable affordance (tap to edit). Destination and dates searched were made more visually clear and therefore more related to each other.
The filter and sort capabilities were pulled out of the header and made to sit more closely to search results, which they are more related to. Similarly, the switch to map view control now sits closer to the elements it controls.
While not all of the search result card changes I advocated for made it to production, the team did remove the confusing "Level" designation as well as the address, based on my research findings.
Before & After: Map View
For the map view, the team implemented a similar treatment as on the list view. Destination and dates searched were made more visually clear, related, and tappable. The filter and sort capabilities now allow for one-tap filtering, instead of always having to open a filter menu. The switch to map view control now sits with the elements it controls.
The search result card layout was adjusted to better accommodate photo and pricing content, and the "from" was removed for easier legibility. The View Details button was removed, so that the whole card would be linked to the Hotel Quick View page, instead of several different pages.
Some elements of collage images are courtesy of Lummi and Unsplash.
Next Project
Deloitte Digital
Creating a new web presence for a collection of studios spanning the globe
