[Design nuances] Cleartrip Android navigation

Last year we updated Cleartrip Android app with a fresh design, based on Google’s material design guidelines. It made the app cleaner, faster and more consistent with the Android ecosystem.

This year when we tried to bring the local product to Android, we thought we will clean up lot more things and make it more intuitive and better. In a multi part series, we want to first discuss about navigation.

h1. Problem with the previous navigation

 

Our previous navigation was in line with Android’s suggested navigation. But the accessibility of the navigation was broken.

Based on the thumb accessibility map, hamburger menu lies at a place where most people can’t reach, especially in a bigger android phones like Nexus. We thought about bringing tabs for long, but the options we tried never felt compact or actually solved our discoverability problems for our other products.

Our approaches

 

We were also bringing a new set of products under Local, and this option would not scale well for the products there. The top navigation won’t work if we bring in travel and local switcher in the top. We went back to basics and tried with bottom tabs for navigation. It was new and we felt it will work strongly. Around that same time Google also released a component in the material design which resonated with our design. So the time was right to make it live.

Final navigation design

 

Products are now upfront and clear. No hamburger or more tab to keep things hidden. Now the Travel — Local product switcher resides on top. Stay tuned for a post on design process and how we came up with the switcher. But to adapt it to android, we made few adjustments and made the entire travel — local switching experience delightful.
  1. We kept the Travel — Local switcher on the top, to give an hierarchy for the products and also not to keep three level navigation at the bottom.
  2. We brought a Material design colour change when the user toggles between travel and local. This sets up the product context between local and travel as mentioned above.
 

 

We’ll share more android design processes in upcoming weeks. Meanwhile if you haven’t tried our app yet, go check out in the Android Playstore.

7 Responses