IRCTC: A Mobile First UX Approach

IRCTC online passenger reservation system is the sole contractor with the Indian Railways for selling train travel tickets online. With over 150 million tickets sold annually, the website is among the top grossing e-commerce websites in this country. With a network bandwidth of 1.7 GB, the website currently is capable of handling approximately 300,000 concurrent users, and book north of 20,000 tickets per minute. But its current user interface does not seem to do much justice to the numbers. It rather looks like it has been generated right out of the back-side of a choleric donkey.

Online ticket booking is supposed to be fast. And when we say fast, what we actually intend to point at is the process itself, and not the magic at the back-end that gets the ticket reserved. The process should be equally easily achievable irrespective of the device as long as it allows you to access the website. With roughly 50% of the active internet user base accessing the web via mobiles in India, the website needs to cater to its usability on mobile devices as much as on desktops and laptops.

So as a UX designer, I decided to take the onus of redesigning IRCTC with a mobile-first UX approach. My primary objective was to chalk out the features that were important for the end-user and place them in their respective priorities in a concise fashion. Also, I had to make sure that the design did not invite any serious architectural change in the existing IRCTC website simultaneously incorporating any good to have features the website did not possess in its existing version.

I took cues from the website’s logo mashed up with some grays for the background and bordering to define the palette and the elements of the site.

What follows is a series of screens I designed using Photoshop and Illustrator for the conception of the website homepage.

Home Page upon Landing. Above the fold, CTA for App install, Primary Navigation Menu and Login Form

The primary objective of IRCTC is to sell tickets. And to sell tickets, IRCTC would require to authenticate users. Hence, picking the idea right out of their existing design, I decided to place it as above. One drastic measure I took was to replace the existing CAPTCHA with the new, simpler and improved reCAPTCHA. The existing CAPTCHA on IRCTC would be highly susceptible to bot readers and hell for real users while the new reCAPTCHA just needs the user to merely check a checkbox (I would share the technical details of how it works some other time). Further it sits adept with the aesthetics of the mobile design, though that’s not a primary concern.

Page Upon scrolling beyond the address bar and closing the App Install CTA.

Many-a-times a user would just require to check the berth availability in a particular train and yet would require to login based on the existing design of IRCTC. Now, just due to the additional effort one has to put into logging into the website, more so in case of IRCTC, the users simply migrate to other websites to do so, costing IRCTC a possible conversion (even though IRCTC is the sole proprietor for online train ticket sales in India, there is still a probability that the user might just check the status on some other website and decide to book an over the counter ticket the next day).

This is what the second screen below the fold looks like.

PNR status checking again is only available currently on IRCTC post login. Further, IRCTC only allows you to check PNR status of only those tickets that you have booked through the portal. Again a probable missed conversion opportunity.

Checking train status though is definitely just a good to have feature for the website. But then, it definitely adds to the customer retention and goodwill.

Check Train Status- A good to have feature for customer retention. Also, a consolidated Alerts & Updates with links to an IRCTC blog wherever necessary makes it a lot more cleaner.

Alerts and Updates are an existing feature on IRCTC. Yet they are VERY clumsily places all over the website and it gives the site a very unbearable look. They are at the top in a vertical marquee, they are at the center in a horizontal marquee, they are everywhere- and its terrible. And they are not even the priority for everyone. Hence, I instead decided to place them in a simple and decent manner near the bottom of the webpage. The small window with an arrow icon would indicate that the particular bullet leads to say, an IRCTC blog article in a new tab/window (I hate pop-ups, and who doesn’t).

And finally, the sitemap, the copyright statements and the partner website and payment gateway logos.

Hope you like my work. If you do, please follow me here for more. I would keep posting more work, from app design concepts to iconography and website designs. Also, I would be doing a tablet version and a full website version for IRCTC. As I do, I would update the links in this article. Until then, ciao.

I originally posted this UX design work on www.ikartik.in. Please do visit the same in case you like my work and would like to see more, hire me or just say hi.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.