ct-blog flight hotel local

[Tuxedo] How we redesigned everything

Two weeks ago, we rolled out the new Cleartrip experience. In previous posts, we’ve addressed some of the specific improvements and new features for flights and hotels. Today we’ll go behind-the-scenes with everything you wanted to know about how we managed to pull this off and why we did it.

  1. Design goals — what did we want to achieve with the redesign
  2. The roll out — how we shepherded the new experience into the world

Design goals

  1. Improve performance, real as well as perceived
  2. Develop a crisp and consistent design language
  3. Optimise the site for faster development and maintenance
  4. Help users easily accomplish frequent tasks

Goal 1: Improve performance, real as well as perceived

Improved performance was one of the key design goals for our redesign. All our back-end services were overhauled to deliver search results to users as fast as possible. Back-end services were broken up into multiple services based on how static or dynamic the service’s data is; in flight search, for example, flight schedule data is relatively static, but availability and fare data is highly dynamic, so they are now two separate services. We further enhanced the actual performance gains by moving to a single-page user experience where results start loading the moment you click the ‘search’ button. This combined with the virtually instant delivery and rendering of static content amplifies the perception of speed in the user’s mind.

Here’s a look at how things work when a user hits the search button

All that in well under 2 seconds.

Single page apps come with complexity and that means way more lines of code. So, it’s tough to compete with a traditional website on the overall request size of the assets required for the first visit. For example, a majority of the scripts and stylesheets need to be made available on the homepage itself. We’ve seen a performance hit in this department but we are working hard to overcoming this. We’ll keep you posted on the next round of optimisations.

Goal 2: Help users easily accomplish frequent tasks

We wanted to give our users quick access to the tools they frequently use.

Smart tabs — In the new design we’ve introduced smart tabs which let users filters results with just one click. You don’t have to look for a tiny “Zero” stops filter any more.

Filter order — We looked at the usage of our filters and re-ordered them based on the popularity. We also collapsed some of the filters that are less popular.

Re-searching — Over 10% of our users ‘re-search’ with multiple travel dates for the same cities. We’ve added a mini calendar next to the search results to help immediately identify dates with cheaper fares.

Goal 3: Develop a crisper & consistent design language

We began setting a new design language for our products about a year ago with the release of a completely redesigned Cleartrip Account, followed by the launch of our redesigned booking process. The design language has been evolving ever since and with our redesigned search experience, codenamed Tuxedo, we’ve managed to consolidate and set a tone that should last us a while. Some of the broad principles that the new visual language is based on:

Good design is invisible.

Our goal was to build something that was truly universal and invisible. Something that doesn’t come in the way of users. We now have much tighter primary color palette, along with loads of tiny details.

Less is more

We’ve made a tremendous effort to ensure that we’ve tightened up all the lose ends. Page layouts have been meticulously optimised to pack more content without overwhelming the user. The new design reduced our vertical “chrome” footprint by over 30%.

Goal 4: Optimise the site for faster development & maintenance

The previous version of our site evolved over 7 years. This redesign was a great opportunity to consolidate design patterns and rewrite our UI framework in a way that lets us easily build new features.

The roll out

With 100s of scenarios to be tested, the magnitude of new code coupled with the browser fragmentation there was no way we could roll over to the new site at one go. We couldn’t possibly cover all test cases in our internal QA cycle.

The roll-over had to be handled with utmost care. The tiniest bug on the site could not only result in a poor experience for millions of users but also hugely impact our revenues. We had to put the product out to the users and start testing in production without making a dent in our daily numbers.

Here’s how we did it:

With our first push to production, we restricted the site to our internal users. We then incrementally, opened the site browser by browser so that we could isolate browser related issues. During this period we were pushing close to two patches a day. This transition was only possible with the support of an amazing team who never gave up, our users who cared enough to report issues and give us honest feedback and the right set of tools to monitor how things were playing out in the field.

We are particularly proud to say that all the tools that helped us in the transition were 100% made in India.

  • Visual Web Optimiser – Helped us set A/B tests to gauge the performance of the new site vs the old site. We used this tool extensively to selectively roll out the site to specific browsers.
  • Errorception – By far the most useful tool during the transition period. We were able to track JS errors occurring on our users’ browsers in real time.
  • WebEngage – Enabling our customers to post feedback, we were able to open a dialog with our customers and understand their concerns and hear their suggestions. Talking directly to our customers helped us mend any incorrect assumptions or design decisions we made.

We must thank the teams that have built these products – we have to say that India has truly arrived; all of the above products are best of breed.

It’s going to be a while till our new design stabilises, but we believe we’ve set a strong foundation for things to come. We hope you love the new design and we hope you’ll let us know what should be even better. We’ll be more than happy to improve.