Critique,+Mark+Stewart--Hipmunk

Hipmunk.com is a travel search site designed to help people find plane flights, train rides, and/or hotels for travel. The site does not book tickets, but is designed so that you can go through the process of selecting a full itinerary for a trip and then be routed directly to the service that does the booking (e.g. Orbitz). What makes Hipmunk unique is the simplicity of the booking process and the visual representations of itinerary details it employs to help make the process more intuitive. This is a booking service that is designed with user interface in mind.

In the basics of user interface design, Hipmunk does very well: All fonts and buttons are large and readable, menus are visible, obvious, and appropriately labeled. Even dropdown/pop-up menus are kept to a minimum--almost all choices are visible without having to click a single button. The style is consistent from page to page: color scheme, Hipmunk logo, and menu stylings are allpersistent on all parts of the site.

The opening page consists primarily of four text boxes and two calendars. The text boxes are for arrival and departure airports and dates, and the calendars are also for dates. The boxes for the airports offer search completion of locations and airport abbreviations, though “Did you mean...” search correction is not implemented--this might make it slightly more efficient. Dates can be selected on either the date text boxes or the calendars, and making a selection in one will change the entries in the other correspondingly, eliminating any potential ambiguity and providing helpful visual feedback. Given the manner in which things are selected, errors are nearly impossible, but the site will notify you with a red error message that it couldn’t figure out a date or airport you entered if they aren’t appropriate entries.

The flight booking page is where Hipmunk really shines. Rather than a simple list of search results, Hipmunk offers a filterable visualization of the available flights, arranged in a time vs. (user-selected parameter) graph. Hipmunk automatically filters out flights that are worse than those included by all measures (e.g. same time frame but more expensive than another flight, same price but earlier departure and later arrival, etc.), and allows the user to filter by time or airport, and to sort by a number of parameters, including their “agony” algorithm, which selects the least “agonizing” flights in terms of time, price, etc, combined. Errors are near impossible, since selecting flights, and seeing info on flights is all done visually (recognition, not recall). In the visual, you can see arrival and departure times, connections, airline, and a “has wifi” icon. By clicking on a flight, you can see more detailed information and choose to book the flight. The only issue with the graphic is that is will only display airline if the flight icon is large enough (i.e. if the flight take over an hour or two) to display the airline, and if it can’t fit the airline, it will try to fit the wifi icon. This adds some ambiguity if you are unfamiliar with the purpose of the icon, though clicking on a flight will make that information clear, I couldn’t at first figure out why some flights had a wifi icon and others had airline names. One improvement they could make to this page is to provide a dummy model of the flight icon with labels for the airline, wifi icon, and connecting flight element to remove any possible ambiguity. All in all, though, easily the best flight-booking user interface I’ve ever used.

Once departing and arriving flights are selected (a visual tab-representation at the top of the screen tells you which one you’re currently selecting), Hipmunk routes you to Orbitz, or whichever airline site will complete the booking.

The hotel page is much the same style as the flights page, except where the flights page includes times and “agony” filtering, the hotel page includes a map of hotel locations and “ecstasy” filtering. It also provides hotel reviews, allows you to draw a box around an area you want the hotels listed to be in, and will overlay heat maps corresponding to the frequency of local establishments (restaurants, bars, shopping centers, etc.) in the area. Very intuitive. Also as with the flight booking, all selections are buttons and lists--all recognition, no recall. Clicking on a hotel will show more info, including reviews, and will display a booking option that will reroute the user to a booking site with appropriate selections made.

This site has one of the best user interfaces I’ve ever seen. The visualizations are brilliant, the options are clear, the style is consistent, information is displayed in ways that are both clear and eliminate unnecessary clutter (e.g. unquestionably worse flights), and allow filtering. The booking process is intuitive and obvious, recently searched bookings can be saved for future use, visual feedback corresponding to commands is used consistently and is often animated to make it obvious exactly what the user is changing (when, for example, a user filters by flight times, the time bar will creep toward the new time, eliminating disqualified flights as it travels), what errors are possible are indicated in obvious ways, recognition over recall is followed to a tee, and the system corresponds precisely and quickly to user specifications for flights and hotels. They even have a “Live help” chat box integrated right into every page of the site. A few tweaks: the flight booking graphic could use a flight icon legend to make it that much easier to understand, the multi-stop booking page needs to have options for more than 3 airports, and the “I’m flexible [on times]” booking search could be integrated into the main search without too much trouble. I didn’t realize what that it provided the service it did at first, and thought Hipmunk didn’t allow the user to select a range of possible departure dates.

Images: