Expressway is now available for hotels and international flights

A month ago, we launched Expressway, one-click flight bookings — customers can book with just one click by saving their credit and debit cards securely in their Cleartrip Account. Since launch, we have seen traction among customers. Customers who’ve used Expressway for booking have often raved about the convenience and simplicity Expressway brings to the online booking experience. Measured by the daily number of bookings being made with Expressway, usage has exceeded our internal expectations by 5x.

Today, we’re happy to announce that Expressway is also available for hotels and international flights. To get started, just sign in to your Cleartrip Account and setup Expressway with your preferred card details and traveler name.

The next time you are booking an international flight or a hotel anywhere in the world, you will see a new tab Pay with a stored card in the payment options. Select the stored card you want to use, enter your CVV and then authenticate with your VerifiedByVisa (VBV) or 3D-Secure password to complete the booking instantly. It’s as simple and quick as that.

Get on Expressway today to see how the best online booking experience has been made even better. For a limited time, you can save a thousand bucks when you book with Expressway.

Cash payments for online bookings

Last year, we introduced payments with equal monthly instalments as a part of our commitment to giving our users the most choices about how to pay. Today, we’re adding one more choice to our payment options – you can now pay with cash, the simplest payment option of all. You are no longer restricted to cards and online bank accounts to make payments. All you need is cash in hand and a destination in mind.

Cash payments are accepted for flights and hotels, domestic or international.

To Pay with Cash, just click the “Pay with Cash” tab on the payment page to select from two different cash payment methods: “Cash on Delivery” and “Bank Deposit”.

Cash on Delivery

For “Cash on delivery”, or COD, you need to give us a pickup address, phone number and a few other details. You will receive a temporary trip ID and someone will be at your pickup address within 24 hours to collect the cash and give you a receipt for the same. Within 30 minutes of the cash being collected, your tickets will be emailed to you.

Deposit cash in a Bank

To pay with a “Bank Deposit”, you will also receive a temporary trip ID along with a set of instructions on the booking confirmation page. Just follow the instructions and deposit the cash in Cleartrip’s account by visiting your nearest ICICI Bank branch. Within the next 2 hours of depositing the cash, your tickets will be in your email’s inbox.

It’s that simple. And it’s FREE - we don’t charge you a penny extra for paying with cash. Because all your money is good here: plastic, electronic and plain old cash.

Note: You need to quote your PAN card number incase your booking amount exceeds Rs 25,000.

Redesigning the Cleartrip Account

About a week back, we announced the new Cleartrip Account – the gorgeous new design being one of the biggest pieces to this launch.

The new Cleartrip Account bears almost no resemblance to its predecessor and sports a dramatically improved visual design and information architecture – it makes managing your travel far easier… With this redesign we’ve focused on making the experience of using your Cleartrip Account cleaner, leaner and really snappy.

Apart from establishing a new design language, we’ve completely revamped the front-end architecture. Today, we wanted to walk you through some of the key improvements we’ve made to the design.

Uniform itinerary format across flights, hotels & trains

When we first started designing for the mobile, the limited screen size demanded that we completely cut down on any unnecessary detail. This also forced us to represent information with a stronger visual hierarchy to make it readable at arm’s length. One of the key information displays we optimised for mobile was the display of itinerary details. The new itinerary unit worked so well that we later applied it to our new ticket design as well.

We originally designed this just for flights. Now we’ve standardised the itinerary display for flights, hotels and trains.

Consistent trips list across devices

We’ve also unified the design of the trip list across Cleartrip Mobile and the new Cleartrip Account

Trips by travellers

You can now filter your trip list by the travellers you book for — handy when you want to quickly find that ticket you booked for your aunt one month ago.

Improved traveller details

In the old design, we presented each traveller seperately with the respective metadata for each separate flight booked was shown below the traveller’s name — if you were travelling with your family and you wanted to look up seat numbers for your onward flight, the information was split between travellers.

We’ve improved this block so that all traveller info for a particular flight shows up together.

Cost break up by traveller

If you often book travel for friends and family we’ve got a nifty little display of prices paid person, so you know exactly who owes you how much. We hope it makes collecting much easier for you.

Custom traveller avatars

Our custom traveller icons made their first appearance when we redesigned the Cleartrip Ticket. Apart from aiding security personnel to verify passengers at the terminal entrance, it added a little personal touch to the ticket. We refined those icons for the screen and they’ve made their way into your Cleartrip Account. We designed custom icons for male and female adults, male and female children and a single unisex icon for infants. You can see the icons in action in your profile and travellers section.

Easier online cancellations

Cancelling your tickets online has been made easier with a step-by-step indicator to guide you through the process. The cancellation policy and fare rules are neatly tucked in the right column for quick reference as you go through the cancellation process.

Easier seat selection

We slaughtered a bunch of seat selection usability bugs and revamped the seat selection feature completely and it is now a delight to use.

There’s so much more to the new design that we just couldn’t cram it all into just one post. We’ll have another post sometime in the next few days. Stay tuned and we’d love to hear what you think of our new design.

Cleartrip Account gets a new front-end architecture

A few days back we launched a shiny new Cleartrip Account. Aside from a host of new features — one-click flight bookings with Expressway, simpler and faster bookings for friends and family and Facebook Connect integration — the biggest piece to this launch is the gorgeous new design.

Hidden underneath that beautiful new user interface is a completely revamped technology architecture, designed from the ground up to exploit the best that modern browsers have to offer. The technology under the hood was the biggest single change that went into the launch and today we’re going to share some of the details about the technology.

Under the hood, it’s a completely new front-end architecture

Our first encounter with HTML5 and CSS3 was while building Cleartrip Mobile for smartphones. Since then, we’ve experimented with CSS3 in small ways on our site. For example, the new buttons we recently introduced across the site. We had shied away from a complete embrace of HTML5 and CSS3 due to the massive development effort required for cross-browser support. In the recent past, however, browsers have been evolving at a pace we’ve never seen before. Support for the HTML5 and CSS3 specifications is getting better with every passing day.

The writing on the wall couldn’t be clearer — we had to move whole-hog to HTML5 and CSS3 and the change would entail completely retooling the way we build and deliver our user interfaces at Cleartrip. In addition to leveraging all the new browser capabilities, our new front-end architecture has also significantly streamlined and simplified our front-end development process.

The debate

One of the key things we wanted to achieve with our new front-end architecture was a transition from the old web paradigm of page-by-page loads to the new single-page paradigm, where static assets are downloaded only once to the browser, after which only dynamically needed data is fetched from the server. Cleartrip Account was long overdue for an overhaul and it was the perfect candidate to serve as a pilot for delivering a single page app.

One of the biggest challenges with building single-page apps is managing the many different states of an application and making them readily accessible — supporting the browser’s back and forward buttons, making URLs bookmarkable etc. As we canvassed the many single-page web apps out there to review their approaches, we found that the most widely used approach involved appending #! (a hashbang) to the ends of URLs. The approach gained popularity when Google announced it as an approach developers could use to allow Google to crawl Ajax-heavy websites. Twitter uses this approach on their web site.

While the approach was widely used in practice, there was plenty that we didn’t like about it — it’s an ugly hack applied to one of the most important components of the web as we know it, the URL. Dan Webb nails down the most problematic areas of the approach in his post, It’s About The Hashbangs, explaining all the reasons why hashbangs are an ugly and temporary hack to the web.

Once you hashbang, you can’t go back. This is probably the stickiest issue. Earlier I stated that URLs are forever, they get indexed and archived and generally kept around. We don’t want to disconnect ourselves from all the valuable links to our content. If you’ve implemented hashbang URLs at any point then want to change them without breaking links the only way you can do it is by running some JavaScript on the root document of your domain. Forever. It’s in no way temporary, you are stuck with it.

At Cleartrip, we’re practitioners of REST-style architectures and we wanted Cleartrip Account to be consistent with that practice. We’ve always cared about URLs and we weren’t ready to compromise that, especially, when the HTML5 History API is now well supported by a variety of popular browsers. We decided to take the opportunity to build a single-page with properly RESTful URLs, which weren’t an ugly hack.

Single page app built on HTML5

Like Cleartrip Mobile for smartphones, the new Cleartrip Account is marked up using HTML5 and delivered as a single-page app using the HTML5 History API to manage different states in the app. There’s a fair amount of behind-the-scenes rigour involved in getting multiple services to work together while effectively managing state on the client side. To make this possible, we’ve knitted several different JavaScript libraries together. This is what our JavaScript stack looks like:

This diagram depicts how the browser and the server interact to display the list of booked trips for a user:

When a browser first makes a request to our web site for a URL starting with /account/ the server returns a static HTML skeleton, along with all the requisite scripts, stylesheets and images. The HTML skeleton already contains placeholders and hooks for all the content that will be fetched on demand. The server ignores any part of the URL after /account/ and simply sends the HTML skeleton to the browser. After the HTML skeleton is sent to the browser, we make an AJAX call to fetch the additional content required to render the correct state and display for the browser. Almost all the templating is managed on the client side in JavaScript; only a few particularly complex views are handled by the server.

The browser never goes back to the server to render different pages or views — static elements of the applicaton like headers and navigation are already downloaded to the browser.

New CSS Framework

With this new architecture, we’ve moved to progressive enhancement with CSS3. To make this leap, we had to completely rethink the way we write our front-end code. We’ve written a new CSS framework for front-end development at Cleartrip and adopted LESS, a dynamic stylesheet language, which has dramatically enhanced the speed with which we can prototype and deliver new products and features. We have a ton more to share about our new framework and approach, but that’s a story for another day.

Now using jQuery

Since we launched, we’ve used prototype.js as our core JavaScript library. Those days are over — our new core JavaScript library is jQuery. jQuery scores well over prototype on many fronts, but access to one of the most active communities was the key advantage which convinced us to switch.

We’ve got a long way to go before our new architecture is perfect, but we’re glad to have gotten our hands dirty with it. We’ve learned a lot and are looking forward to learning even more now that our users can get their hands on it.

Creating the Expressway brand

In October 2010, we first introduced Express Checkout on Cleartrip Mobile. After seeing that a large chunk of our mobile users were using Express Checkout, we decided to launch it for our desktop sites as well:

Incidentally, Expressway replaces Express Checkout, which was previously available only on Cleartrip Mobile — this is ironic because it was the adoption of Express Checkout by our mobile users which spurred us on to develop Expressway as a solution that works across all devices.

When we broadened the availability of Express Checkout from mobile-only to mobile plus desktop, we also decided that we wanted to rechristen and rebrand the feature and, thus, the Expressway brand was born. This post chronicles the story of the Expressway brand name and brand design.

The original Express Checkout feature was only available on mobile devices with HTML5 browsers which supported local storage. We had done little to build awareness or invest in marketing for the feature. The feature was represented in our mobile communications as just a simple cart icon. To be perfectly honest, the cart icon was simply a byproduct of designing the marketing site for Cleartrip Mobile at the last minute. Here’s what the cart icon looked like:

We wanted a strong identity which our customers could connect with because we were opening up 1-click bookings for all of our users, not just our mobile users. The original shopping cart icon wasn’t cutting it and neither was the generic ‘Express Checkout’ name. We wanted a name and a brand identity that captured the essence of what we consider the most important customer benefit — blazingly fast bookings with just one click. We began working on names and visual identities in parallel.

Some of the names that were tossed about for initial consideration were: FastPay, EasyPay, SimplePay, ExpressExit, QuickExit, QuickPay, SpeedBook and QuickTicket. None of these were working and, frankly, most of them were ghastly dull.

We settled on ‘Express Book’ as the working-title for the feature and began exploring visual identities for the brand. Some of the early concepts we explored emanated from the original cart icon itself.

We further simplified that concept into a simple ‘Bolt’.

As we began creating communication materials for the feature, we decided that the ‘Bolt’ wasn’t telling the full story. We believe that 1-click bookings is about more than blazingly fast bookings — it changes the way you book travel forever. The visual execution of the ‘Bolt’ just wasn’t positioning the brand the way we wanted.

So, we went back to the drawing board.

Synthesis — it all comes together

To draw inspiration for the logo, we turned to imagery of retro highway signs, the kind that were popular on American highways in the ’60s. These are some of the road signs we looked at to set the tone for the visual identity we wanted:

It was looking at these signs that led us to the name we finally chose — Expressway. The name Expressway instantly won us over: it had zing, panache, character; it affords an immediate association with travel; and it fit beautifully with the road sign approach we wanted to take for the visual identity. Everyone loved the name. With a name we loved, we focused entirely on creating the visual identity for the brand.

We went through a series of concept designs and iterations:

None of these were quite working. The look was leaning too far towards a neon sign you might find in Vegas as opposed to the highway sign imagery we wanted — not something we were quite happy with, but back-and-forth is a part of the design process at Cleartrip.

We continued to explore alternatives and started looking at signs composed with arrays of bulbs or LEDs; a common approach found on signs lining expressways around the world:

The above mood board led us to the next iteration — what you see today as the final Expressway logo:

Before we could say “Done”, we needed to evaluate how well the logo would scale to smaller sizes. It scaled down to 64 pixels without losing much fidelity. The 32 and 16 pixel icons, however, needed a lot of pixel retouching. 16 pixel icons are a personal passion — I love crafting them with my bare hands (1px ink tool for the Photoshop jockeys among you).

These blown-up versions of the smaller icons highlight the impact that hand-crafted pixels can have while scaling an icon:

Real-world usage

We were thrilled with the logo, but there’s no rest for the wicked — now we needed to adapt the Expressway logo for real-world usage in different contexts on our site.

In the booking flow

We needed to represent Expressway in two different contexts for users booking with us: for users who have Expressway configured and turned on and for users who haven’t yet turned Expressway on. Here’s what it looks like for users who have Expressway turned on:

There’s a little Easter egg in the above representation. If you notice, the icon is slightly different — the Expressway arrow points to the right instead of pointing upwards to signify that Expressway is turned on and is available.

Cleartrip Account Navigation

Getting this right was tricky as have an inset shadow treatment applied to all the icons in the primary navigation for Cleartrip Account. After a series of iterations, we were able to render an Expressway icon with the same treatment.

Mobile features

This adaptation of the Expressway logo is my personal favourite — with only two flat colors the perceived halo around the dots is simply magical.

So that’s the story behind the name, design and application of the Expressway brand. You should get on the Expressway today.

It took a huge amount of effort, but we had a lot of fun building the Expressway product and even more fun creating the brand for it. We’d love to hear your feedback, do share in the comments, on Facebook or on Twitter.

Simpler and faster travel bookings for friends and family

Over the last five-plus years, Cleartrip has had the privilege of being used to book hundreds of thousands of trips of all kinds — flights, hotels and trains. Along with that privilege, we get the benefit of vast insights into the booking patterns and behaviour of our customers. We’re always asking questions about our customers — what do they book? how do they like to pay for it? how often do they book? who do they book for?

While looking at the data to answer that last question, we saw that a large number of our customers book repeatedly for people other than themselves. They book travel for family-members, friends and colleagues with astonishing regularity and for a range of different reasons — low internet and PC penetration and a lack of tech-savviness. Another key reason people book for others is that, despite the rapid growth of India’s online economy over the last few years, not everyone possesses the ability or the comfort to make payments online:

For Indians, the idea of credit isn’t second nature (yet) and the adoption of electronic payments has been slow. India remains a cash-driven economy with over 95% of retail transactions still carried out through cash. The “carded” population is significantly lower than the global benchmarks, creating challenges for e-commerce players.
~ The Nilson Report

Given that a large number of customers were booking travel for others, we wanted to make booking trips for others as simple and convenient as booking your own trips. With the all-new Cleartrip Account, we’ve dramatically simplified things — booking travel for other people no longer plays second fiddle to booking travel for yourself. Customers have been able to store detailed traveller profile data in their own user profile for a while now; details such as phone numbers, email addresses, date of birth, passport details and more could be stored and then used automatically the next time you booked. Storing these details meant you no longer had to type them in repeatedly every time you booked. In the new Cleartrip account, you can create as many different traveller profiles as you like and you can populate these profiles with as much or as little detail as you want.

When you create traveller profiles for the people you book often for, you won’t need to type in any of their details while making your next booking for them. For instance, making an international flight booking requires profile details in addition to the traveller’s name — a date of birth and passport details are also required. Filling out detailed traveller profiles for all the people you book for makes booking trips dramatically simpler, easier and faster by eliminating the tedium and errors that come with repetitive typing. All the relevant data from a traveller profile will be filled in automagically when you book.

We’ve also simplified the act of creating traveller profiles — if you make a booking for a completely new traveller, that person will be listed under the “Recently booked for” tab on the Travellers screen. You can quickly and easily transfer people into your travellers list from here or you can delete them if you don’t think you’ll ever be booking for them again.

We hope you like the new Travellers feature in your Cleartrip Account. We wanted to make booking travel for your friends and family a zero-hassle experience, we think you’re going to love it.

Facebook Connect arrives at Cleartrip

Last week, when we announced the all-new better, slicker and faster Cleartrip Account, we briefly touched upon the integration with Facebook Connect:

We’ve always believed that travel is an inherently social activity – people travel to push their personal boundaries outwards through exploration.

We think travel gets so much better when you can experience and share it with your family and friends. Today, we’re going to walk through the most important pieces of the new Facebook Connect integration.

To connect your Cleartrip and Facebook accounts, all you have to do is sign in to your Cleartrip Account. You’ll see a large ‘Connect with Facebook’ button on the dashboard and profile screens.

Clicking that button will pop open a new window where you need to sign in to your Facebook account and authorise the connection with your Cleartrip Account. Once you authorise the connection, you can choose what information you want to import from your Facebook account — options include your full name, your current Facebook picture, your date of birth and your current home city. We only ask for the information we need in to make your travel search and booking experience faster and easier. Things like your full name and date of birth help because we can send that information automatically to airlines or hotels when you book. Similarly, setting your current home city as your home airport helps us personalise the deals and offers we send you, ensuring that you only see the ones that are relevant to you.

And last but not least, the most exciting feature afforded by our integration with Facebook Connect is AutoShare. When you turn AutoShare on, your travel plans are automatically shared with your network on Facebook. We love AutoShare because it lets everyone tap into the vast repository of travel experience that resides in your network. When you AutoShare your travel plans, your entire network can help you with travel tips and recommendations for your destination. AutoShare has the added advantage of letting people in your network tell you if they’re going to be in the same place as you when you’re travelling — whether they’re also travelling there or whether they’re residents of your destination. AutoShare is an opt-in feature which you can turn on and off as you please, you’re completely in control. And AutoShare is designed to protect your travel information; you can rest easy knowing that only the very general aspects of your travel will be shared — your destination, your date of arrival and nothing else.

You can turn off AutoShare at any time from within the settings section of your Cleartrip Account.

Connect your Cleartrip and Facebook accounts today to make the most of your travel — there’s a world of experienced travellers in your social network and they all want to help you have a great trip.

Making travel ‘re-search’ simple

At Cleartrip, we’ve always been passionate about delivering the very best user experiences we can. Observation is one of the key tools we use to refine our products. We’re huge believers in the power of observation – nothing delivers insight into user-behaviour and usability like it. We regularly take what we observe and use it to make our products better.

A recent analysis of user-search behaviour on our site showed that nearly two-thirds of our users perform the exact same searches multiple times before they actually make a booking. On average, users perform the same search five times, and over three days, before finally making a booking. Looking at the data, it was blindingly obvious that we needed to make this ‘re-search’ process dramatically easy for our users.

It was also obvious that delivering an elegant solution to our users would involve changing our home page. At Cleartrip, we’ve had to work incredibly hard to maintain the simplicity of our home page – it may look simple from the outside, but it takes a monumental amount of work and commitment to keep it simple; so, we have an inbuilt allergy to changing our homepage. The only way to really get a change to our home page approved is by proposing a change which makes the home page unequivocally, indisputably better.

There, in a nut, lay our design challenge – the most elegant solution required changing the home page, but the home page is massively resistant to change.

Adding clutter to the home page is a surefire way to stir up our anti-change allergens, so any design would have to add something completely new to the home page without adding any clutter.

To work within that constraint, we applied the Accordion design pattern to ‘make room’ without adding clutter – a single accordion unit with two separate panels; one for our promotional links and one for quick access to your recent searches. Only one panel is visible at a time and users can switch between panels with ease.

The recent searches panel in the accordion displays three rows of information for your last three searches. Each row shows the parameters for your last search – cities and dates. We didn’t think that just showing you your last search was enough, so we added the cheapest current price for your search and how the fare has changed since the time you did your last search. Finally, we made each row clickable so that you can ‘re-search’ your travel with just one click.

We liked this design so much that we’re introducing the travel ‘re-search’ feature for our flight, hotel and train searches simultaneously.

We hope we’ve made your travel ‘re-search’ simpler – one less thing to remember and one less search form between you and your travel.

Now book cabs to the airport online

Starting today, you can book cabs to the airport along with your Cleartrip flight bookings because making arrangements to get to the airport shouldn’t have to be a separate task for our customers. Booking a cab to the airport at the same time as you book your flights is a huge convenience – you don’t have to remember to call the cab company on the day before your flight, you get to book your cab in advance and you don’t have to spend any time at all on the phone with them.

India’s two most popular radio cab companies, Meru and EasyCab, are both available for booking directly through Cleartrip. Currently the only site offering this convenience and choice at no extra charge, we’ve kept it as simple as we could. Once you complete your flight booking, you’ll see a new tab on our confirmation page asking if you’d like to book a cab to the airport.

Cab Booking

If you wish to book the airport ride closer to your departure date, you can even do so from your trips page, just by signing into your brand spanking new Cleartrip account.

To book your cab, you just need to give us a few details such as your pick-up time, address and contact details.

Cab details

Once you’ve booked your cab, you will receive a confirmation SMS either instantly or 30-minutes prior to departure (depending on the cab service you select). You pay the cab directly when they drop you off at the airport – Cleartrip does not charge you anything at all when you book a cab through us. At this time, cab bookings are available only in Mumbai, New Delhi, Bangalore and Hyderabad.

So, sit back and enjoy your ride to the airport.