Archive for January, 2014

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…

A graphic history of US Presidents

January 11th, 2014

I’ve got a weird thing for timelines. Like, if timelines were a person, they’d probably have a restraining order against me. When I was in school, learning about history, I always felt like I was missing the context of what we were learning about. Where it fit in the big picture. Timelines are great for taking a step back and seeing something as part of a whole.

I’ve been working on this timeline of US Presidents off and on for a long time now and it’s not done yet, but it’s worth showing. A few things I wanted this timeline to show at a glance were:

  1. An overview of presidential terms, who’s served longest, shortest, etc.
  2. How many terms ended in deaths and/or assassinations.
  3. What presidents served during which wars and other notable periods (ie: Prohibition)
  4. How have the length of wars changed over time?

Here it is so far, still not quite there yet, but I welcome anyone’s feedback. (Click thru to view it full size as an SVG, on which you can zoom in and out with your browsers zoom controls.)

presidents_v07

A Blackjack Chart Tufte Would Be Proud Of

January 4th, 2014

At some point in the past year I really got into blackjack. If you think you’ll ever find yourself in a casino with time to kill, this is a great game to know and if you memorize some basic strategy rules you can reduce the casino edge to only 0.25%. Earlier this year, I set out to do just that, but the problem I ran into is that most blackjack strategy charts out there are some of the worst examples of information graphics in existence.

Existing Charts

Garish colors, poorly thought out layouts and just plain bad design. See the following screenshot of a Google image search:

blackjack charts

Yuck.

Rather than mistreat my delicate designer eyes by staring at these things, I decided to design my own. Softer colors, more meaningful abbreviations, and clear division of sections were quick changes that made a big difference in readability. If you are well-versed in blackjack, then skip straight down to the design dissection section.

How blackjack works (in a nutshell)

I’ll attempt to explain just enough about blackjack here so you understand the design choices, but I’d encourage you to check out the game in more depth elsewhere because it’s great fun when you know how. You play against the dealer (not others at your table) and you attempt to get as close to 21 without going over. The key thing to know about blackjack when looking at the chart is: you are dealt 2 cards face up and the dealer is dealt 2 cards with just one facing up. Depending on the combination of the sum of your cards (shown down the side) and the dealers up card (across the top) you need to hit, stand, double down or split. For each combination there is a statistically-preferred action to take which gives you the best possible odds. Memorizing what do to do and when can reduce the casino edge to around 0.25% which means you and the casino are almost equally matched. Throw in a few free cocktails and you can come out ahead and have fun doing it.

My chart design

strategy_chart_v02

Design Dissection

What makes it so great? Here’s a few key improvements:

  1. Color
    Softer less saturated colors are easier on the eyes. I kept the basic idea, from some existing charts, of “red means stop, green means go” when I choose background colors to indicate action. “Stand” is red, “Hit” is light green, “Double Down” is darker green. Extra green means extra “go”, in a sense, because “Double Down” means we are doubling our bet. Using that logic, though, it was tough to determine what color to use for “Split”, which also involves a doubling of your bet if you have 2 of the same card (ie: a pair of eights). In theory it should also be green, but with 3 greens I thought there would be too little differentiation between them so I choose a light blue instead. The blue is still far away from the “red means stop” of the stand colors.
  2. Subtle Divisions
    One of the more common information graphics blunders when using data tables such as this is to divide each cell with a thick black line. The result is that the viewer focuses on the dividing lines rather than the information within the cells. Tufte calls this an “information prison”. Here I use a thin white line to divide the cells which recedes to the background especially among the softer background colors of the cells.
  3. Meaningful Abbreviations: Sp, St, D, H
    Most other charts abbreviate the words “split”,”stand”, etc within each cell, and each chart that does so runs into the question “Should ‘S’ equal ‘Stand’ or ‘Split’?”. Some charts solve this problem by using “P” for split, which I think is extremely confusing. Others use “SP” for split and “S” for stand, which is also troublesome because if you are are only looking at the upper portion of the chart, it’s unclear whether “S” means stand or split. Only by looking down to the bottom of the chart will you understand that “SP” is split and so by default “S” must be stand (?). I solve this problem with two letters for both stand and split, reducing the amount of looking around the viewer must do in order to get the needed information. In addition, I use lowercase for the second letter as I feel this better indicates that is is the beginning of one word and not an abbreviation of two.
  4. Intelligent sections
    If you are using this chart during an actual game, you are most frequently going to use the top section. You’ll only use the Aces and Pairs sections if you have those cards in your hand. Creating a subtle division between the 3 sections allows you to quickly find the section you need (and ignore those you don’t) based on the cards in your hand.
  5. No explanatory headings
    Those not familiar with the game might be confused initially by this chart because there are no labels to indicate that your card totals are down the side and the dealers up cards are across the top. I originally made this chart for myself alone, but even for others, it makes sense to remove those headings as they are either easily explained off the chart or, for regular players, could be easily figured out. If headings or labels were placed on the chart it would add clutter to the chart that would only be useful on the very first viewing and then superfluous afterwards. Also, I designed the chart to fit on a wallet sized card if the viewer wanted to take it with them to use at the tables (which is allowed, btw). Removing the headings allows the rest of the content to be larger and more easily read.