Cleartrip Shortlists

Redesigning the trip planning experience for 10 million users.

What I Did

  • Competitive Research
  • User Interviews
  • Journey Mapping
  • Wireframing
  • Interaction Design
  • Prototyping

Tools Used

  • Sketch
  • InVision

Team Members

  • Sapna Nayak
  • Nishant Chauhan

Duration

  • May to July 2018 (3 months)

Backstory

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.

The Situation

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.

Fixing an inconsistency

Problem Statement

Solution

Research

User Interviews

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 are these two lists completely isolated from each other?

Figuring out why people shortlist?

Journey Mapping

After conducting a few user interviews, we synthesized the data to form a journey map consisting of stages, actions, and oppourtunities associated with the process.

Journey Map After User Interviews

We realized that the app was pretty robust when it came to the Explore and Booking stages, but lacked functionality in the shortlisting phase.

Competitive Analysis

We looked at apps which did trip planning well. This included TripIt, Google Trips, and Kayak. Kayak focuses on helping users book their flights & hotels, while acting as a notepad for writing down small details regarding the trip as well. Google Trips syncs with your inbox and auto-adds your bookings, helping you focus on creating itineraries/experiences for a trip. TripIt relies on email-forwarded bookings or manual entry related to every single detail about a trip – including car rentals, restaurants, parkings, rails.

Kayak
Google Trips
TripIt

Personas

Next we thought about the kinds of users that would benefit from such a feature.

From our research, we converged into two personas. The first one was a recent college graduate who wanted to plan a trip to Europe with his friends. Just like most of his friends, he started earning recently. They would prefer a budget trip instead of a lavish journey + stay.

The other one was a business traveler for whom the flight timings take priority over price, and a packed calendar helps them plan short trips well in advance.

Personas

Analysis

We presented our research findings to the design and product teams to make a case for improving the shortlisting experience across the app instead of just working on the flights shortlist. The main selling point was the ability to increase discovery and engagement with Cleartrip's less popular products – hotels and activities by enabling cross-selling while having a city-specific shortlist.

Expanding the scope of the project

The main consideration pointed out by the senior designers on the team was that the redesign should conform to the existing mental model of Shortlists on the app.

The new problem statement thus became:

How might we unify the separate flights, hotels, and activities shortlists into a merged solution which helps customers in better trip planning while increasing overall revenue per customer?

Design

Ideation

Whiteboarding our thoughts

Since Shortlists was going to be combined into a single tab, this meant the entire app had to get to the same screen from multiple access points. These included the Flights, Hotels, Activities, and the Account tab.

It was also important to define a hierarchy of nesting for the combined shortlist. The page revolved around “Trips” – an entity which contained one or more product offerings under it. This definition meant a trip could be defined as one flight from Delhi to Mumbai, or multiple flights and hotels which were a part of a single shortlist named “Europe 2018”.

The IA was Trips > Cities > Sectors (Flights, Hotels, Activities).

User Flows Diagrams

Flow Diagrams: Adding to Shortlist & Accessing Shortlist
Flow Diagrams: Shortlisting Experience

Explorations & Feedback

Unified Shortlists Tab

We realized that while designing the unified Shortlists tab, it was important to maintain consistency across different sector-specific shortlists. We also had to keep in mind the existing isolated Shortlists features currently living in the app.

Exploration 1: Long Scroll

The first alternative considered trips to be on the same level as sector specific shortlists. This helped in ensuring consistency no matter where the user accessed the page from.

The second alternative placed a higher emphasis on trips by making it a richer card with the addition of an image related to that city/country. Though it conveyed that trips were higher in the hierarchy, if the user had multiple trips made, the image card would take up a lot of the available height reducing the amount of information which can be displayed at first glance.

Exploration 2: Added focus on trips
Final Design: Nested Tabs

Iterating on these ideas led us towards an interface which used a tabbed navigation, with Trips being the first tab followed by swipe gestures to reach the other sectors. This also meant that when a user tapped the Shortlists icon from any sector's page, it would take them to that tab directly. This ensured consistency while educating users about how trips could assist them with the itinerary planning process.

Cross-selling nudges

The nudges were made to tackle the problem statement directly, allowing for smart suggestions to customers while they've shortlisted other sectors to a city. Three suggestions at three different price points are shown with an option to see more.

Trip View

Exploration 1: Chronological Timeline
Exploration 2: Sector Tabs
Final Design: Long Scroll

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.

For exploration 2, we 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?

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.

Shortlisting Flights

Design Alternative 1: Icons
Design Alternative 2: Double Tapping
Final Design: Swiping Gesture

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.

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.

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.

Onboarding

The feature was introduced through a series of nudges informing the customers about the new changes in their user experience of using the Cleartrip app.

Working Prototype

Outcomes

By the time my internship ended, Shortlists had reached the high fidelity stage, and was in the process of being presented to the Product & Business teams for final approval. Shortly after I left, the re-design was approved and planned to be implemented.

The public beta went live on 14th October 2018. It was visible to 5% of the total userbase (10 million+) for about two months. It was released for 100% of the users by Mid January 2019.

The adoption rate for this redesign was around 4.6% (in the first few weeks) with 17.4% of the customers converting to booked tickets from the Shortlists tab.

To put these numbers into perspective, most features which require interaction in comparison have adoption rates of less than 1% during the first few weeks.

Learnings

This internship was my first experience of working in a large scale technology company which built products on a massive scale. I wrote an entire article about my learnings, but here's a TL;DR:

  • Designing for millions of users means removing inherent biases and using data to make decisions

  • Rushing to the high fidelity stage might be tempting, but most of the work is everything that happens before that step.

  • Design can never be an isolated process. Product & Business teams can give great insight into the features you’re working on. Be sure to involve them.

In The Press