Top Deals for Flights

For Cleartrip in Sep, 2016

My role

Product Design
Front-end

Flight Top Deals

The project

Top Deals for Flights was my first project in Cleartrip. The product does one simple thing the best — helps users discover the cheapest fares for multiple sectors. Here’s a look into what and how the product was shaped in due course of time.

Typeface: The Sans, System Defaults

Top Deals for Flights was my first project in Cleartrip. The product does one simple thing the best — helps users discover the cheapest fares for multiple sectors. Here’s a look into what and how the product was shaped in due course of time.

Initial Iterations

My first attempt was to go map route. The interface designed was supposed to automatically detect your origin sector (based on HTML5 Geolocation API) and present a list of sectors with cheapest fares plotted on the map. Clicking on any of these would take you to the search results page with required inputs pre-filled.

Thankfully, soon enough we realized this solution was not scalable and certainly not easy to implement as well. We had to take care of multiple complexities, i.e., what happens when user zooms or how would this work on mobile. Therefore we turned to list view and came up with something like this:

Needless to say, the page looked bland and lacked that quirky Cleartrip character. In the next iteration, I kept the list view and played around with the header. NLP route looked promising.

So far, in all the iteration, somehow the focus on the sectors was always missing. In order to change that I improved focus on the sector names by playing with typography and adding an image of it. In next few iterations, I took this to another level by taking a grid approach, centered around sectors.


Final Iteration

The final iteration was sort of mix of the grid view and list view. Equal amount of attention was needed for the name of the sectors and the lowest price. By default, the list would be for the next six months, but once you’ve selected the months, the list would be filtered instantly.


Little Big Details

To the handle the delay caused between getting the origin and subsequently searching for destination, we implemented the Skeleton Screen technique, also employed by Facebook.

We also handled the error states in a quirky way which is the usual Cleartrip style. Even after the completion of the flash sale, user could set an alert for the next one. This ensured lesser dead ends for the product.

In retrospect, this project taught me the importance of iteration and how important it is to identify to loopholes in the approaches early on and fix it instantly.

Take a look at the Cleartrip Flight Top Deals, and let me know what you think.