Organizing a conference and want a presentation on lessons from the design of Hipmunk for iPhone? Let’s talk!
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:
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.
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.
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.
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.
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.
Like Alexis said, we took home best design for LAUNCH 2.0 yesterday. Thanks a lot to the judges and organizers. The show was a great time and the recognition is an honor.
Couldn’t join us in San Francisco this week? No problem! Check out this video of the Hipmunk for iPhone demo (@3m39s).
When I first tried it out, my pitch was pretty rough. Luckily, Hipmunk co-founder and International Man of Debate Team Nerdery Adam Goldstein was there with some sharp coaching. I share his wisdom with you now.
Slow down. Take your time while speaking. Especially with LAUNCH’s time limit of 5 minutes, it’s tempting to blaze through all the things you want to say. This sucks for the audience and it sucks for you as a speaker. You can’t think when your mouth is machine gunning that many words, and the audience can’t understand you anyway. If you feel you’re speaking slowly, you’re probably doing it just right.
Speak informally but not uncertainly. During my early introductions, everything I was saying seemed to finish with a question mark, my inflection rising toward the end of each sentence. Awful! You can be friendly and confident at the same time. In my case, that meant planting a firm end at the end of each sentence. Drop the facts on the table, do it cheerfully, and again, take your time.
Practice. A lot. Once you’ve managed to get the words out of your mouth in a way that you like, keep doing it until you could give the talk in your sleep. Adam said at least ten times was a good number and he was right. Without the burden of worrying about what you’ll say or how you’ll say it, you’re free to get out there and enjoy engaging with people.
Aside from the talk, it was great to meet so many friends of the Hipmunk! Thanks for coming by our table to hang out, grab luggage tags and learn more about us and the new iPhone app. An extra special thank you to those who sang and danced their hearts out for a t-shirt. If we’re all really lucky, maybe we’ll see video soon.
tl;dr Hipmunk has an iPhone app and building it was a lot of fun.
It started with me bored and pissed off. Pissed that so much of the world just didn’t care about doing things well. As therapy, I banged out a blog post about my frustrations. A tribute to a few companies who give a damn and an indictment of their sloppy competitors.
High in my praise was Hipmunk, the only travel site I’d seen whose central philosophy was to provide a great search experience. No user-hostile, junk-covered homepages. No constant upselling. Just the best way to visualize your flight options and pick the best one.
I published the post, submitted it to Hacker News and moved on with my night.
I got some traffic, but that wasn’t the interesting bit. The interesting bit was an email the next morning from Hipmunk co-founder Adam Goldstein, thanking me for the mention and wondering if I would want to be considered to work on a future iPhone app.
Uh, yes? But “considered” my ass – I was going to build it. Awesome side project. I’m incomplete without a side project.
A couple of weeks later, I turned up at Hipmunk HQ, during their Startup School open house. I hung out for an hour, got to know everyone, then cornered Adam at the end.
“What do I have to say to get you commit, right now, to putting me on your iPhone project?”
An old sales tactic: ask for the sale. I spent my teen years in a Best Buy, selling Dyson vacuum cleaners.
Adam was cagey, claiming he had a couple of other developers to talk to, so I decided to build some wireframes on spec that night to sway his decision.
A couple of nights later he called me. They didn’t want this to be a side project for me. Adam made me a full-time offer and with minimal haggling, I accepted.
After three months of prototyping, design, development, iteration and testing, we’re proud to announce Hipmunk for iPhone. It comfortably scales your favorite flight search visualization to a 3.5 inch screen. Now you can easily pick and book your flights anywhere.
Like any good iPhone app, Hipmunk does its best to be fun. You can zoom and scale your search results just like the Maps and Photos apps. Turn it over to landscape for more elbow room, if you’d like. When you’re ready to book, you can do that from your device’s browser or email the booking link to a friend. If you’re near a desktop computer, you can also finish your booking from there, using a secret word Hipmunk will give you.
Building this application has been the greatest joy of my professional life. I was shown complete trust and autonomy in the design of the interface and overall user experience. Well, except this one time Steve got really heated about whitespace. We compromised.
No meetings, no approvals, no bureaucratic nonsense. Just working my ass off, the way I like it. The freedom to create has been so all-consuming, my usual insatiable hunger for side-projects quickly evaporated. Hipmunk is just a fun product to work with – everything else seems boring.
While co-founders Adam and Steve gave me continual feedback and suggestions, the only hard requirement was that Hipmunk for iPhone feel good to use. When I finished a feature that was decent, I was encouraged to polish just a bit more and make it great. Getting it done soon was a lot less important than getting it done well. If you take pride in your work, this kind of environment really sets you up for success.
So now that you know a bit about how our new app came to be, go grab it, Hipmunks! Let us know what you think.