Last week, we blogged about how and why we redesigned the Cleartrip search experience. Today, we’ll share some of the design nuances in the user experience of our new flight search.

Folding columns

In the old design, we had two main versions of flight search results — a single column for domestic one-way and international searches; and a split screen for domestic round-trip searches. In the single column view, we’ve always had the luxury of space to provide much more flight-level information.

With Tuxedo, we’ve brought our revolutionary split-screen experience even to multi-city searches.

With just a few conditional statements in our code, we’ve been able to make our flight search units entirely responsive to the context in which they are being served.

By standardising the flight metadata, we not only unified the experience across all types of searches, we were also able to serve all needs with a single template. This simplifies our code maintenance considerably — we now have a single code block for all of our flight result units.

Units

The basic function of a unit in our flight search results is to allow users to compare the available options. Not only did we want to make this comparison effortless, we wanted to make it an enjoyable experience.

These are some of the main improvements we made to our flight search units:

Better grouping — Flight data is now clubbed into logical groups. The airport information is below the departure & arrival time, and the number of stops below the duration.

Better hierarchy — With the new groups, we reduced the number of columns needed and also delivered a better visual hierarchy between primary and secondary flight data.

Improved readability — We designed a grid for Tuxedo as a whole which also shaped the flight units into two rows of information. Primary information was placed in the top row and secondary information in the lower row, both of which align end-to-end horizontally.

Many of these things will go unnoticed, but we’re big believers in the little things; because all the little things add up to make a huge difference. You can see the difference for yourselves.

Visual Indicators — In our recent posts we talked about some helpful indicators we’ve added to flight results. We allocated a separate column for these in our unit designs.

The indicators add a dash of visual energy to the units and are superbly helpful in sizing up the quality of a flight at a glance.

Flight details

Flight details have been made much more discoverable and accessible — each flight unit is now entirely click-able.

Flight details you’d care about are now clearer in two columns here: one for flight schedule details and another for fare details.

With every redesign of our old products, the first thing we did was to consolidate our itinerary format. We started this consolidation with the Accounts redesign, the booking flow redesign and with all our mobile products. With Tuxedo, the flight details display in the results page is exactly the same as you see in the booking flow (a hat tip to the role of consistency in design).

Extra toppings

Toggle airports

A switch to toggle airports had been at top of the most requested feature list for a while. And we hear great things about the switch airport animation in our iOS app. So, with Tuxedo, here it is:

Happy to see Cleartrip has finally taken my suggestion and added a “switch airport” button on their search. 🙂 — Madhu Menon (@madmanweb) June 26, 2013

Fare calendar transition

It’s already brought a smile to at least one customer’s face:

With Tuxedo we integrated our stand alone fare calendar into the core product. We now have a mini-calendar in the sidebar on flight results. The problem with the mini-calendar was the discovery — not many people noticed it in our early testing.

Our search data told us that many users were looking for the calendar in the ‘Modify search’ section. We introduced a transition to improve its discoverability. Now when you hit the Modify Search, the mini-calendar expands in place into a bigger form with fares upfront.

Retina support

Last but not least, we’ve made the entire search experience retina friendly. And let me tell you, it looks gorgeous on high resolution displays. You wouldn’t want to book anywhere else if you had one of these modern devices. As always, we love to stay just two steps ahead of the tech curve.

There are tons of things we have added with our new search experience but we’re not satisfied yet. It’s not necessary to be different, but it is very important to be good. We think we’re pretty good, but we also think we can get a lot better — stay tuned.