A UI audit of Hipmunk isn’t easy

I have to hand it to Hipmunk. I get the feeling the name came from someone’s collection of impulse-purchased domains but they’ve truly managed to make it their own. The begoggled rodent is only the starting point for this left-field branding campaign. Hipmunk’s new video ad clearly directed at the lives-online crowd (it took me two views to get it) flippantly gloats in the superfluity of their mascot and in fact dwells on it without even telling us why their site is better. That’s chutzpah. I wonder if their next ad will involve a cage fight between the chipmunk and the Travelocity gnome with William Shatner as referee. A straightforward demonstration ad (a la iPhone) might be more useful in actually getting people to use the service, but I’m not complaining. I’m entertained.

I took this audit as a challenge. Unlike its competition which have only sales in their DNA, Hipmunk was built with user experience in mind from the get-go. Despite its slick visuals, there is no Flash in sight. According to the founder Adam Goldstein, the site uses “boatloads of Javascript”. It has nowhere near the budget of its competitors like Travelocity and Orbitz and yet it has a product ten times as thought-out. Compare the interfaces of three established travel sites with Hipmunk:

Holy Chipmunk, Batman!

While Travelocity, Orbitz, and Kayak make you wade through a mountain of ugly numbers, boxes, and meaningless data, Hipmunk gives you all the same data condensed into instantly comprehensible visuals – bars that depict flight and layover times. There is not an ad to be found on the entire site; the business model is built upon commission. The result is clean, usable, and even… fun.

Nonetheless, if I’m going to claim to be a UX professional, I cannot only pick on lousy UIs. I need to occasionally gut a well-planned, beautifully-executed product and lay the entrails out on my chopping block for the world to see. And that’s what I’m here to do today. So without further ado, this is my audit of Hipmunk.

Flight search results

Cleaning up the header

Suffice it to say that sorting by “agony” is brilliant. It restores my faith in humanity that people are willing to pay a little more to not be miserable because I was beginning to wonder. This feature can certainly be duplicated and even improved upon, but if Hipmunk gets the jump they can establish brand supremacy. Here’s what needs to change:

Don’t cram the flight itinerary into tiny grey letters on the left. Put it in big, bold letters on the top and move the leg-select control to the right.
Those prices on the left? It wasn’t instantly clear to me that was a projected total. Replace the tiny itinerary label (now moved up and inflated) with some microcopy saying “Min. Round Trip Total”.
I’m not sure if it’s included in your agony ratings, but I’d like to see a “no backtracking” checkbox. I once was looking at flights from Asia to Seattle and one itinerary went from Seoul to Portland to Las Vegas to Seattle. That’s right. It came within a two-hour drive of Seattle then flew two states away before finally coming back to Seattle. Aside from the wasted time, that notion is offensive in principle. I’d like to see an option to filter out that type of nonsense even if it does not meet the criteria of “agony” according to the algorithm.

Filtering by time

Go big or go home. Bring on the fancy visuals.

It’s not instantly apparent without some playing around, but Hipmunk lets you filter out trips that depart before a certain time and arrive after a certain time. It’s a neat feature but not idiot-proof. Someone might not be sure what exactly is going on because when they slide the vertical bar (if they manage to find it), the area to be excluded is minimally shadowed. When the user lets go of the mouse button, several flights disappear and are instantly replaced by others. Of course, if the screen is full of flights, they may not be aware that flights disappeared. Here’s what needs to change:

Make the highlight area heavier and make it red. Red has instant connotations of exclusion and negation.
If the red area touches a flight’s timeline, the entire flight should pale out.
(Not visualized) When a flight is excluded, it should evaporate in an animation, then the remaining flights should slide up into its place. This makes it instantly clear what happened. Otherwise it almost seems as though the user has caused a flight to leave later (wouldn’t that be nice).

Multiple-destination booking

Little things make a big difference

The current design of “Multi -city” is confusing. There are nine boxes whose arrangement into rows and columns is not at all clear. Each row represents a flight while each column represents a facet of information about that flight. The boxes are closer together vertically rather than horizontally which groups the flights together suggesting a closer relationship between each flight than between information about the flight itself and this is counter-intuitive. Here’s what needs to change:

Simply putting a blue box around the first and last flight cordons the data in a logical way. Yep. That’s it.

Selecting a leg

Maybe I’m biased because I make maps.

There was no UI faux pas here to speak of. Rather this is about a feature request. If Hipmunk is serious about information visualization, then it only makes sense to let the user envision what their flight path will look like. It’s more about an immersive experience than achieving immediate results.

Forward a deal

Please do not Tweet me a deal.

This is a no-brainer. If someone else is too lazy or tech-averse to shop for their own flights, someone else might have to do it. This feature would let someone else do the virtual legwork then send the deal to the buyer. The email could come with a notice that the recipient needs to act ASAP lest the price become unavailable.


Hey… what if I want to view how my hotel relates to the topography? It could happen… eventually.

Come on guys. This is just unprofessional.

Hotel information pop-up

It pops up way too fast

When a user mouses over a hotel or cluster of hotels, a pop-up window appears with basic information about the hotels. This is good. Unfortunately the pop-up is instantaneous in activation and onset. The result is jarring and those who tend to let the cursor follow their eyes will be most annoyed. Here’s what to change:

  • Put a 1/8 second or so delay on activation of the pop-up.
  • Let it fade in over an interval half as long as the activation delay.

Price sorting

Color-coded buttons reduce cognitive load

Prices are color coded into green-cheap, blue-average, and red-pricey. The price filter buttons are all blue. It’s nothing a person with middling intelligence could not figure out, however why increase the cognitive load? Here’s what to change:

  • Color code the buttons to their respective price.
  • When the user selects a price, the button turns yellow. Instead, make the color a more intense version of the price color like a light turning on underneath a semi-transparent button.

Hotel clusters

This map has balls

Given the space allotted, this isn’t an easy problem to solve. Right now, a cluster of hotels on the map appears with a number on top denoting how many hotels are clumped into that small piece of real estate. As the user zooms in the clusters break into smaller clusters and ultimately into individual hotels. A cluster is color-coded to the price-range that occurs most frequently so a clump of three hotels with two pricey and one cheap will appear as red. A clump with equal distribution among all three defaults to average. There is no visual distinction between a cluster and a single hotel besides the number and even though, intellectually speaking, it’s not hard to understand, once again, cognitive load. Here’s what to change:

  • When the user zooms in, the clusters of hotels should divide like cells in a zygote.
  • The clusters should appear as stacks of up to three circles representing the proportional price range found in the cluster. Making it look good and fitting it into the format isn’t easy as shown by this crude attempt using only Photoshop cut ‘n’ paste. Hey… you want something better, pay for it.

A harder problem to solve than you’d think.

Managing multiple searches

One possible solution.

Hipmunk lets you have multiple searches open for both flights and hotels. You can switch between them using tabs. Unfortunately this does not apply to the home screen. Hipmunk does something weird. The home screen includes the search form, the eponymous rodent, and standard-issue links at bottom. The site has a remarkably similar screen that appears when a user selects the “New Search” tab.
Where’d the bottom links go?

The screen includes the top-mounted tabs, but no links on bottom. If the user wants to check out the site’s About page or get the iPhone app, they have to go to the home screen, which is not the very similar new-search screen. This may easily lead them into believing the home screen will contain the tabs with their open searches. If they had created several queries, they may well be peed-oh that they have to enter it in all again. Up until now the UI faux pas have been pretty venial but this is a big, fat, ugly sin. Here’s what to change:

One option is to simply include the tabs on the home screen. This is probably the better option.
If the site really does not want to have Hipmunk appear twice on the home screen then, as depicted above, the open searches can appear as rectangular buttons to the right of the main search box.
Perhaps more than anything else, put those bottom links on the new-search screen and on the results screen. Seriously.

Hotel information

No contact info? Don’t make me Google it! I’m lazy.

There’s not much to say about this other than there really ought to be a URL for the hotel website and a phone number. Basic stuff!

And that wraps up this case-study. If you aren’t a UI type, you probably aren’t reading this as you checked out halfway through. If you made it this far, please leave your feedback. If you know anyone at Hipmunk (a long-shot as they only have ten employees), send it their way.

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>