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.


Cleartrip for iPhone redesigned for iOS 7

Just yesterday, we shared some data on the iOS 7 adoption rate in India. We were all so shocked at the blistering pace at which iOS 7 was being adopted in India, that we stayed up all night, redesigned Cleartrip Mobile for iOS 7, submitted it to the App Store and got it approved…

Just kidding, we’ve been working on it for a few weeks now.

Tim Cook, Apple’s CEO, described iOS 7 as the “biggest change to iOS since the iPhone” was launched in 2007. And, boy, is it big. When we first loaded the developer preview on our iPhones, the redesign felt so overwhelmingly new and different that it took some days to get used to the whole new level of minimal. But soon enough, the visual tone of the iOS 6 along with the Cleartrip app began looking and feeling awfully dated.

We’re thrilled to announce the completely redesigned Cleartrip for iPhone — refined and polished to take advantage of the simplicity and beauty of iOS 7.

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. Cleartrip for iPhone now feels lighter, cleaner, simpler and snappier. We’ve fine-tuned all the typography in the app to take advantage of iOS 7′s new Text Design & Rendering Architecture.

Take a gander at some of the redesigned screens…

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. This is how the new design aligns with Cleartrip’s recent Tuxedo site redesign and our other mobile products.

It feels great to have our various products feel like they all belong to the same design family.

We highly recommend you to update your Cleartrip app and experience a more unified Cleartrip experience. For the design-minded among you, stay tuned for a post tomorrow where we will be delving into design details.



iOS 7 adoption rate in India

Soon after Apple launched iOS 6 last year, we blogged about iOS 6′s adoption in India and lots of people appreciated us sharing that data. Last week, when iOS 7 was launched, we immediately received requests on Twitter for a similar report on iOS 7 adoption.

Yesterday, Apple announced that over 200 million iOS devices are already running iOS 7. Apple is obviously sharing a global number and we’d like to share our own data to show an approximation for how iOS 7 adoption in India is trending.

From our standpoint, the adoption rate for iOS 7 is twice as fast as the rate for iOS 6 — within less than a week iOS 7 is contributing over 45% of the iOS traffic to Cleartrip Mobile. It took over a month for iOS 6 to reach a similar level of contribution.

This time we’re also sharing city level data for the adoption rates to see which cities are showing the fastest iOS 7 adoption, and surprise, surprise — Kolkata and Ahmedabad top the charts.

Movie posters, the Cleartrip way

Last year we posted about Redesigning the hotel icon, where we referenced the iconic DOT pictograms that have been in use across the world for years. At Cleartrip, we’ve been playing with these icons and graphics for a long, long time.

These pictograms have assisted millions of travellers of different ages and cultures, but we thought we’d have some fun with them too — break them out of their purely utilitarian straightjackets.

So, we held an internal competition asking for poster entries of your favourite movies redesigned using these pictograms. There were two advantages we saw — the first, being refreshing and viewing the age old pictograms in a new light; second, we wanted to add some zing to the design department’s space in our office.

These were the entries

The two best posters were selected from the submissions and the ‘prize’ was having one’s work framed and proudly displayed in the office.

This is how they look now.

Tuxedoes everywhere

We rolled out our new design more than a month back. At the time, only our flight search & hotel search had migrated to the new design. We wanted to keep a laser focus on our core products, get them to a stable condition before touching any of the other products. Having said that, we’ve been hard at work all along to move all our products to the new design. In fact, our Flight + Hotel Packages product was originally designed using the Tuxedo design framework; but we chose to retrofit the older design onto it because Tuxedo didn’t launch till 3 months later and we didn’t want to give the design away.

By now, you may have already experienced the Bus search that launched soon after the redesign – buses was the first new product which leveraged the new design language & framework. With Trains & Packages moving to the new design, we are happy to announce that all our core products are now wearing Tuxedoes.

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.

Search forms

Search results

Tool bars

You can see we are putting our tool bars to good use. The search summary, view switchers and smart tabs — and we’re just loving the way the design of the toolbars is scaling across our different products.

Individual result units

Unifying the user experience across all products is a huge milestone for us. We believe, consistency not only helps our customers as they move from one product to another but it also builds a tremendous amount of trust. The consistency in design patterns and code is also going a long way in helping our teams deliver much faster.

As we finish the fourth phase of Tuxedo, we start another phase that takes our products closer to being more cohesive. Stay tuned, we’ll be back with more news on this front.

Building ‘Undefeated’ teams

In 2002, Bill Courtney took over as Head Football Coach for the Mannasas Tigers in Memphis. Their story is chronicled in the Oscar winning documentary, Undefeated. He came to a team that had not won a single game in over ten years. It took him six years, but Courtney took the “losers” and transformed them into a unit that won the district championship. He didn’t do it by making his team focus on winning games; he did it by focusing on what was much more important:

The foundation has got to be a solid platform that you can stand on and speak to these kids and say, ‘This is the way you build yourself. If you build yourself this way and handle yourself this way and have character, you get to play football. And winning will take care of itself because young men of character and discipline and commitment end up winning in life and they end up winning in football. But when you flip it and the foundation of what you’re doing is football and you hope all that other stuff follows… Well then you think that football builds character. Which it does not. Football reveals character.’
~ Bill Courtney

Great companies are no different from great sports teams — they’re both collections of individuals that, together, achieve dramatically more than any one individual can. What sets great companies and great teams apart is a shared foundation. And foundations need depth. Deep foundations are imbued with vision, values and goals that go beyond short-term objectives like “Win the game” or “Achieve the revenue target”. Great teams don’t view their wins as achievements, they see them as an outcome of pursuing greater goals and staying true to their foundation.

When sports teams or business teams “flip it” and focus on the wrong end of the stick, they confuse outcomes and goals; they confuse cause and effect. And for confused teams, the most typical end is ruin.

Waytogo: Around the world in 5 trillion ways

Ever since the earliest days of online travel, travel sites have conditioned users to think of transportation as one mode of transport at a time. Websites of transportation providers have only offered their own inventory and third parties, like Cleartrip, offer a wider array of transportation options, but with each form of transport contained in its own isolated product e.g. Flights, Buses and Trains. Single-mode products to sell transportation were the only feasible options. This made things easy for us, but made it very hard for our customers. The status quo has never allowed for a simple way to compare modes of transport for a journey or to easily get routes and prices for a journey that requires multiple forms of transport to reach a destination.

As an industry, we’ve always left the heavy lifting for planning and booking these trips to our customers — we leave it to them to figure out the routes, plan connections, factor in intra-city commutes from airports to train stations, keep track of the different bookings, and more. Providing an integrated global search and booking experience for multi-modal transportation has been a holy grail of travel technology in our times.

Today, we’re proud to announce Waytogo, an integrated, worldwide route-finding and booking product. Launching as a public Beta today, we’ve tied up with Melbourne-based startup, Rome2Rio, to bring the world’s most state of the art routing technology to our users.

Waytogo has everything you need to find, plan and book your journey from anywhere to anywhere — by air, sea, road and rail. No matter where you’re going; as long as you have the will, we’ll find you the way.

Comprehensive

Waytogo covers over 5 trillion routes, 2.5 million places, 670 airlines and 600 ground transportation providers (trains, buses, local transit, ferries, etc.) worldwide — more than enough to satisfy most travel planning scenarios. Waytogo is not limited to only domestic searches, why would it be? Indian travellers are going overseas more frequently and we’ve always believed our products should be global in their scope and ambition. So, wherever you are wherever you’re going, Waytogo will, quite literally, find you a way to go. Kick the tyres, take a look at travel options and indicative prices from Faridabad to Florence, London to Ludhiana, Bathinda to Budapest, or New Delhi to New Haven

Its international capabilities notwithstanding, Waytogo is uniquely suited to travel within India. Unlike a lot of countries, multimodal travel is a way of life in India with our vast network of trains, planes and automobiles. India has thousands of destinations which aren’t connected by an airport or a train station. Getting to these places requires one to take multiple forms of transportation. Waytogo has all the important domestic travel options available to serve your domestic planning needs, for e.g. Mumbai to Lakshadweep, Jammu to Rameswaram, or Gorakhpur to Port Blair

Oh, and did we mention ferry services? Unlike “competing” products that recommend you spend over three hours driving, Waytogo will correctly tell you that the best way to get from Mumbai to Alibag is to take the one-hour ferry across from Gateway of India.

What’s more, Waytogo also has local transit data for New Delhi, Mumbai and Bangalore, helping you plan intra-city commutes and weekend getaways. Try these searches on for size – IIT Mumbai to Gateway of India or Chembur to Alibag

Compare the options

In the early stages of research you just need a rough idea of how much a journey is going to cost and how long it’s going to take. Waytogo supports dateless searches, providing indicative fares based on a proprietary statistical pricing model. For our environmentally conscious green crusaders, we also display an indicative carbon footprint for each option. Each route is given between 1 to 5 Green Star ratings depending on how much pollution the route generates in relation to the other available routes. 5-Star routes are the greenest and cleanest ways to go and 1-Star routes are the worst environmental offenders.

Booking Convenience

Once you’ve done your preliminary research and you’re ready to step up and book your journey, you can specify a date and let Waytogo do all the heavy lifting of working out routes, modes, connections and logistics. A detailed itinerary for every route will show you the layovers along the way, commutes to airports and stations as well as all the connecting travel options. When you search for a specific date you also get accurate prices for that date. You can start booking directly from the Waytogo page. Easy as pie.

We aim to make Cleartrip the Swiss Army Knife of travel and Waytogo is another powerful addition to empower the Do It Yourself traveller. Waytogo is currently released as a Public Beta because we’re still actively working on a few enhancements, tweaks and features; stay tuned. While we’re still working on it, we’d love to hear what you want us to add to Waytogo to make it even more awesome, so chime in, loud and clear, to the comments with your ideas.

Introducing Cleartrip Buses

Over the last year, Cleartrip has executed a mission to revamp all of our existing products around a new design framework we call Tuxedo. This year, our mission is to build on that framework to expand our product portfolio. Today, we’re thrilled to announce the first new product on Tuxedo — Cleartrip Buses. We have partnered with the two leading providers of online bus ticketing services, redBus and Travelyaari, to bring you a unique product which combines the Cleartrip user experience with the widest coverage of buses from our partners.

The beginning of the bus search experience will be familiar to our existing users — a simple, uncluttered search form.

The search results page offers a familiar experience, but with a few additions that bus travellers will appreciate. In addition to the usual filters around operator, departure time and price, we’ve introduced Smart Tabs. A ‘Volvo’ Smart Tab instantly reduces the search results to only Volvo buses, while a ‘Recommended’ Smart Tab instantly shows only the top 15 buses rated by our patent-pending Cleartrip Score algorithm. The Cleartrip Score is calculated based on a variety of parameters. Parameters include ratings, comfort, seat availability and price in relation to other buses for the same route. The ‘Recommended’ Smart Tab instantly cuts the clutter to help you make the smartest choices.

Select the bus you want to book and you will see available seats and additional details such as boarding points, cancellation policies and amenities onboard the bus. Just point and click to select the seats you want to book.

We’ve brought our familiar single-page book process to buses as well. With just two clicks you can easily review your itinerary as well as fill out traveller details. For existing Cleartrip customers, traveller details and your traveller list are seamlessly integrated and available.

The final step of the bus booking is where this product differs from our other products. Clicking the final book button will redirect you to our partner’s site to process your payment. Once you successfully make payment, our partners will issue you the ticket and will also be responsible for providing all after-sales support for cancellation, reminders, tickets, refunds and more.

We hope this makes Cleartrip an even more comprehensive travel solution than it was before.

[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