Cleartrip Shortlists

As a Product Design intern, one of my main projects was redesgining the Cleartrip Shortlists into a unified experience which helps travellers plan trips by providing a single hub for watching the company’s various product sectors – flights, hotels, and activities.

Project Details

Duration: May 2018 to July 2018
Platform: iOS and Android
What I Did: Conducting competitive research, User Personas, Information Architecture, Navigation Schema, Low fidelity mockups, High fidelity screens

The Situation

Cleartrip helps customers book flights, hotels, and activities. The existing app had separate hotels & activities shortlists, with no such feature existing for flights. During my internship, my fellow intern and I were tasked with designing the flights shortlisting feature.

Expanding the scope

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?

To better understand this disconnect, we asked ourselves some basic questions shown in Figure 1. This helped us in defining the goals of the project, and eventually served as the basis of expanding the scope of our task from creating a Flights Shortlist to a Unified Shortlist Experience as shown in Figure 2.

Figure 1: Expanding the scope

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.

Figure 2: User Personas (Illustrations from www.undraw.co)

Information Architecture

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). Trips are the highlight of this screen. They could be shared with others, edited, and deleted from. This led to to think about a few implementational intelligence questions:

  • When a trip should be created?

  • Should it be automatic when a customer shortlists something in a new city?

  • If so, how would it work in case of a Europe trip which consisted of multiple cities? Could the app have a level of intelligence which could understand a multi-city itinerary and combine it based on geography and schedules?

Owing to the complexities involved with developing such an intelligence, and the data which would be required to train such a model, after some intense discussions with the involved stakeholders, we decided to go with a much simpler approach to start off the project. Trips would have to be created manually, and could be combined with each other based on user preference.

Whiteboarding our thoughts
Mapping out the shared itinerary scenarios

Low Fidelity Mockups

Once we had a good idea of what we were supposed to build, we fired up Sketch to start mapping out the various user journeys and states possible.

User Flows Diagrams

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

Individual Screens

Shortlisting a flight, ability to add it to a trip, choosing & creating a new trip
The combined Shortlists tab, nudge to create a trip, trip creation flow
City and product sector specific shortlists, snackbar to merge multiple products in same city into a trip
Cross-sell flow, Shared itinerary flow

High Fidelity Screens

After a lot of discussions with the various stakeholders involved and multiple iterations, we moved on to creating the visually polished mockups of the feature.

First run nudges for the redesigned Shortlists
Swipe micro-interaction for easy shortlisting, along with a confirmation toast
Account tab access point for Shortlists, Empty & Filled states for the Shortlists screen
Sector specific shortlist view, swipe actions for an itinerary, deletion confirmation modal

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 in phases.

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

The adoption rate for this redesign was around 4.6% 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%. Moreover, the conversion rate so far has been excellent and has allowed the Product team to fast-track the development of Phase 2, which is expected to launch in the first quarter of 2019.

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.