Go Back
Improving modify search usage by 36% for Cleartrip through design improvements
Date
April 2020
Role
Product Designer
Company
Cleartrip
What is it about?
As a solution to bloated codebase, lack of proper design documentation, design inconsistencies across platforms, and to make the entire workflow faster, Cleartrip decided to move to a living design system - Bento. This design system comprises a completely dynamic style guide and a front end for all design assets that points to the assets in exactly the same way a development team is actually consuming it.
Need for redesign
Modify search feature in the search result page lets the user modify the search parameter he entered from the homepage widget - user can change destinations, dates, and trip type. There was a lot of scope for improvement of the treatment of this feature, because it's currently not that prominent enough, given the importance of the feature.
My role in the project
Identify the problems with the existing design, come up with a visual structure that is more intuitive and prominent, define the interactions, and decide on the visual treatment of the Modify Search feature by studying the rest of the components on the search result page.
Problems identified with the existing design
Cleartrip had this feature hidden under a click in the search result page. On click, it opens a similar widget as that of the main flight search page, pushing the rest of the search result page down. The CTA is visually very weak and it hits a blind spot, among the rest of the elements in the page. Being an extremely useful feature, it should be more prominent and intuitive. Modifying the search parameters becomes a two step process here, click the modify search button, change the search parameters, tap search flights. So treatment of this feature has to be improved to make it more intuitive to improve the engagement.
Modify search CTA in old design
Not the best use of the real estate and visual structure to show the search parameters.
Approach
Data showed the usage of destination and date fields to be fairly high compared to the usage of passengers and airline preferences, in the search result page. Initially we tried having a summary of the search on top of the search result page, with a CTA that expands the section making them editable. The summary served as a header for the screen, giving the context for the user.
Later we realised it's good to keep them fields editable by default, easing the effort of a click, also inviting engagement from the user. Once we decided about having the editable fields on top, we dug into details like drop downs, and then later to set the visual style
Initial explorations
Final design that went live
We opened up the Modify search panel right below the main header of the page. High engaging parameters like trip type, destination and dates along with the number of travellers appear as editable fields. Users can directly engage with those parameters by clicking on it. After changing the parameters, the user clicks on "Search" CTA to see the updated flight options.
Default modify search section with trip type, origin and destination, date and traveller details parameters opened up default.
Trip type drop down. We used an overlay once the user starts interacting with the feature so that it gets more focus from the surrounding elements.
Origin / destination drop down
Calendar component for one way
Traveller details. We got rid of airline preference parameter in first live version because the usage is significantly low in SRP.
Impact of this redesign
After the revamp, Modify search component saw 36% boost in engagement (34.95% compared to 25.77% earlier) for domestic flight booking and 17% for international flight booking.
Modify search before redesign
Improving accessibility of flight details section
Problems identified with the existing design
In the Search result page, flight details provide very crucial information regarding the itinerary, baggage and refund policy. These are decision making information and it's very crucial to be presented upfront in an easily consumable manner.
Flight itinerary, baggage details and refund policy are structured under tabs. This section opens up when you click anywhere in the flight tuple. Affordance of this section opening up is not that great as there is no visible CTA that opens up the details.
Also the cognitive load for the user to consume these crucial information is slightly higher due to the structure.
Approach
We worked towards simplifying the structure and rethinking the information hierarchy. Started off by grouping elements that should be represented together and then finding a balanced visual structure to accommodate all the crucial information in the section without hiding it under segments. There were scenarios where flight summary would occupy a big space in the section given that the trip has multiple layovers and legs.
Final design that went live
We introduced a CTA to increase the intuitiveness and also a tool tip to properly communicate the kind of information it encloses. We got rid of the segments and played around with real estate to make the consumption of information easy and clear. We hid the fare rules under a CTA which opens up a tooltip with detailed rules. We spend some good time exploring the spacing and visual hierarchy of the elements to finally arrive at a version which seems to work best.
CTA and the tool tip on hover to increase affordance
A one stop, one way flight details opened up.
Fare rules tool tip opened up
If it is a round trip, we will need to open up a modal to show flight details. This would open up from the CTA in the master tuple. (We have a split screen approach for RT, and we have a master tuple that shows the the selection and contain the flight details CTA)
Impact of this redesign
Redesigned flight details section went live along with the rest of the search result page. Consumption of these crucial information necessary for decision making became a lot simpler compared to the earlier design. Overall there was a lot of improvement in terms of accessibility of flight details block.
Flight details before redesign
