Hipmunk Case Study: UX Lessons for Web Developers

Hipmunk is a modern travel search engine. But what does that mean in 2013? How do you solve user needs without overwhelming them? How do you consider what people’s goals are and design a user interface to support this? Let’s dive into what Hipmunk does well and not so well!

Don’t burden the user with cognitive overhead just because you can handle multiple use cases

Like many websites, Hipmunk offers a range of functionality to its visitors. Specifically, Hipmunk is for both flight and hotel search. However, a problem emerges when one tries to balance two of Nielsen’s key heuristics for user interface design: “Flexibility and Efficiency of Use” and “Aesthetic and Minimalist Design”.

The Hipmunk Homepage in June 2013
The Hipmunk Homepage in June 2013

Surely, it doesn’t make sense to blindly follow Nielsen heuristics. However, deconstruct the user experience here. Page loads. I scan the page, arriving at “Search Flights” and “Search Hotels”. I see two elements with equal visual prominence in the information hierarchy – generally a usability no-no. Where do I look? Admittedly, I’ll start on the left, because as an English reader, I move left to right, and the cursor is active in the “From” field.

However, I had to look right as well to process what was there before I could take action on the left element because the design doesn’t make clear where my attention should be. I could not ignore “Search Hotels” because it was designed to be nearly just as important as “Search Flights”. As much as my eyes move left to right, I also consume the site top-down to some extent. And when I vertically reach the two white boxes, a user may get stuck due to the equal visual treatment.

Indeed, on mobile web, by using HeatData we found that users got stuck at a staggering rate, scrolling past key fields and zooming in on areas that had no functionality.

users got stuck at a staggering rate

There could be myriad reasons for this design. Indeed, it’s likely that hotels generate a large percentage of revenue for Hipmunk, so featuring it prominently is important for them. And you can entice someone to book a hotel with you when you make that option clearly available as opposed to tucking it away somewhere. So a product tradeoff is cognitive overload for a user in the hopes of getting X percent more people to also book hotels through Hipmunk.

To be fair, this isn’t how Hipmunk always balanced flight and hotel search. Here is a screenshot from just 5 months ago in January 2013.

5 months ago in January 2013

Help people with useful defaults based on context

When you use Hipmunk on your smartphone, what are the circumstances? Either you’re planning a trip in advance and not using your laptop for some reason…or, more likely, you’re on the go and need to book a room pronto. Hipmunk Mobile optimizes for this latter use case.

 Hipmunk Mobile optimizes for this latter use case

Location? Check. Just for tonight? Check. 2 guests? Probably. 1 room? Check. And just like that, you’re one tap instead of five, or more, from searching for hotels. The key is not adding work when the defaults are wrong. Even if Hipmunk is wrong about the dates, and you actually are planning a trip in advance, it’s not adding steps by setting defaults. Consider where in your app or site you can save many users time without costing others time through useful defaults.

When people are going through a funnel, don’t let them forget the value they initially saw to get to where they now are

Once you have someone committed to signup, purchase, or otherwise complete a funnel, the worst thing is to lose them. One way people get discouraged and choose to abandon funnels is forgetting about the value you’re providing them. Hipmunk successfully transitions users from busy flight selection views to a focused view on the leg that the user has chosen.

Busy Flight Selection View

Busy Flight Selection View

Focused Flight Selection But Without Disorienting The User / Leaving Flexibility to Correct If Needed

Leaving Flexibility to Correct If Needed

It’s important to balance use cases, leverage defaults, and tighten up conversion funnels if your goal is to engage and retain your users. Hopefully these examples from Hipmunk have given you some ideas to help your web design take flight!

Author bio

Jason Shah is the creator of HeatData, an analytics tool for tracking and optimizing what people do on mobile websites. He blogs about user experience and personal growth regularly at blog.jasonshah.org and you can follow him @jasonyogeshshah.

Enjoyed this article? Subscribe to read more like it

 

Sponsors