After writing this article, I was contacted by Steve from Hipmunk, who had read the post and found it very interesting. He asked me if I wanted to help them improve their UI, and ever since I’ve been freelancing for Hipmunk!

You might’ve heard of Hipmunk recently. It’s a hot new travel startup whose founders include one of the creators of Reddit, and its main feature currently is the way it displays plane ticket search results. The result screen has a high information density, which means it lets you visualize a lot of data at once. But although it’s a brilliant example of applying good design to a common problem, I thought there were a few things that could be improved.

First of all, let’s try and summarize which info are displayed to the user:

• Price of ticket
• Airline
• Departure airpot
• Arrival airport
• Number of stop-overs
• Stop-over airport
• Duration of stop-over
• Duration of flight
• Time of departure (in two time zones)
• Time of arrival (in two time zones)
• Number of worse (hidden) tickets

That’s a lot of info! Most airline sites would spell out all of this info and produce a clustured and unreadable design, but Hipmunk cleverly simplifies the interface to make the results easy to parse. For example, the times for departure and arrival are only displayed on roll-over.

But this clever layout also has its share of problems. For example:

• Since the layout is fluid and takes up the whole width of the browser window, ticket prices end up being quite far from the main focus of the screen, which is the flight bars. This makes it hard to compare the price with other facts like airline or flight duration.
• The double timeline is a nice idea, but it makes it hard to get a real sense of time and understand the flight schedule.
• Although the bar let you visualize and compare flight durations, they don’t tell you the actual duration unless you do some arithmetic in your head.
• For cities with multiple airports, like New York, the destination airport is not very clearly marked.
• The interface only uses airport codes instead of full names.
• The whole thing doesn’t look that nice visually. I’ll be the first to admit that in this case function trumps form, but why not have both?

Redesigning vs Restyling

So here’s my shot at  “improving” the Hipmunk UI. Of course the usual disclaimer applies: no real redesign could take place without first analyzing the needs of the company and its users. And I should also add that this redesign is of course completely unofficial.

It’s probable that a true redesign would lead to removing some elements or adding new ones. Or maybe during the process the design team would realize that the a more traditional interface like Kayak’s is actually better. That’s what “redesigning” is all about: re-evaluating your assumptions and improving user experience, not just putting on a fresh coat of paint. But I’m a believer in picking the low-hanging fruits first. If the fresh coat of paint alone can already make the site easier to use, why not start by making things a bit nicer looking? So consider this a “reskinning” or a “restyling” more than a “redesign”, but don’t under-estimate the value of good looks.

The redesign:

A few notes on the redesign:

The colors

The original design used a light blue almost everywhere, and combined with the zebra striping it made the whole site look like that printing paper people used in the 80s. Or even worse, like a Microsoft product.

I kept the blue for the header, but replaced it by light grey tones elsewhere. The other change was the addition of green as an accent color to highlight active or important items. I’ve also used a bit of dark purple for some text labels, because using just shades of grey got boring after a while.

The logo

I didn’t have a vector version of the logo, so rather than use a nasty re-sized PNG I quickly created a new one to act as a placeholder. But of course I kept the cute (c)hipmunk.

The Tabs

It’s probably the nicest feature of the whole app: the tabs let you create multiple search side by side without opening up new windows or browser tabs. This is very useful when you want to compare the price results for different searches. But most of the time, a user will be comparing different dates for the same flight (most people decide where to go first, and then look for a plane ticket). So it makes sense to give more visual weight to the date, which is the element that will most commonly change from tab to tab. It also makes sense to show the day of the week, since this often has an influence on the price of the ticket.

The top part of the tab shows the origin and destination cities. The smaller font even accommodates longer cities names, and the grey bar can be used to drag the tab around. Letting people move the tabs around is very useful when you want to sort ticket options from worse to best (by moving all the good options to the right side of the screen, for example).

The Tabs (the other ones)

If you look closely, there’s actually two sets of tabs on the page. The second ones are camouflaged as buttons, but they’re actually tabs, and they let you switch between the legs of your flight (usually between going there and return).

The selected tab needs to be fairly prominent: people need to know at a glance what the tickets shown below are for, so in a way that tab plays the role of the page title. The design should reflect that.

The filter

Hipmunk’s filter gives you an “agony” option. While I wonder if something a little less scary (like “convenience”) might not be better, the idea of combining different factors into a single metric is a very good one. Although the options are self-explanatory, some icons might help users find the option they’re looking for a little bit more quickly (note: finding a suitable icon for “agony” wasn’t easy, so since I’m scared of bugs that’s what I chose).

The timelines

Hipmunk use a double timeline to show you the times of departure and arrival in both time zones. It’s convenient, but it’s a little hard to get the hang of it at first. Thankfully, there’s a simple way to make it more obvious. We all associate time with the day and night cycle, so adding a bit of color to the timeline will make it much easier to understand. I was pretty proud of my idea, until I noticed that the Hipmunk team already implemented it by changing the color of the text in the timelines. However the change is so subtle that I doubt that many people notice it.

The flights

I didn’t change too much about the flight bars. The main thing I did is bring back the price into the bar. It makes it a bit harder to vertically scan down the list of price, since they are no longer vertically aligned. But on the other hand it saves your eyes a lot of back and forth between the center and the left side of the screen. The lowest price is highlighted in yellow. I originally wanted to highlight the highest price in red, but then I realized that nobody cares about the highest price…

The other thing I would’ve liked to do is to make the departure and arrival times visible at all time, instead of only when hovering on a bar. But I reasoned that it would make the interface too busy, and if the Hipmunk team have decided to hide them it’s probably with good reason.

What I did show was the total duration of the flight, as well as the duration of the stop-over. Of course I quickly ran into cases where the stop-over is too short, or happens too soon after initial take-off, which restricts the space available to display all that info. But this is ok, since there is small tooltip that shows all the info when you hover on a bar (this is in addition to the non-modal popup which appears when you click on a bar, not shown here).

Self criticism

To be honest, there’s only so much you can do in a few hours. Looking back at my design, I can see a few problems with it. The main one, compared to the original, is that I’ve probably given too much visual weight to secondary elements like the filters and timelines. In this era of iPhone and iPad app design, it’s tempting to make every button nice and big, but sometimes it’s just not what’s needed.

My choice to stick the prices inside the bars might also need to be reconsidered. It makes it harder to scan them, and also breaks up the shape of the bar.

There’s probably a lot more things to criticize, but that’s what the comment form is there for. I’m counting on you!

Are we there yet?

Yep, that’s about it. Redesigning Hipmunk’s result screen was a very interesting exercise, and a good way to put in practice design principles like hierarchy, contrast, or unity. Here are the main points to take away from this whole thing:

• Embrace information density
  Users are not as dumb as we think. They can accomodate large quantity of information as long as your user interface is well designed.
• Differentiate
  When dealing with that many elements, it’s important to make each of them different. This might seem counter-intuitive, since we’re usually taught to avoid having too many fonts or colors. But giving each type of element their own identity helps the user group related elements together and make sense of the chaos.
• Reference the real world
  It’s always a good idea to reference familiar elements, especially when dealing with a subject like travel. Don’t hesitate to use familiar shapes (plane or clock icons), colors (night and day), or words ( full airport names instead of just codes).

Thanks for following along this quick redesign. I learned quite a few things, and I hope you did too!

One more thing…

To see a very similar UI, you can also check out the ITA site (try a search and then choose “time bars”). They’ve implemented some of the ideas I talk about here, like tooltips on hover for example. Overall their implementation has more features, but still manages to be very clean. If you know of any other travel sites using a similar time bar concept, let me know in the comments.