Hipmunk for iPhone Post-Mortem

Organizing a conference and want a presentation on lessons from the design of Hipmunk for iPhone? Let’s talk!

Haven’t tried our free iPhone app yet? Grab it from the AppStore. And if you’ve got a few minutes to kill, watch our LAUNCH demo.

Interface and Experience

I have a confession: At first, I didn’t get Hipmunk. I mean, I understood the merits of the interface, I respected the user focus of the site, all of that was awesome and drew me to the iPhone project.

But I didn’t get understand the why of what we do. So here’s something from the early wireframes I used to convince Adam and Steve to hire me:

Crappywireframe

Eww, that’s… crap. What’s the point? It looked like everything else in flight search. The time and date-heavy stuff makes finding flights so frustrating and time consuming – doing mental math sucks.

On reflection, I’m shocked and amazed I didn’t blow my chance at the job by showing these.

With characteristic diplomacy, Adam asked what I thought about working the gantt chart UI from the website into something suitable for mobile.

Okay, let’s try that.

Ganttywireframe The airline names are slung below the bars, a concession to the very narrow elbow room that you get when the iPhone is in portrait orientation. It was an improvement, and seemed pretty iPhone-like, but it didn’t seem Hipmunk-like.

Said Steve: “There is so much unused space in the graph that it’s borderline offensive.” So each row was squeezed down a little further.

Lesswhitespace

If a label would fit in a bar, the app would show it. If not, the label would hide. Now the faintest glimmers of what we knew as Hipmunk were starting to stare back at us from the wireframes. There was more to figure out but now it was safe to proceed to a prototype.

For this, Briefs has my undying love. Briefs makes it extremely easy to prototype your app without having to do anything even remotely like hard work. If you can save your wireframes as PNG files and learn extremely basic scripting, you can crank out a touchable, fully interactive prototype in 30 – 60 minutes.

This process of wireframing and prototyping became extremely valuable. Drawing things is much faster and easier than coding them. When one or all of us hated some part of the nascent interface or experience, it was trivial to drag some boxes around until our pain went away. This minimized the chance that something shitty would ship as part of the app. There’s something about coding a feature that calcifies it.

As the developer, this prototype also gave me a powerful map as I built the application. Anytime I was unclear where I should go next or how I should build something, I could always whip out my iPhone and explore the future of the app.

If you don’t prototype your application before you start building, you’re doing it wrong. It’s just too much value for so little effort, you’d be nuts not to try it out.

Another indispensable tool in the design of Hipmunk for iPhone is an OS X app called Opacity. Opacity’s workflow allows for extremely fast iteration of graphics assets, thanks to a feature called Factories. A given factory can slice an image and save it in a specific format at a specific location. Once you set up your factories, you can endlessly tweak your design and export every single component of it instantly. Opacity will even put the files in your project’s image folder if you like.

Opacity

This makes it very easy to get your UI design just right, since you’re spared the pain of endless, repeated export dialogue boxes. Instead of fighting against your graphics tools, you get to focus on fighting the mediocrity in your design, seeing each tweak live in your application, on your iPhone.

Opacity is easily the best way to design interface graphics. I can’t imagine going back to Photoshop. There was a slight learning curve and sometimes vector performance was sluggish but selecting Opacity for this project was still a huge win.

Under the Hood

Design is as much how it looks as how it works. So for fellow developer nerds, here’s some nerdery.

Parsing large amounts of JSON sucks. Even on an iPhone 4.

Import times were upwards of five seconds, turning JSON into native collection objects and then mapping these to local Core Data entities. Just awful. Luckily, I work with people who are way, way smarter than I am. I asked hardcore Pythonista and Real Programmer Andre von Houck if he could make the server spit out Binary Plist files instead of JSON, saving me the parsing overhead.

A couple of days later, he’d written something from scratch to do this. Since I could skip the parsing, import times dropped by 2500ms. Andre is a badass.

Instantiating NSDateFormatter sucks. Even on an iPhone 4.

Time Profiler showed over 1200ms being gobbled up by this one class, during import. Refactoring the import manager to share instances of NSDateFormatter got this down to under 80ms.

From a UX perspective, I’m really pleased with how the pinchable, stretchable, draggable time bars came out in the application. They feel really good to use. But from a development perspective, this is some of the stupidest, craziest code I’ve ever written in my life. Don’t ask me how I did it because it did it entirely the wrong way. Maybe I’ll share once I figure out the non-stupid approach.

TouchCode is awesome. If you need to do things with JSON, like serialize a dictionary to send back to a server, you need to grab TouchJSON.

ASIHTTPRequest is awesome. If you need to do anything with file transfers on the iPhone, including Amazon S3 (!), grab this code and save yourself some time. Extremely well documented.

Stop, Impostor!

Finally, a word on Impostor Syndrome. I spent my first four weeks at Hipmunk in mortal terror. Flashing through my brain at most points in the day were the words “Any moment, now, they’re going to figure me out!”

Though I’d shipped four iPhone apps and a little OS X app at that point, Hipmunk was the first time I’d convinced anyone to give me a paying job in exchange for writing software. Even now, I’m not even sure Steve and Adam know that. Still, one of the biggest contributors to the success of the app was that I spent most of my time being pushed just outside my comfort zone. It kept me hungry, focused and challenged, which made things a lot more fun.

When things seemed utterly, permanently broken, I tried to remember what Leo says: “there has been a time in the evolution of everything that works when it didn’t work.”

I hope these tips will be useful on your own mobile development adventures. Thanks again to all loyal Hipmunks for the warm, enthusiastic reception to our iPhone app. Drop me a line if you have any suggestions for how I can to make it better for you.