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

The Making of Hipmunk on Android

I am an Android developer, not a blogger, but I know that when Danilo built and launched our iOS app last February, we got a tons of fans clamoring to hear the intricate details of how he landed at Hipmunk and how he built the iOS app. His response is here, and below is my shot at doing the same.

We released Hipmunk for Android a little over two weeks ago. It’s been my sole focus since I started on June 13, less than a month after I graduated from the University of Wisconsin, and it’s definitely been a wild ride so far…

I’ve always been a big fan of Hipmunk, and have been building Android apps since I got the original Droid, on its release day, November 6th, 2009. So two weeks before my graduation, when I saw Hipmunk was looking for an Android developer, I knew I had to apply. My phone interview with Steve was sandwiched between two finals resulting in an in-person the next week. I was offered the job while in San Francisco and flew home as Hipmunk’s (ecstatic) Android Developer. A little over two weeks and a drive across the country later, I showed up for my first day at Hipmunk.

I had built Android apps before—my first being a Tetris clone which got ~400,000 downloads in three months before the real Tetris company sent a DMCA to Google and got me kicked off the market—but I knew building a flight search service, rather than a game, would be a completely different challenge.
 
When I started working, I had one major goal: to make a really good Android app that wouldn’t look second rate compared to our iOS app. This was super important because as an avid Android user, I’ve often been disappointed by the quality of the Android version of an app that’s already on iOS.
 
Since our iOS app already did everything I wanted the Android app do, I knew exactly what I was up against. It was a unique situation to find myself in as a developer—and it meant the only thing between me and my goal was the code I had to write and the interface I needed to design.
 
Our iOS app has a fantastic user experience and a lot of thought went into it. In order to make the Android app just as good, I did my best to bring the same functionality to Android, but do it in a uniquely Android way.
 
An example of one Android feature I brought into Hipmunk’s Android app is panels. If you’re an Android user, you know what I mean – these panels pop up over an application’s screen content and can be interacted with. Here’s a screenshot with the flight details as a panel over the flight search results:

 

You’ll notice the distinct difference in the iOS version below, which slides over to a new window (rather than pop up a panel) and has a graphical “back” button at the top:

Panels are great because they are fast, the back button makes dismissing them super easy and natural, and, most importantly, the user stays within the same “context.” Meaning, for example, the user can look at more information about a flight without leaving the flight options screen. It’s something I think iPhone users are missing out on.
 
On the design side, I worked closely with Danilo, our iOS developer and a real Apple fanboy. He helped design Hipmunk’s Android experience so that it remained as he puts it “a spiritual cousin to the iOS app.” I imagine he never expected to design an Android app, but we’re both really proud of the app’s feel.

On a much geekier note, we also dealt with some fragmentation issues. Android’s fragmentation is a hot topic among developers, and typically, it refers to the different versions of the operating system, screen resolutions/devices, and UIs from manufacturers that are all under the Android umbrella. If you’re going to build an Android app, it’s just something you have to overcome. Here’s how we did it:
 
Android OS Version Issues:

  • We chose to target Android 2.2, which means we support 85% of active Android phones
  • In using 2.2, I was able to access most of the newer and valuable features for developers that have been recently added to Android

Variety of Screen Resolutions / Devices:

  • We designed what it should look like at 480×800 and then we made sure it would look like that on all of the key resolutions (For phones these are 320×480, 480×800, 480×854, 540×960. For tablets, 1024×600 and 1280×800)
  • To make it look right, I used a lot of 9-patch images, an Android concept called density-independent pixels, and some raw Canvas drawing
  • While it would have been nice to have one resolution to worry about, this didn’t make designing that much more difficult

Manufacturer’s UI Skins:

  • This was by far the most annoying thing we dealt with when polishing the app
  • The customizations that make a certain manufacturer’s Android flavor different from another made it unnecessarily difficult to offer a consistently amazing and polished appearance
  • Irritating differences were found in animations between activities, different colored glows and other UI elements, and different padding and styling to basic building blocks like Dialogs
  • These skins were my personal pain points and prevented me from ever feeling like the app was perfect. There is always more you can do, but the benefit just kept shrinking, and it was time to give Android users the app.

Now that our Android app is out, I’m quite relieved to be honest :) And while I’m incredibly proud of what was built, we will still continue to iterate and update the app.
 
Our next challenge is to bring hotels into the experience. It’s an important part of travel planning, and we know booking hotels issomething users want to be able to do on-the-go. We also know it’s nowhere near as easy as it should be on mobile devices right now, and we plan to change that.

- Ryan Oldenburg
 
Haven’t tried our free Android app yet? Grab it from the Android Market. And if you’ve got a few minutes to kill, watch a demo. Got an iPhone? Grab our iPhone app from the AppStore.

  • 0