Archives

The Making of Hotel Search on Mobile

It began with a demo. 

Our mobile hotel search app was weeks away from shipping. The UI was tight, performance was shaping up and the punchlist was shrinking. 

But there was a problem. Jacqueline, our press whisperer, did a hotel search in the new app. She couldn’t figure out which, from the dozens of hotels depicted on the map, was the one she actually wanted – and didn’t know where to start.


While seeing all those options from the comfort of a desktop’s huge screen wasn’t bad, now the results were unusable. We debated changes but my head wasn’t really in it. My ears were ringing.

For all our slick UI and data visualization, we were nowhere in terms of making it easy and fast to find a great hotel from your phone.

We’d failed.

Alongside this, I’d been devouring Edward Tufte’s Envisioning Information. The book is packed with styles and strategies for displaying data, along with analysis and cautionary tales. On the train one morning, I turned a page then violently emptied the contents of my forehead onto the seat in front of me.

For on that page, Tufte had helpfully supplied the solution to our problem.

This diagram combines two intricate layers of information: component illustrations and their identifying numbers. One is rendered in grayscale, the other red. Despite the complexity, the image comes apart quickly and cleanly. With this example in hand, redesigning the dots’ behavior and appearance went quickly.

We could fill the entire map with hotels, as we already were, but now we’d only color rooms whose stats made them worth recommending. The rest would appear grayer and smaller – easily ignored, but still illustrating the contours of an area’s hotels. When the user moves or zooms the map, we do all the math again, coloring only the best options in the new region.

 

The effect draws your eye to investigate the creme-de-la-creme. From there, UI mechanics take over to examine hotels without leaving the map. Before you know it, you’re making choices.
 
It was also important to make scanning hotel lists easier on the eye. Hotels are broken into three price buckets: cheap (green), average (blue) and pricey (red). Room prices were set in the color of their bucket. Because each price was different, interpreting bucket meant actually reading the colored text, which takes a little time. By setting the price in a simple badge that’s always the same size and position, the user only needs to glance to know a hotel’s bucket. A small detail, sure, but it makes a big difference with momentum scrolling.

The resulting experience was so quick and satisfying, we wanted it on the site, too. So go try out the new Hipmunk Hotel search for AndroidiOS, and now, the web.


— Danilo

  • 0

New: Hotel Search on Mobile!

You’ve been asking, and so we’re pleased to announce that hotel search and booking is now available for free through our iOS and Android mobile apps. Until now, just flight search was available on the go, but with this major update, we’re bringing our innovative, visual hotel search to hundreds of millions of mobile devices, including yours! Check out these great reviews from TechCrunch, VentureBeat, San Francisco Chronicle and CNET!


Hot on the heels of our successful 2011 launches of the iOS and Android apps, our mobile developers, Danilo Campos and Ryan Oldenburg, have been cranking away on this since summer. They’ve brought the same unique, map-based hotel experience you know and love from our website to our apps. Now, you have Hipmunk’s inventory of over 300,000 global hotels at your fingertips. 

Here’s a quick walkthrough of what you’ll see (on iPhone):

First off, we noticed that most of our users who were searching for hotels from mobile browsers were searching for a hotel for that night. So we automatically search from your current location, enabled by GPS, with ability to enter a new destination:

We use “Ecstasy,” a combination of reviews, prices and amenities to figure out your best options. The hotels we think you’ll like show up as colorful dots. Red ones are pricey, green ones are cheap and blue ones are average.

But picking a hotel is unique to an individual, which is why we let you filter by price or chain, and overlay heatmaps:


Heatmaps let you see which parts of a city are most active for different interests, including food, nightlight, shopping, and tourist attractions:

So let’s grab a hotel. Click on the colored dot for quick hotel details:

Tap again to see more details on that hotel:


We also let you see TripAdvisor reviews if you’re interested:

And when you’re ready to book, we give you options. You can book through the supplier, email the link to a family member, colleague or friend, or receive the finish code so you can finish the booking from a desktop:

And here’s what you’ll see on iPad:

And on Android:

And it’s that simple! The Hipmunk Flight and Hotel Search App is available for free from the App Store here and Android Market here.

Update your app or download it, test it out, and let us know what you think!

— Adam

  • 0