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

A couple of days ago, we finally launched Cleartrip for iPhone. We’ve worked really hard over the last few months to bring Cleartrip to iOS and based on the response we’ve received so far, it’s been worth every drop of sweat.

Designing for iOS has been a challenging and exciting journey. We’re not new to the form factor of a smartphone; we’ve been designing products for smartphone browsers for two years now. We learned that designing for mobile browsers imposes unique constraints — we take a conservative approach to ensure that we deliver a great experience across different platforms and screen sizes. There’s always room for progressive enhancement, but fundamentally a product needs to serve the lowest common denominator.

We want to share some details today on how some of the most significant parts of our iOS user experience actually started out as small tweaks for our mobile site and finally found their way into our app.

Touch-n-Go

The new search form you see on the app originated in a Cleartrip Hackathon project code-named Touch-n-Go. As the name suggests, the overnight project was aimed at making our search forms more touch-friendly and less intimidating. The idea behind Touch-n-Go was to transform the entry of your search criteria by making it friendlier and more delightful.

This image shows the current search form on our mobile site and the prototype from the hackathon.

We wanted to roll this out on our mobile site but as you can see it would never work on a device with a landscape screen orientation. Additionally, we would need to build an airport look-up screen which would heavily rely on javascript and need to work on all platforms. Just too much effort for something that currently works straight out of the box on all browsers. So we put it on the shelf; it wasn’t until we started work on the app that we got the opportunity to pull it off the shelf and dust it off.

We wanted a design which reduced the friction in the search form as much as possible. This meant that we significantly reduce the noise on the screen, making your entry point to flight search as minimal as we could.

The last iteration and the final screen:

As much as we loved the fact that we could pick “Today”, “Tomorrow” or specify a date upfront, the intermixing of two and three column grids was bothering us. We dropped the shortcuts and stuck with a two column grid.

Now, here’s the best parts:

We move the “Today” and “Tomorrow”shortcuts into the calendar widget itself. The control to select number of travellers may be my favourite piece of the app. We’re glad to be the first ones to use the iOS native picker for picking travellers — it’s a perfect match, it almost feels like the iOS picker was designed for this purpose.

Round-trip searches on a single screen

About six years ago, we were the first to introduce round trip search results on a single split screen display. 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.

However, when we had to adapt this to Cleartrip Mobile we didn’t have the luxury to design round trip search results the same way.

The design constraints imposed by smaller screens pushed us down a path where we had to break up the process of picking round trip flights into two steps or two separate screens for selecting departure and return flights.

This is what round trip search results currently look like on our mobile site:

This time around, there was no settling for this. Cleartrip Mobile was my first project here and, from the very beginning, I’ve been itching for the opportunity to attempt the split screen approach on a mobile device. So one weekend, I quickly mocked up something to see what it would look like.

The earliest prototype of the split screen:

I shared this with the team and reviewing this mock our phones gave us a lot of confidence that this could possibly work. For the same constraints I mentioned above, we never rolled this out for domestic flights on the mobile site.

We went back to it when we started designing for a native iOS app. The early design just didn’t “feel” like you could move the two columns up and down to compare and select flight. The design wasn’t communicating it’s function well enough, it needed more texture and more depth.

The native iOS picker struck as a good design pattern to borrow from:

We used the drums to make each column feel scrollable and after a serious number of iterations achieved what you see today as our split screen search

That’s the power of prototyping — I can’t say this enough, but building something is the ONLY way to help you discover what will and won’t work for your product.

For all you fans of the details, there’s more coming soon; we just couldn’t fit it all into one post.