[Design Nuances] The Tuxedo flight search experience

Last week, we blogged about how and why we redesigned the Cleartrip search experience. Today, we’ll share some of the design nuances in the user experience of our new flight search.

Folding columns

In the old design, we had two main versions of flight search results — a single column for domestic one-way and international searches; and a split screen for domestic round-trip searches. In the single column view, we’ve always had the luxury of space to provide much more flight-level information.

With Tuxedo, we’ve brought our revolutionary split-screen experience even to multi-city searches.

With just a few conditional statements in our code, we’ve been able to make our flight search units entirely responsive to the context in which they are being served.

By standardising the flight metadata, we not only unified the experience across all types of searches, we were also able to serve all needs with a single template. This simplifies our code maintenance considerably — we now have a single code block for all of our flight result units.

Units

The basic function of a unit in our flight search results is to allow users to compare the available options. Not only did we want to make this comparison effortless, we wanted to make it an enjoyable experience.

These are some of the main improvements we made to our flight search units:

Better grouping — Flight data is now clubbed into logical groups. The airport information is below the departure & arrival time, and the number of stops below the duration.

Better hierarchy — With the new groups, we reduced the number of columns needed and also delivered a better visual hierarchy between primary and secondary flight data.

Improved readability — We designed a grid for Tuxedo as a whole which also shaped the flight units into two rows of information. Primary information was placed in the top row and secondary information in the lower row, both of which align end-to-end horizontally.

Many of these things will go unnoticed, but we’re big believers in the little things; because all the little things add up to make a huge difference. You can see the difference for yourselves.

Visual Indicators — In our recent posts we talked about some helpful indicators we’ve added to flight results. We allocated a separate column for these in our unit designs.

The indicators add a dash of visual energy to the units and are superbly helpful in sizing up the quality of a flight at a glance.

Flight details

Flight details have been made much more discoverable and accessible — each flight unit is now entirely click-able.

Flight details you’d care about are now clearer in two columns here: one for flight schedule details and another for fare details.

With every redesign of our old products, the first thing we did was to consolidate our itinerary format. We started this consolidation with the Accounts redesign, the booking flow redesign and with all our mobile products. With Tuxedo, the flight details display in the results page is exactly the same as you see in the booking flow (a hat tip to the role of consistency in design).

Extra toppings

Toggle airports

A switch to toggle airports had been at top of the most requested feature list for a while. And we hear great things about the switch airport animation in our iOS app. So, with Tuxedo, here it is:

It’s already brought a smile to at least one customer’s face:

Fare calendar transition

With Tuxedo we integrated our stand alone fare calendar into the core product. We now have a mini-calendar in the sidebar on flight results. The problem with the mini-calendar was the discovery — not many people noticed it in our early testing.
Our search data told us that many users were looking for the calendar in the ‘Modify search’ section. We introduced a transition to improve its discoverability. Now when you hit the Modify Search, the mini-calendar expands in place into a bigger form with fares upfront.

Retina support

Last but not least, we’ve made the entire search experience retina friendly. And let me tell you, it looks gorgeous on high resolution displays. You wouldn’t want to book anywhere else if you had one of these modern devices. As always, we love to stay just two steps ahead of the tech curve.

There are tons of things we have added with our new search experience but we’re not satisfied yet. It’s not necessary to be different, but it is very important to be good. We think we’re pretty good, but we also think we can get a lot better — stay tuned.

[Design Nuances] The Tuxedo hotel search experience

Last week, we announced our new search experience for hotels and flights. Today, I would like to share some of the finer design details of the new Hotels search experience.

Quick look

Similar to a blurb on the back-cover of a novel, ‘Quick look’ provides a hotel’s overview at a glance by previewing amenities, rates and thumbnail images. We’ve also added recommendations from travellers on what they love about a hotel.

Re-imagining the maps experience

We went back to the drawing board to make the maps experience faster, smarter and more usable. We also wanted to make our users more aware of the map search, so we added ‘map-cards’ to the right of the results to give users a preview of the city’s map.

Hotel details

The new Highlights tab effectively provides a snapshot of a hotel in a three column, magazine-style layout. The first column derives its inspiration from our Small World destination design. We did over 10 iterations to get the Highlights design just right and we’ll probably still be tweaking it for a while, but we think it’s a big step forward from the previous version.

We’ve added subtle touches to the navigation bar to encourage users to explore a hotel in greater detail.

The new darkroom design for photos by darkening everything and upping the contrast to put the focus squarely where it belongs — on the photos.

Our new Map tab derives inspiration and information from Small World, showing a hotel’s location in context to a destination’s sights and sounds.

Stamps and badges

Our customers loved the stamps on our booking confirmation page, so we made new stamps for the search form. The stamps are fashioned after the retro hotel signs often seen on highways in the United States. We think the stamps do a great job of highlighting elements of our Hotels product to newer customers.

We’ve also added beautiful badges for our most popular and best-selling hotels. These badges are meant to let users easily spot the best hotels when they’re scanning a list in the search results.

There’s hundreds and hundreds of little touches that we would have loved to highlight, but there’s only so many words in a blog post.

Personally, I’m proud to say that throughout the Tuxedo design process, we lived by this principle:

“Simplicity as a result of a creative process is the ultimate sophistication”
~ Leonardo da Vinci

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

Indian Railways gets an Android station

Cleartrip turns 7 today, and as we did last year, we thought this was the perfect time to bring a smile not only to the faces of millions of Indians, but also to our many customers abroad who want to explore India in its truly incredible way.

Railways in India is not just a means of transport, it’s a way of life. Used by a staggering 25 million people everyday, it makes India rightly famous for its classic rail journeys. In fact, many foreign tourists consider their visit incomplete if they haven’t experienced the hustle and bustle of India’s trains and the unique experience they offer. And it’s not just the journey–booking tickets for these trains is also an experience in itself, which many find is not a very pleasant one.

5 Years ago, Cleartrip took the first step towards making train travel simple, by becoming the first online travel agency to offer Indian Railways bookings. We were thrilled to see that it not only made booking easy for people in India but also for those who were visiting us from different parts to the world. Some of them even went ahead to suggest using Cleartrip to their fellow travellers.

And today, we take this to the next level by presenting version 3 of Cleartrip for Android, the first truly native app to offer train bookings on Android devices. And the best part is that there’s no Cleartrip service fee for booking train tickets. You pay the same price that you would pay if you were booking your tickets through IRCTC. We’ve even included the ability to check PNR status on the go.

Here is a quick walk-through of the most beautiful way to book Indian Railways.

Book trains on the go

A Pure Android experience for searching, checking availability and booking trains from your Android devices.

Syncing Cleartrip and IRCTC accounts

As per the guidelines from IRCTC, a one-time sync is required between your Cleartrip and IRCTC accounts before you can make train bookings with us. If you’ve not done that already, you can sync your accounts right from within the app.

Saved travellers, saved cards– Just tap to book

All your saved traveller profiles and stored cards are available at a one-tap selection for train bookings too.

PNR Status

You can keep a track of your waitlisted tickets by checking the PNR status.

We’re sure you’ll love this app even more than you love booking trains on Cleartrip.com. You can download it now from Google Play. Give it a spin, and let us know what you think.

[Tuxedo] Hotel search redesigned

We just introduced a brand new design for our site. For our Hotels redesign, we had an ambitious goal — help our users choose the perfect hotel faster and with greater confidence. Unlike flights, choosing a hotel is a complicated and time-consuming process because there is so much choice (we have 493 hotels in Bangalore) and a large number of variables like price, location, amenities, inclusions to evaluate. To make this process simpler, we believe our users need trustworthy information and contextual tools that help them quickly shortlist relevant options.

This is exactly what we have crafted — a search experience that is faster, easier and incredibly useful.

Faster than ever
Say your goodbyes to the “loading” page. We’ve made searches incredibly fast. Results start loading immediately after you click the ‘search hotels’ button. Our core search architecture has been completely overhauled to deliver results 2-3x faster.

Easier than ever
Usability has been and always will be the guiding force behind design at Cleartrip. We have refined every element in the search results page and added a host of new features to make the search experience easier.

Users love to apply filters and a ‘sort by’ option based on their specific needs to view the most relevant hotels. We’ve made this simpler with Smart Tabs — bargain-hunters will like the brand new ‘Deals’ tab that only displays and sorts hotels with discounted rates (we have over 4000 deals running every day!). ‘Best-sellers’ highlights the most booked hotels on Cleartrip for those looking for the popular options.

Know exactly where in a city you want to stay? Then search by area, landmark or even a specific hotel from right within the search form.

The hotel details pop-up has been completely redesigned to give you more information to help you make the right decision. The ‘Highlights’ page shows a comprehensive overview along with handy recommendations. Since photos play such an important role in the selection process, we’ve made them larger and more engaging using an innovative ‘darkroom’ design.

The map now shows landmarks, restaurants and entertainment options near the hotel so you can be sure about its location.

More useful than ever
Whether it is a business trip or a summer holiday, the process of selecting a hotel is often ridden with anxiety. We’ve added trustworthy, accurate and relevant information across the board to help put your mind at ease.

Recommendations from friends, family or even strangers often plays a huge part when we select a hotel. We’re using a data-driven approach to bring this recommendation process online — you can be confident that this is reliable data from real people. We now highlight highly ranked hotels on the TripAdvisor Popularity Index as “Top-Rated” and top-booked hotels on Cleartrip as “Best-sellers”.

We’ve added a ‘verified Cleartrip user’ tag to TripAdvisor reviews written by our customers for added trust.

We’re also recommending similar hotels — based on your current hotel’s attributes and rates — that might interest you.

Not in the mood for a traditional hotel? Try out the Property Type filter to find B&Bs, serviced apartments, resorts or even guest houses.

We’ve rebuilt the map view so that it’s simpler to explore hotels across the city — pan and zoom to find hotels in a specific location or click on a hotel cluster to see all hotels in a popular area.

We feel that the all new Hotels search experience goes a long way in making travel simpler — it saves you time, energy and a lot of anxiety. We’re really excited about it so do give it a spin and let us know what you think.

[Tuxedo] Flight search redesigned

Last week we introduced the new Cleartrip experience. Today we’d like to introduce the highlights of our new flight search product.

Twice as fast
At Cleartrip, speed is a feature. We’ve overhauled our core flight search architecture to deliver results 2x faster. Flight itineraries start loading as soon as you hit ‘Search flights’, availability and fares load a couple of seconds after. It’s so fast that we’ve obsoleted the “We are searching for best flights” interstitial screen.

Flight quality at a glance
We’ve added flight quality indicators to help users compare several flight options at a glance. These icons assist in identifying solutions with a long layover, short connecting time, a red-eye flight, and those where an airport change is involved. We’ve also included an indicator to depict the number of seats left at the current fare to help users gauge the demand.

Upfront damage notification for changes and cancellations
Plans change and airline refund policies are important when choosing a flight. Almost 20% of calls to our customer support team are customers asking about cancellation and change fees. So, we’re putting that information upfront — fees are now displayed clearly within search results along with flight details.

Flexible travel dates
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.

Search airports by country
Do you know the name of the airport or city you need to fly into if you’re visiting Mauritius? What about the Seychelles? Our new flight search form allows you to search by country when you’re not quite sure about the name of an airport or city. It even suggests the three most popular airports within that country.

Smart tabs for smarter flight options
We’ve added smart tabs above the search results to let you narrow down results with just one click. The ‘Non-Stop’ tab works just as you’d expect; click it and reduce your search results to only non-stop flights. There’s also a ‘Recommended’ tab that removes all the bizarre and inconvenient flights from the results, leaving only the sensible and logical options to choose from.

Multi-city results display
The process of booking multi-city flights has always posed interesting design challenges. A similar problem, albeit less complex, existed when we were designing for the round-trip search results layout. This led to Cleartrip inventing the split screen view for domestic round-trip flights.

Users can pick departure and return flights on the same screen and get the total price for the trip upfront. This gives our customers more control and simplifies their decision-making as they select which flights to book.

Today, we’re bringing the same experience for our multi-city searchers. For us, this goes a long way in crafting a better multi-city flight search experience.

We’re incredibly excited to introduce the all new Cleartrip Flights; we think its a big step towards making flight search blazing fast, usable and useful. Give it a whirl and let us know what you think.

An all new Cleartrip experience

Good design is good business — this notion is deeply embedded in Cleartrip’s DNA. We’ve always believed this and we always will. Design is what sets us apart.

For almost 7 years, the design framework above has served us well. It has supported years of product expansion and iteration, while consistently delivering the best customer experience in the industry. But, the world around us has changed, technology has marched on relentlessly — browser capabilities, Post-PC devices, higher speed Internet connections — and we need to move forward.

Over a year ago, we began an ambitious redesign project with the goal of making the best product in the market obsolete by refashioning it into something dramatically better. Given how we sweat the details, we knew it was impossible for us to redesign everything all at once, so we tackled the job in three phases. The first phase of the redesign was marked with the release of a completely redesigned Cleartrip Account. The second phase was the launch of our redesigned booking process.

Today, marks the third and final phase — our flight and hotel search products have been redesigned and re-imagined from the ground up. This is a particularly thrilling moment in time for us, because while only a small percentage of our users see the Cleartrip Account or the booking process, a hundred percent of our users see our search products. Codenamed ‘Tuxedo’, this project has been a true labour of love for us — months and months of hard work, which has given us a new design framework for the next five years.

It is with an immense sense of pride that we give you the redesign we’ve been slaving over. In the words of one person who had a sneak preview, “It’s beautiful”. There is so much that is new and so much to speak of, but we’ll get to that with more details on the redesign over the next few days.

It’s faster, simpler and vastly better than what we had before. It’s better than anything else out there.

For now, we’ll just let a few images speak for themselves. Check out the slideshow below, and for best results, look at it in fullscreen mode by clicking the icon at the top-right of the widget.

At Cleartrip, we build world-class products. We know it’ll never be perfect, but we’ll never stop trying to make it perfect. That’s a promise.

Aside: I’d like to share something personal. When I was a kid growing up in Mumbai, I lived in an India obsessed with ‘phoren maal‘. Products with the ‘Made in India’ label were considered substandard; shoddily designed and engineered with poor finish and quality. They were, in a word, undesirable. To me, the association of India with low quality always stung.

Today, when I remember that time, I thank my lucky stars and I take great pride; because, at Cleartrip, I have the privilege of working with amazing people who won’t stop until we have the best products in the world. There are no words to adequately express the honour or pride I feel at working by their side every day.

On intellectual property

“From the earliest days of Apple I realized that we thrived when we created intellectual property. If people copied or stole our software, we’d be out of business. If it weren’t protected, there’d be no incentive for us to make new software or product designs. If protection of intellectual property begins to disappear, creative companies will disappear or never get started. But there’s a simpler reason: it’s wrong to steal. It hurts other people, and it hurts your own character.”
~ Steve Jobs

The statement is widely applicable beyond just ‘software as code’; it holds good for software as movies, television shows, music and books. When talented people can’t make money by creating software because of piracy and theft, there will just be fewer talented people creating software. When all that’s left is dog and cat videos, inane blogs and talentless creators, then we will have paid the full price of piracy.

Introducing online flight changes

At Cleartrip, we’re always looking for new ways to make life easier for our customers. One of the biggest pain-points for online travel bookers in general is rescheduling flights when their travel plans change. The only way to do this right now is to call customer support. In fact, almost a third of the inbound calls to our customer support team are flight change requests, and these calls last a good 15 to 20 minutes on average, sometimes even more.

As you can imagine, such a call is hardly an enjoyable experience, no matter how good the customer care executive is. It usually entails the caller explaining the issue to the executive, who then lists out alternate flights to choose from, their timings and the associated difference in fares. If the user prefers to pay using a credit card via IVR, then the process becomes even more harrowing as the caller may need to disconnect the call to receive the one-time password (OTP) and subsequently call back to confirm the payment. In a nut, while booking a flight is a seamless process, rescheduling one is quite the opposite.

Today we make this old school approach of changing flights obsolete. Starting today, we’re giving our customers the freedom and flexibility to change flights online. We’re proud to say that we are the first online travel agent (OTA) in India, and probably the first in the world, to offer this feature.

Be it any form of itinerary modification – date change, flight change, time change, changes for select passengers, changes for select sectors, changes for select passengers on select sectors – with Cleartrip, it’s all just a few clicks away. All you need to do is log in to your Cleartrip Account, click on the ‘Change flights’ icon, and change the booking online in a flash.

You’ll need to choose alternate travel dates for the onward journey and/or the return journey, and select the passengers for whom you want to change flights. For the remaining passengers and legs of the journey, the original booking would stay as is.

This leads to the search results display, where you’ll be presented with the complete set of domestic airlines and flights to choose from. The flights are sorted in increasing order of the difference you need to pay to make the changes, and you can choose any flight of any airline you want. And if the fare on your chosen flight is lower than what you paid earlier (plus the airline amendment fees), you’ll get a refund for the difference.

Upon selecting the desired flight, you can proceed to review the selection and make the payment as you would for a new flight booking.

The flight change confirmation and new e-tickets would be emailed to you and can also be accessed through your Cleartrip Account.

The whole process should not take more than a minute or two, and our customers have already fallen in love with it. We made this feature live yesterday, and we’ve already seen huge uptake on the very first day, even before the announcement. As many as half of the total flight changes yesterday were made online, instead of on the phone with customer care.

That’s not all – we’ve decided to waive off the Cleartrip amendment fees of Rs 300 for itinerary changes done online. Given that airline date-change & cancellation fees have been rising steadily in the last few months, this is our way of helping you save not only time, but also money.

We understand that changes in travel plans can be unnerving. With the ability to change flights online, you can focus on the upcoming journey instead of worrying about spending half an hour on the phone to change flights. So next time your travel plans change, go ahead and change your flights online – we guarantee you’ll wonder how you managed without it all these years!

Revisiting Passbook designs for easier paperless travel

“Feedback is the breakfast of champions.” – Ken Blanchard

Earlier this year, Cleartrip added support for Passbook and made paperless travel easier. Since then, we’ve received a lot of feedback on the design of the Passes. Now, we’re not the kind of guys who sit back and take feedback passively — we love getting feedback and we love getting better because of it.

Most of our customers have been telling us how it’s helped them have one less thing to worry about when they travel; and quite a few of them have suggested enhancements as well. The top demand was to put the PNR number on the front of the Pass. Another recurring piece of feedback was that some customers had trouble getting into the airport because the year of travel was not mentioned on the Pass.

It was also amazing to see many of our most frequent fliers go paperless and share screenshots of their iPhones stacked from top to bottom with Cleartrip Passes. When you’re trying to save the planet, every little bit counts…

With location and time-based notifications, Passes appear automatically on home-screens just when they’re needed, but we thought it was quite hard to tell one pass from the other in a tall stack of passes like above.

So, we put on our editor’s hats, waded in to change things for the better and here we are with a set of better designed Passes.

As expected, PNR is right upfront for flight, but due to limited space we could only do it for tickets with a single traveller. For multiple travellers, the PNR are still available only on the back of the pass. We’ve also added the year to the date of travel and terminal information, again at the back for the Pass.

For users like Sudhir, we’ve moved the date and destination to the top of the Pass to make it easy to find the right Pass with just a glimpse.

These changes also apply to our Train and Hotel Passes. In addition, Hotel Passes now sport an image of the hotel on them.

Finally, Passes are now supported for our Cleartrip for Business customers as well.

As we mentioned earlier, these Passes are designed for iPhone and iPod Touch devices running iOS6 or higher and any Mac running OS X Mountain Lion (10.8.2 or later). Android users can also use them through third-party apps like PassWallet and other third-party apps with Passbook support available from the Google Play store.

So far, we’ve personally verified that Cleartrip Passes have been successfully used for paperless travel in Bangalore, Delhi, Hyderabad, Mumbai, Kolkata, Goa, Pune, Jaipur, Thiruvananthapuram, Lucknow and Nagpur. If you’ve used it for any other airport, do let us know so that more people can confidently save the planet and #go_paperless.