Tag Archives: user interface design

The continued evolution of rome2rio’s user interface

In the last week we’ve pushed out several changes to the site’s user interface. We redesigned the experience so that flight schedules and transport information are no longer displayed using pop-outs over the map. Instead, clicking on each leg of the journey displays the relevant information inline above the map. Importantly, rome2rio now zooms in to show the selected leg in detail.

We’ve also made the date selection more intuitive to use. We hope this makes getting flight prices much easier than before. Of course, the date is completely optional because we love the experience of quickly browsing the flight options.

We greatly simplified the messaging on the welcome screen; a simple change that resulted in a substantial jump in traffic.

Welcome-before-after

Getting the UI design for rome2rio right is challenging, and something we’ve blogged about previously here and here. Expect the design to continue evolving in 2012. To give you an idea of the progress we’ve made this year, here’s what rome2rio looked like back in January:

Kayakapi

We also pushed out a new feature today. As we described in this previous post, rome2rio has an explore feature where users can view all direct flights from a single airport on the map. To activate this view, input an origin (but not a destination) and select an airport from the list of the left. Alternatively, input a 3-letter airport code such as SFO. As of today, you can filter the destinations displayed by airline. This is especially useful for viewing, for example, all destinations that can be reached by a direct EasyJet flight from Stansted airport.

Easyjet-stn

Please let us know what you think of the UI changes.

Adding visual appeal: rome2rio’s evolving interface

We’ve spent a lot of time thinking about rome2rio’s user interface. The graphic design has had a major revamp over the last few weeks, thanks largely due to the contributions of my talented sister, Lara Cameron. Lara is now busy running her popular and eco-friendly hand-printed textiles business Ink & Spindle but was previously a web graphic designer. Take a look at this comparison of our UI before and after the makeover and it is clear Lara benefited from some creative, artistic genes that I missed out on.

Old-new-screenshots2

 

The other major aspect of rome2rio’s interface is the interaction design, that is, what is shown where on the page and how the user interacts with the site. Getting the interaction design right is certainly one of the big challenges of building a multi-modal travel search engine. There’s a lot of information to present about the various trip alternatives. Conveying these ways to get from one place to another clearly to the user is challenging. Even regular flight search engines such as Kayak, Orbitz, Expedia or Webjet struggle with the challenge of presenting just flight itineraries to the user. There are different carriers, stopovers, layover times, ticketing airlines, departure and arrival times, durations and prices that need to be shown. Hipmunk is a new valley startup that has focused on some new approaches to this challenging flight result layout problem. 

With multi-modal search rome2rio needs to tackle yet another level of UI complexity as the flight schedules are just one part of the itineraries we present. For a single search such as Melbourne to Stanford, rome2rio presents multiple routes of getting there. For example Melbourne -> MEL -> SFO -> Stanford is one route, Melbourne -> MEL -> SJC -> Stanford is another. Each route consists of various segments (drive, then fly, then drive again), each flight segment has various itineraries, and each itinerary has all of the components described above! 

Presenting all this clearly to the user is challenging. We’ve chosen to use different colors to differentiate the various modes of transport, and hide the flight itineraries behind a hover over pop-out. Each route has a short description like “Fly to San Francisco (SFO)” that explains how it differs from other alternatives. We’ve also decided to make rome2rio’s interface largely map driven so that routes can be easily visualized.

Map-screenshot

The map interface is perhaps the most immediately obvious differentiating feature of rome2rio. It certainly takes a lot of screen real estate (although this real estate is re-used for the flight schedules pop-out) however the value it adds varies a lot from query to query. For a search from one major city to another the map will display routes with stopovers, which may be of interest to the user. However the maps value really comes into play for searches such as Seattle to Yellowstone or Dublin to Le Havre where the visualization of the alternative routes really helps the user understand the tradeoffs between them. I suspect travellers with more flexible itineraries will also benefit from the map interface where they may notice one of the routes goes past a town or attraction of interest and decide to make a detour. 

So, what are your thoughts about rome2rio’s current UI? Too confusing and geared towards savvy, high-tech users? Nice and snappy and easy to use? Do you like the map? Would you prefer an interface without the map, or one where the map takes either more or less screen space? 

We’d love to hear your thoughts!