Case study: Redesigning Booking.com for greater search experience
Overview
In my last article (design critique), I’ve shared my point of view about how Agoda triumphs Booking over the hotel search experience. I’ve explained how Booking’s design might impose obstacles to a user to achieve goals, the neuroscientific explanation to that, and how Agoda nailed the challenges nicely.
But as a product designer, being an armchair strategist is not my way. With the insights derived, I initiated a redesign challenge on Booking’s search and browse experience. The redesign took around 2 weeks as I could only spare my off-work time on it. Here it is.
In this case study, I’ll walk through my design process and demonstrate how decisions are articulated.
Disclaimer: The redesign is made mainly for practice and sharing and the views in the article are my own. I am not compensated by Booking or any organization to conduct the research and redesign.
The Problems
Our focus falls mainly on the result list, which imposes these usability problems:
- The long repeating filter sections with the same text format could be overwhelming to recognize
- The information retrieving process solely relies on scanning and reading, which might be counter-effective
- Some expressions may not match users’ mental model
Researches
Desktop research and evaluations
Apart from the usability analysis on Agoda (covered in the last design critique), I’ve explored the leading players in the online traveling industry (Mauricio, 2020).
- Expedia.com
- Trip.com
- Trivago.com
- Airbnb.com
- Tripadvisor.com
- Google.com/travel/hotels
Though sharing great similarities in terms of function and services they provide, these OTAs still differ in the way they shape the search & browsing experience. Here is the overlook of these websites’ first screen of the result list.
I’ll share insights obtained from the competitor analysis in later’s proposal walkthrough.
User observation and interviews
In my last design critique, the conclusions were induced from judgment as a product designed and my experience as a customer. But to kick-start the redesign that could really solve the problem, I need more insights from more perspectives, including users and non-users of Booking.
I picked three adults aged between 25 to 30, male and female, having experiences in traveling (solo, with partners, with friends, and with family). The interviews were conducted at their workplace, in the forms of casual talks, and heuristic evaluations over Booking and their own beloved online traveling agencies.
Here is a summary of their mental models based on the interviews.
Han and Cheng are both prudent trip planners yet Jean is relatively casual. However, the latter two are regular users of Booking (not a member) so their behaviors and statements gave me a clear vision of how they seek and consume information to reach the ideal hotel.
Based on the competitor analysis and user interviews, three insights were induced:
Ideate
Mapping the user journey
I picked Cheng as a representative user and illustrated a journey map based on his story.
It’s clear from the map that the long and repeating filters don’t make him any happier along the journey. In addition to that, there are two emotional cliffs:
- when undesired results showed in the list
- when he has to switch between the results for comparison
Generating wireframes
Well informed with the challenges, the wireframes were crafted to resolve the irritations brought by the current state of Booking’s filter design.
Two highlights were introduced in this redesign:
- A toggleable split map view
- A comparing mode
I validated the wireframes with stakeholders, polished the wireframes on some details, then proceeded to the UI design.
Crafting the high-fidelity mockup
The information retrieving process solely relies on scanning and reading, which might be counter-effective.
To solve this, I grouped and encapsulated Booking’s numberless filter options into five entries on the top of the whole result list:
- Popularity — the most popular and promoted filters
- Budget — price ranges of the property
- Star rating — the property’s star rating
- Payment — options related to payment and reservation
- More — all other options in groups
I set the amount of the filter category to five, which falls within the suggested number range (4±1), where four is the average working memory capacity of humankind (Broadbent, 1975; Mastin, 2010). This aims to let a user comprehend what kind of options are on the deck without scanning through all the details they used to do.
The long repeating filter sections with the same text format could be overwhelming to recognize.
To avoid this, I exerted various information design techniques in respective filter modules:
- Each vertical list will contain content with a similar structure in a total number of five or less so the user can grab and digest information with just a glance
- Use imagery and color in addition to text to facilitate speed recognization
- Use a scrolling bar with histograms to replace the conventional price range checkboxes, so the user can take information visually and define their ideal range flexibly
- If the amount options are considerably large, (i.e, the More Filters), layout contents in columns, provide visual aids like blocks and icons to facilitate recognization
Auxiliary search besides filters
Still, it’s not guaranteed that such ways of organizing information are effective at all times. What if you have some uncommon needs that you actually have no idea if will be catered to at all?
This may sound a bit obscure but imagine when you are traveling with your grandfather and you only consider hotels that are accessible to wheelchairs. If you are booking with a real travel agency, you just tell them you want wheelchair-accessible accommodations. However, here, you have to explore it yourself within the More Filters module.
To cater to such “uncommon needs”, a filter-search function is included on the interface:
With this auxiliary search, users could speak out (search) the keyword of their needs and access these needs in a swift manner.
Redesigning the property card — a minimalist’s approach
Search and browse experience is not all about search soI invested some effort in the display of a property card, aiming to reclaim clarityfrom the commercial need reflected on the property card.
To conclude, I did few things:
- I restored the cover photo proportion to 4:3 which comply with the major photographic proportion on the market
- I also introduced a scrollable photo gallery aside from the cover photo to increase the exposure of stunning photos of a property (Based on my observation, the cover photo is often not the best one!)
- I replaced the user review information to the middle-bottom so that this number doesn’t compete with the property price vertically
- I let the price stand out a bit more — by increasing the font size and introducing a serif typeface (named Canela). I also ditched the repeating footnote around price (they are explaining how the price is calculated) as I believe the hotel detail page could be a better place for them. Instead, I added nightly price as I often found helpful when I compare accommodations horizontally.
- I hide the CTA button (“see availability”) and made the whole card serving the same function.
I believe in the design principle “Good design is unobtrusive” by the German industrial designer Dieter Rams. I hope the property card could speak for its owners while keeping a moderate presence among its peers, thereafter a feel clear and productive when seeking information and the judgment is made based on his(her) own will.
Blending insights into the experience
The split map view
Based on the user research, we have found that the interest in the visual presentation of a hotel location varies greatly among users. This resulted in two major layout patterns of the map view on the design of OTA websites.
When looking at Booking’s map view, I feel that while the major functionality retained, none of the page props are demonstrating their best in terms of usability:
- The details of the property, especially the cover photos, are hard to identify because of the distortion
- The pins on the map itself don’t convey any information other than geographic location — thus it requires a lot of blind trial effort to distinguish the properties with pins
To solve this, a toggleable view interaction was designed to cater to people with the opposite interests of the map view:
When the split map view is toggled on, the property card remains in its original shape with minimal UI changes. In the meanwhile, if a user enjoys exploring with a map, (s)he can also stick to the map on the right side only, exploring pins with price and discount tag that might look attractive to him/her.
Property comparison
As shown on the journey map, Cheng gets mostly frustrated when he plans to compare the potential options. What he usually does is open the detail pages in new tabs and jump around and locate the information he wanted to compare.
When asked if he could do anything to improve the status quo, Cheng complemented how online gadgets retailer websites satisfied his need, where he could compare models on a dedicated webpage. He showed me Apple’s online store:
What if we could have a comparison for Booking as well?
This idea thrilled me greatly. The challenges included introducing a new set of interactions on the individual property and a new database where the potential properties are stored. I started from wireframing and ended up with this high-fidelity prototype:
The design of the comparison mode is derived based on this sketch: I was trying to mimic a user’s minds in the browsing — booking workflow:
In my vision, the user’s need will become more specific along the journey, and thus the information exposed should accommodate such change. The comparing list is to fulfill the needs between browsing and examining step therefore the information design of it is should also be appropriate so that he/she is able to decide to proceed or quit.
This made the design of the property card a challenging job, especially when the specs of a hotel, unlike digital gadgets, could contain facets that are hard to modularize, and the prices also depend on the room type being selected, etc.
After few iterations, here’s the finalized property card:
Information retained on property card includes:
- Property name (with star rating and badges)
- Photo gallery
- The total and nightly price
- The property’s user score (in radar diagram)
- Top-rated facilities
- Payment (payment types and policies)
- House rules (Check-in and out time)
Anecdote: Booking’s also on the same playground
While I was working on this redesign project, Booking also lived its own comparing list.
Though surprised at first, I am pleased to see this happen as it confirmed the assumption we articulated. After examining Booking’s interaction design I summarized some pros and cons.
Pro #1: It’s easier to manage: the list consists of recently viewed properties instead of manually added ones and a user can easily remove them
Pro #2: There are more options: 4 properties could be compared at a time and more are accessible when scrolling
Con #1: Obscure prerequisite to adding a property in the list: a user has to open a new tab and check the detail page to make it accessible in the comparing list. Based on our research, the action of opening in the new tab itself is the reason that annoys a user.
Con #2: information may not be succinct to fulfill its purpose: the information in the property card is even less than the property card. I am afraid it’s not succinct for a user to make his/her judgment at this stage.
The final notes
I’d say this side project is a journey filled with surprise and fun. I only began from the filter and search experience but more opportunities were discovered as I dove deeper so I expanded the scope a bit more.
Though I tried my best to back up my design decisions, I wouldn’t say my judgment would be always correct as I don’t have any experience working in the traveling industry nor insider input from stakeholders in Booking. Nevertheless, I am still publishing this project with my heart being proud and humble — it’s a remarkable learning journey to me, and I sincerely hope my thought process could nudge the industry towards a better hotel searching experience.
Appreciations
I’d express my appreciation to Han, Cheng, and Ching Liu (Jean) who responded to my invite as an interviewee and inspired me a lot in the ideation of the project.
References
- Mauricio Prieto, The State of Online Travel Agencies — 2020.
- Broadbent DE. The magical number seven after fifteen years. In: Kennedy A, Wilkes A, eds. Studies in long-term memory.
- Mastin L. Short-term (working) memory. The human memory: What it is, how it works, and how it can go wrong.
- the Design Museum: What is “Good” Design? A quick look at Dieter Rams’ Ten Principles.
