ct-blog flight hotel local

[Behind the scenes] Designing Cleartrip for iPhone (Part 3)

Last week we announced version 2 of Cleartrip for iPhone, an update that’s been long awaited ever since we launched the iOS app a few months ago.

The most significant addition is that you can now search & book international flights with the app. But we’ve also made plenty of improvements to make booking on your phone a delightful experience. We’ve completely rebuilt the new version from the ground up so as to take full advantage of iPhone hardware and software, giving the app a major performance boost.

Flexible search form, aka ‘Touch-n-go’

With this update, we’ve also added the option to book Business, First and Premium-Economy Class tickets along with plain old Economy Class. Here’s the new touch-n-go:

The taller iPhone5 screen size pretty much made way for this – the class of travel simply fits right into the extra space available. For older screens, we’ve made sure the height is flexible so users don’t have to scroll to hit the search button.

Subtle differences

Although it may not be visible on the surface, we’ve worked hard to adapt the app to the new iOS6 design language. Our previous app had glassy headers and buttons, but for iOS6 we’ve moved over to softer shading.

We’ve also added texture to parts of the app, we think it gives the app more character and works well with the new iOS6 language. We’ve introduced the linen texture for all the drawers in the app.

Airline logos

Here’s a personal confession – our previous app had non-Retina airline logos. This time around, we weren’t going to overlook that detail.

We painstakingly optimised over 400 airline logos for the Retina display; a mammoth undertaking, but every time we look at the flight search results, we’re reminded that it was worth it.

Travellers

If you’re a frequent Cleartrip user and have saved travellers in your Cleartrip account, then you’re going to love this feature.
The beauty lies in how it is implemented – it takes just a single tap to automagically fill out information for saved travellers while booking.

Slide to pay

Once we were done with the core functionality, we couldn’t help but want to add something cool. We started off with many ideas, but ‘slide to pay’ made the cut. This will show up only for the users who have saved cards with us – a little extra love for our best customers.
Here’s how we started with slide to pay.

For a while we settled on the second iteration, with the ‘swiping a card’ metaphor. A lot of our internal users absolutely loved it – and we still get the question “why did you remove that!” But others didn’t quite catch hold of how it works, and we thought it introduced a bit too much friction.

The Expressway icon fits perfectly into the role of a slider; almost as if we’d had a glimpse of the future while designing the Expressway brand. Who knew paying money could be so much fun?

We hope you enjoy using this update as much as we enjoyed building it.