Designing Cleartrip for iOS7

Earlier this week we released the newly designed Cleartrip for iOS7. Within just two days of release Cleartrip for iPhone has, again, been handpicked by Apple as an “Editor’s Choice” app. We’re quietly thrilled to see Cleartrip featured front and centre in the App Store.

As expected, many of our customers are missing the old taxicab yellow and black colour scheme that we’ve had since we first launched the app. Today, we’d like to share some of design thinking that has gone into redesign Cleartrip for iOS 7.

The march to a single unified Cleartrip experience

In yesterday’s post, we briefly touched upon the direction we’ve taken:

While the design is optimised for iOS 7, we’ve also managed to design it such that it feels closer to home, closer to the design of our products for desktop and other mobile platforms.

Here’s a look how everything comes together:

Content precedes design

Taking our cues from the design of iOS 7, we bid farewell to textures and gradients; and with those out of the way, the focus lies squarely on the content and the task at hand.

iOS as a touchscreen operating system has come a long way from its roots. Today’s users already understand how touch interfaces work. Most, if not all, the user-education has already taken place and the days of guided aesthetics in touchscreens are at an end.

The whole screen to play with

iOS 7 provides the opportunity to use the entire screen as a canvas for content and we’ve used it wisely. The new Cleartrip app uses every one of the 727,040 available pixels of an iPhone; content flows beautifully above and beneath translucent layers lending the design depth and context.

There is a magical layered hierarchy in the design that manages to be simultaneously strong and invisible at the same time. Achieving this layered hierarchy is a foundational building block for the future of all our products. We created a similar layered hierarchy when we redesigned our desktop products.

Typography

With access to dramatically improved font rendering in iOS 7, we’ve made the text crisper and sharper. Information has been made lighter on the eyes and easier to consume by increasing the white space boundaries around the content.

To paraphrase the good book, ‘And let him who wants less white space cast the first stone’…

Navigation

Cleartrip for iPhone has always evolved side by side with iOS from the very beginning. Here’s quick visual journey of how just the headers in Cleartrip for iPhone have changed with the operating system.

And, of course, we’ve worked on making a few of the little things better…

Immersive start-up screen

We noticed that when launching apps in iOS 7 gets transformed and crossfaded into app splash screen. We took advantage of this particular behavior and made our splash screen as a bigger version of our app icon. This got us a very smooth start-up transition.

Arm’s length PNR viewing

Our customers are great at sending us feedback and we love making the things they point out better and better. A longstanding quibble was that finding the PNR in trip details was too difficult. This is important to us because may customers use trip details as their mobile ticket at the airport where the PNR is a critical piece of information. And now we’ve fixed that…

Improved usability

On mobile phones we always contemplated the form designs. Placeholder versus Labels. We’ve finally implemented the labeled forms throughout. Now there’s less overhead while filling up the forms.

Support for native navigation gestures

In iOS 7, Apple added a subtle gesture to all of their native apps to let users go back one step — swiping from the left edge of the screen takes you back. Once you get used to this, you won’t be using back buttons much. Cleartrip for iPhone happily includes support for this new gesture.

We’ve worked hard to get this into our customers hands at the same time as iOS 7 arrived. We hope you love it as much as we do. And, as always, Cleartrip for iPhone is available from the App Store.


5 Responses