What I Did
- Competitive Research
- User Interviews
- Journey Mapping
- Interaction Design
- Sapna Nayak
- Nishant Chauhan
- May to July 2018 (3 months)
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.
How might we improve consistency across the app by introducing Flight Shortlists?
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?
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.
We realized that the app was pretty robust when it came to the Explore and Booking stages, but lacked functionality in the shortlisting phase.
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.
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.
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.
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?
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
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.
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.
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.
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.
The major advantage of this approach 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 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.
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.
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.
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.
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.