Design Snippets

At Cleartrip I worked on diverse problems and projects. Our design managers helped us to pick interesting problems with various teams. I worked predominantly on Android and as designers, we work closely on problems and come up with solutions for each platform. Some are unique to Android and I needed to rethink how to map them better for Android users.

 

Intro

Cleartrip is a travel product focusing on giving millions of users a simple travel and local experience. The mission: Make travel Simple. The products ranging from Flights, Hotels, to Hyperlocal Activities, Food experiences, Local Events and more!

Who I worked with?

I worked closely with Nirzar, Jaydeep & Prashant, Product Designers Sunit, Kedar, Design Managers, Suman and Vishal, Product Managers and kickass iOS and Android Engineers at Cleartrip, Bangalore.

 
 
 

Flights

Fare rules & Baggage Information

One of the earlierst projects I worked with the team. The problem is Flight users were unaware the fare rules – whether the ticket is refundable or not or how much it costs to change flight later. They were also unaware of how much they can carry in their baggage. 

Various states: Baggage information and Fare rules for one, two and multiple flight segments and the different states of this segment

Upon tapping the Fare rules, users are presented with Fare rules modal containing detailed information
and some help notes. 

Our web product always had these rules upfront, but not in our App. we know we need to communicate this information early, so we decided to add this information in the Flight itinerary, a step after finalising the flight and right before deciding to book the flight. 

This section allows users to swipe to see more flight segments  & access cancellation policy and fare rules in one tap. 

 

 
 

Hotels

New Hotel Details

Collaborated with Prashant to redesign our Android Hotel details page. The intent is to show more (right) information about the hotel on scroll, so users don't have to struggle to find out the information they seek about the hotel. We retouched the page to address few other legacy concerns related to how users see photos, how they pick rooms, and how see reviews

I helped in porting the design to Android platfrom.  

Preview of Hotel Details page

How does the page look on scrolling down

Reviews, Photos and Location page

 

 
 

Travel / Local

Product Switcher

At Cleartrip we had an unique challenge. How do we present Travel products: Flights, Hotels, Trains alongside our new Local Products: Activities, Eat out, Events. I worked closely with Kedar and Jaydeep to achieve this switcher which shows one suite of products at the time.  Travel (default tab) and it switches to Local

Book Flights, and hotels to reach to a place. Switch to Local and book activities and events around the place. 

To help people connect with Travel and local products, we also did a first run, that happens when the user installs the app. 

 

 
 

Android

Bottom Navigation

When we first went with material redesign for our Cleartrip Android app, we didn’t want to do any major navigational change and just refreshed our hamburger menu. While the hamburger menu was very controversial design pattern, it served the purpose for us well, until now. When a whole bunch of Local products coming in to the app, we decided to rethink our main navigation. Sunit, my previous design manager helped us to finalise on the bottom navigation for Android. It quickly made a lot of sense and we felt its more accessible. 

Past and current navigation bar in Android

Accounts tab, Signed out Zero State for Accounts and Trips

 

 
 

Flights

Multi City Trips

One of the most requested feature from our users was the multi city booking in flights. The problem with One-way or Roundtrip is that it gets tied to only 2 cities (domestic or international). Sometimes users want to stop at few places before they reach the destination or do a bigger roundtrip to minimise costs/time. In both ways, we know we are tackling a unique problem. Jaydeep and I worked closely to solve this experience in Mobile.

Showing the preview of how Multi City International experience looks like

Upon Searching, Users land on to search results (left). They can filter (Middle) respective multi city itineraries. 
(Right) How Navigation bar looks connected and disconnected trips:  A→B
→C→D trips vs A→B, C→D, D→E trips

 
 

Flights

Fare Calendar

Flight prices are fluctuating in nature. At Cleartrip we wanted to solve the problem of helping users to book for the flights for the right dates, especially on their more casual or non-business trips. Fare Calendar as long existed in Cleartrip desktop experience, solved the problem by showing the price for the entire month and let the user figure out the cheapest date from there. Instead of re-inventing the solution, we ported it to fit into the mobile use-case.  Jaydeep and I worked closely in making it contextual and relevant for different flight searches

At Cleartrip, we designers work together as a design team to solve problems. One of the biggest lessons I learnt while working is to go to the core problem user is facing and solve it until we arrive at the simplest solution. The work I showed here is the representation of teamwork and continuous iteration! 

Disclaimer: All the content and design ideations are representations of how I see the problem and not directly or the only way Cleartrip sees. Carousell App and Carousell's logo are copyrights of Cleartrip Private LTD.
WorkSuganthCleartrip