Cleartrip gives behind-the-scene view of its UI redesign project Tuxedo

It's always commendable when a team builds something great. And when a team can eloquently explain how it built its great project, things get even better. Below, Cleartrip explains how it acheived a major redesign on its already neatly designed website.

This OTA's website is known for its user interface design - simple, easy to understand and providing an uncluttered experience.

Steve Jobs once said,

As the saying goes, nowadays, we can feel this in quite a few travel brands' websites.

A year ago, Cleartrip took an ambitious goal of redesigning its every single page of its website. For the obvious reason that this was a massive effort, the project was split into phases. The internal codename for this project was "Tuxedo".

Hrush Bhatt, founder and director at Cleartrip, says:

First, the company redesigned its "My Account" section, followed by its booking process. Finally, the homepage and search results were redesigned. And, its not over yet.

Literally, every field in the website has been thought through in terms of placement, display, action. All of these decisions were made on analyzing user behaviour on the site, plus feedback from users.

For example: Cleartrip says that many of its users look for Flight Calendar in the modify search flow while reserving a flight. In the new design, when a user clicks on "Modify Search", the Flight Calendar widget zooms enough to gain the user's attention. There are many such design tweaks that are important even though they may be "invisible" to ordinary eyes.

UX tip: Click the toggle button in between the 'From' and 'To' fields in flight search widget.

Sunit Singh, lead designer at Cleartrip explains below the journey of project Tuxedo:

We will go behind-the-scenes with everything you wanted to know about how we managed to pull this off and why we did it.

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

1. Design goals

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 seven 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.

2. The roll out

With hundreds 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 Java Script 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.

NB 1: Sunit first posted his explanation on Cleartrip's blog.

NB 2: To get the tiniest details of the massive redesign, read these two posts - Post 1, Post 2.