Hipmunk Mobile Calendar Integration Post-Mortem

Last week, we shipped an exciting update to our mobile apps. With the flick of a switch, Hipmunk can display your phone’s calendar events right next to your flight and hotel search results. This makes it easy to pick flights that don’t conflict with your meetings, along with choosing hotels that are close to where you need to be. Because calendar data is already stored on the phone, the best part is that there’s no configuration or account setup.

It just works.

Getting this feature out the door was especially challenging for flight search. Let’s walk through how that design evolved from an awkward mess into the helpful tool we’re proud to share with you.

Plotting events on a timeline was straightforward and looked pretty cool. The hard part was figuring out how to help our users make sense of this whole new layer of data on an already dense graph.

The first attempt at solving this was… heavy-handed. The idea was that when you expanded a flight,then we’d label the calendar events on-screen.
But these labels were terrible. They were too big and placing them inside the rows of other flights invited a lot of confusion. The next revisions tried to tone down their imposing appearance, along with reducing the impression that they were somehow labeling other flights on the graph.

This was an improvement, but it was worrisome to see the once-pristine flight graph cluttered up with so much crap. The other bummer about this approach was that the labels wouldn’t be visible until a flight had been expanded, which didn’t seem very satisfying.

What worked was gathering up the labels and putting them all into their own bar. It seems obvious now, but we’d initially recoiled at this idea. The timeline graph was already sharing space with a footer and a very meaty header. Giving up even more of the screen seemed crazy. Once it was mocked up, those fears went away. It was so much tidier.

The final product shortened the drawer and added a control to adjust the selected calendar.
So that’s a little glimpse at how we got to Hipmunk’s mobile calendar integration. Try it out on Android and iOS, and email us if there’s anything we can do to make these apps better for you.

Leave a Reply

Your email address will not be published. Required fields are marked *