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

Soon after we launched Cleartrip for iPhone we shared some background on how we went about designing the new search form & the split screen. As promised, here’s part two with some more details on how we designed the app.

The word “details” has gotten a whole new meaning after the entry of Retina displays. Having said that, it’s the kind of canvas one needs to handle with care – while it accentuates the good, it also brings defects to the fore. We’ve tried really hard to use it to our advantage.

Recent Searches & Filters

Since we were following a similar UI pattern for displaying recent searches & filters, it became pretty challenging to design the perfect buttons to access each of these. Filtering flights is an explicit action, and we didn’t want to leave any room for ambiguity. A button with ‘Filter’ as the label seemed to be the most obvious choice. Initially we followed the same pattern for recent searches.

Here’s what the first cut looked like:

As you can see ‘Recent’ as a label wasn’t quite cutting it – to begin with it wasn’t communicating an action like ‘Filter’. We went back to the drawing board to see if we could explore an icon-based approach. We took this a bit further and added a drag handle to see whether it could work.

‘Recent Searches’ being an add-on feature, the drag handle made it much more playful compared to the original button. On the other hand, we were really skeptical about the filter icon – it almost ended up up looking like a Martini glass. Not to mention that dragging to filter flights isn’t an appropriate gesture at all. Each of these seemed to be working well in their own context, so we decided to do just that – get the best of both worlds. ‘Filter’ continued to remain a button, and the search form got a sweet little toy.

Trips & itinerary

Having uniformity across products has always been a priority. This makes it much easier for users to get acquainted with the new products we ship. In fact, we spoke about this recently, with the Trip list being consistent across accounts and mobile site. In keeping with that theme, the trip details page is a stripped down version of the desktop site, showing only the bare essentials.

We’ve used the same itinerary format as in our desktop site. For a smaller screen we used a strong visual hierarchy and removed all the unnecessary information.

First runs

While we’ve always tried to make our interfaces self-explanatory, on a smaller screen it’s important to keep things as minimal as possible. At the same time, we didn’t want our users to feel abandoned when faced with a new interface. That’s why we decided to use the coach marks the first time the app is used, to help users get acquainted with the interface. This works really well as it maintains the context of the interface rather than taking users through a tour.

Blank slates

Here’s how we are handling our blank states. The Expressway blank slate follows the design of our Expressway landing page:”https://www.cleartrip.com/expressway” to ensure a consistent visual treatment across all Expressway communication.

Check-box replacement

Translating existing form elements from the desktop and mobile sites into an app proved to be one of the bigger challenges. We were not happy with the default radio buttons and check boxes that iOS provides. We ended up using the check marks, a UI pattern which is somewhat hidden in iOS – you will notice it when you try deleting conversations in the ‘Messages’ app. In the context that we wanted to use the check boxes, this pattern seemed to work better.

Confirmation page

Not long ago we revamped the booking confirmation pages. The metaphor used in the new confirmation page sort of grew on us. This time for a smaller screen, we took the payment receipt and made a confirmation page out of it.

We’ve also added a delightful animation to the stamp–I guess you will have to book from your iPhone to see it.

While designing for iOS is a lot of fun, it’s very easy to get carried away. We tried to keep the perfect balance between “being functional” and “deliciously good looking”. The following quote by Paul Rand pretty much sums it up

Simplicity is not the goal, it is the by-product of a good idea

We wholeheartedly enjoyed designing this app, and hope that you will have as much fun using it as we had building it.