Archive for the ‘Unlisted’ Category

Booking.com Redesign

January 23rd, 2014

Here is a quick redesign of the hotel results section of Booking.com. In the interest of time, I focused on redesigning one single hotel listing. Below I will explain my reasoning behind some key parts of the redesign.

Before:
hotel_result_before

After:
hotel_result_after

What’s different and why it’s better

I’ve made quite a few changes here and removed a lot of content from the original version. Let me explain some key changes and my reasoning behind them.

Information overload reduced

The hotel results page presents a lot of information to the user, not all of which is relevant at this stage of the process. One of my goals was to remove extraneous and distracting information to aid the user in skimming the results page. A few things I removed altogether:

  1. Removed: “There are X people looking at this hotel”
    This text seems to be placed here to either encourage the user to book quickly or to indicate that the hotel is popular. I felt that the “5 rooms left” text and “user rating” do a better job of this.
  2. Removed: “Latest booking X hours ago”
    This text shows that these rooms go fast, but otherwise it’s not exactly what the user needs at this step. Something like this might be better on the hotel information or more info page, once a user has indicated they are considering this hotel.
  3. Removed: Individual room types and prices
    For the average user that needs to book a room, their first concern is the price.  My redesign removes the tiny individual room prices and replaces it with a one price (the lowest available). One price per hotel allows the user to quickly skim the page to determine what is in their price range. Again, individual room types and prices can be presented later in the flow.
  4. Removed: “Value Deal”
    Unless they hover over this text, the user will likely be confused what this means. Hovering provides more context, indicating that this price is especially low. Arguably, this information is relevant, but it needs to be delivered in a clearer way. For now, I’ve left it out.

Information hierarchy established

Now that we have some extraneous information removed, it’s time to focus on what is important to the user and in what order. As a person who books hotel rooms online I can say that, as a user, my priorities usually are in the following order:

  1. Price
  2. Book now button
  3. Photo of the hotel
  4. Hotel location (map)
  5. Reviews/ratings from others
  6. Hotel name

With that hierarchy established, we can now layout the elements, giving appropriate visual importance according to the importance to the user. Some improvements based on that hierarchy are now:

  1. Price: Big and bold
    Although each individual room price is helpful, I first need to know if this hotel is within my price limits. Showing the price big and bold and surrounded by whitespace gives it the most visual importance.
  2. Book now: Bigger, cleaner
    If the user doesn’t find this button, all is lost. Better to be on the safe side and increase the size of the button and clarity of the text, even just a little bit.
  3. Photo: Bigger
    Booking travel online isn’t just about numbers. It’s also about romance. Photos deliver an emotional impulse better than words or numbers. One look at that photo and I have a pretty good idea what the hotel is like and if I want to stay there. Making the photo larger helps bring the user closer to the reality of the hotel experience.
  4. Location: Add a mini-map!
    Hotel price is one thing, but if I don’t know where the hotel is, it’s practically useless. It’s easy to find a cheap hotel that’s 2 hours outside the city center, but that’s probably not what I want. A simple mini-map gives a general idea of the location without getting too detailed. Scanning through a collection of these hotel listings, the user can quickly compare location vs. price for many hotels at once just by scrolling. Also, the map shows more than just distance from the city center. Some users might want to be close to their important business meeting, their friends house, or a specific neighborhood. With the mini-map, they can quickly get a sense if this hotel is near what’s important to them or on the other side of town.
  5. Ratings: Simplify and standardize
    In the original design, there were the following indicators: a star rating, a trophy icon (sometimes), a thumbs up (sometimes), and a heart icon (sometimes) all next to the hotel name as well as a user rating number on the right side. All of these indicators attempt to answer the same question:

    “What do other people think of this hotel?” 

    It’s debatable how many of those you need in order to answer one question, but I decided that user rating and Booking.com rating where enough. I converted the star rating system to a simple number rating so that the two ratings can be compared. Also, I removed the words “Good”, “Very Good”, “Wonderful”, “Excellent”, etc. from the user rating as they seemed redundant. Also, the words raise questions like, “Is wonderful better than excellent?“. This is an impossible question to answer, much like “What’s the sound of one hand clapping?”.

  6. Hotel name: Mostly unchanged
    When you really think about it, the name of the hotel is probably one of the least important things to a user unless either a) the hotel name is a recognizable brand or b) the user has stayed in the hotel before. Otherwise, one name is much like another. I’ve increased the size just slightly.

Other improvements

  1. 5 rooms left!
    It does seem like there should be some sort of indicator that time is running out in order to encourage the user to take action. For those cases where there are few remaining rooms, I kept the text “X rooms left”, but consolidated it to one place underneath the book now button. This placement acts as a nice encouragement if the user is hovering over the book now button indecisively.
  2. Simplify color scheme
    Several blues, a yellow, a green and a red seemed like too much. The new design keeps it simple and clean with two blues and a yellow and as a result stays “on brand”.
  3. Hide this hotel
    This functionality existed in the original design, but was tucked under the photo on the left. I moved it to the right and added text to explain it. It’s a helpful piece of functionality that I imagine was getting lost.
  4. More info
    We’ve removed a lot of information, some of which might be useful to the user. Clicking “more info” would expand the current listing and allow for more detailed room availability, reviews, and possibly more photos.
  5. Improved typography
    Moving away from Arial to OpenSans gives it a friendlier, less robotic personality. I’ve also given just a little extra breathing room to make it all more digestible. Ahhh…