Cleartrip is an online travel booking platform that was founded in India but now also operates in the Middle East and Northern Africa regions. Approximately 10 million users visit the platform frequently to book flight tickets, hotel reservations, railway tickets, and local experiences. It is available on all major platforms – namely iOS (iPhone and iPad), Android, and the web.
Cleartrip helps customers book flights, hotels, and activities. The existing app had separate hotels & activities shortlists, while the flights sector only had fare alerts (notifications when the cheapest flight changes its price). A product manager came to us with the idea of introducing a Flights shortlisting feature to add consistency across the product.
An end to end trip planning hub.
As we dived deeper into the specifics of the task, we noticed the disconnect in the current mental model of the Shortlists feature.
For example, a customer could shortlist a hotel to a city, and also look for activities in the same place. So why were these two lists completely isolated from each other?
After conducting a few user interviews, we synthesized the data to form a journey map consisting of stages, actions, and opportunities associated with the process.
Figuring out the hierarchy.
Placing more emphasis on trips.
The winning design.
Cross selling nudges.
The major advantage of Exploration 1 was that it followed a temporal order of the trip, but the disadvantages included a lot of redundant information on each card which could be grouped together to reduce information overload. Moreover, this design was drastically different from any design patterns currently being used in the app.
We also explored re-using the nested tab navigation from the top-level screen, but based on the feedback from the senior designers – we realized that the removal of the 'Trips' tab between the two pages could lead to confusion and would be inconsistent. Additionally, this layout gives rise to a potential confusion about what happens when the 'Share' icon is tapped – does it only share the 'Flights' of the shortlist, or the entire shortlist?
Finding the sweet spot
The direction we ended up going for was a long scroll with collapsible cards. This allowed for easy comparison by grouping common info and fixed the mental model issue of sharing a 'trip' vs just sectors.
Tap to Like
The most obvious way was to have heart icons on each flight list item. Even though this would probably have the best engagement rates, after discussions with my design mentor, we ruled this possiblity out due to the added clutter to an existing list item, and due to the plethora of information already needed to digest on each element.
Double tap for familiarity
Another option was to allow for double tapping each list item to allow for shortlisting. This was done keeping familiarity of this micro-interaction in mind, but while discussing these alternatives, we got feedback that users might not be able to associate such a micro-interaction to shortlisting/liking on an app they usually open once in every few months.
Swiping for more
The direction we finally went towards was using a swipe gesture to shortlist flights. At first, we were concerned about the learning associated with using a new micro-interaction, but thought nudges and tutorials – our hypothesis was that it could be taught. The goal was to measure engagement rates during a beta rollout and validate our assumptions.