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.

Comments are closed.

Archives

Follow me on TwitterFriend me on FacebookAdd me to your circlesFollow me on Pinterest