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 while transitioning to Adobe Experience Manager. 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.
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 part of the booking path, which included search results, maps, and quick views of each hotel. The initial request was to provide a north star view of a future search results page.
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.
The current experience suffered from bugs and inconsistencies that negatively affected conversion rates. Interactive elements were unclear, information architecture was suboptimal, and the team lacked an understanding of user search patterns when selecting a hotel.
(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 scope down to an MVP. 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.
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 opt to filter first? For the hotel 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 the interacted with, and in what order.
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. 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.
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 (left) and (right) a mobile concept prototype where photographs of the hotel are the focus of each search result.
Could we hide second-level information about each hotel (and display it when a user hovers) 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.
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. 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.
Some elements of collage images are courtesy of Lummi and Unsplash.
