Categories
Case Studies

Case study: Redesigning Indian railways ticket booking experience

View the original post

A cover pic  for case study containing new mobile UI and title
A preview of my final design

About IRCTC

Well, IRCTC stands for Indian Railways Catering and Tourism Corporation. It is an Indian public sector that provides ticketing, catering and tourism services to Indian railways. Major portion of users use IRCTC app for ticketing only. As Indian railways serve about 23 million passengers a day, this app being the only way of e-ticketing, plays a vital role in the day-to-day life of passengers.

Why redesign?

This is a personal project, which I’m currently working on. I have been using this application for several years now. IRCTC being the only authority of train ticket booking in India fails miserably to deliver in that experience. My experience as an user of this app made me think about this redesign. Then I validated the issues I was facing, by following methods.

  • Heuristic Evaluation of the app
  • Interview of 4 very different types of users (age range 20–48)
  • App store reviews of the app

While the first two methods helped me find out issues with the current design, the last method helped me prioritize them according to their severity. Two user personas were prepared by assembling minutes from these methods.

Problem Statement

On basis of my design need finding methods, I found out that the current IRCTC Rail Connect iOS app has a not-so-functional user interface which results into an annoying user experience. Also the interface makes the app look under-developed.

Goals

Creating a functional as well as appealing user interface using my knowledge of design principles and making IRCTC app an one step solution for all railway related queries of the user.

Scope of App

  1. Planning journey & booking tickets
  2. Provide necessary information about trains & stations

Here is the summary of existing app ratings and reviews analysis conducted by a very useful tool called Appbot.

Some analytics data with histogram, pie charts and plots
Existing app rating & review analysis

Two user personas were prepared by assembling minutes from the above mentioned methods. The pain points from both the personas are listed below. You can also view the complete personas in the following hyperlinks.

User persona Jatin Aggarwal

User persona Rajat Chauhan

User Pain Points

  • The IRCTC app has developing issues which leads to repeated login and hence, entering captcha for login repeatedly.
  • User can’t know about the sanitation/cleanliness of a particular train or station from the app.
  • There is no assurance about the arrival on mentioned time.
  • User have no idea about the running status of the train, he is going to travel with.
  • User can’t book a round trip ticket rather than going through the one-way booking process twice.
  • While booking tickets for family or friends, user needs to enter the same passenger details every time.
  • There is no assurance about the safety of user’s family & facilities offered by Indian railways.
  • Due to their busy schedule, some users struggle to be on time for train departure.
  • Users don’t receive any cashback for bulk booking, like in some other competing UPI apps.

The assurance for safety of passengers is considered as a pain point because theft and pick pockets happen very often in Indian railways and stations. Same goes for arrival on mentioned time. These issues are exclusive to Indian train passengers, hence they require special mention as pain points.

How Might We (HMWs)

  • How might we make the login experience easy for Jatin?
  • How might we provide more information about the train to Jatin?
  • How might we assure safety of Rajat and his family?
  • How might we inform Jatin, if there is a delay in train departure?
  • How might we give Rajat some variable reward, so that he will prefer to use our product?
  • How might we help Rajat in providing passenger details & booking tickets easily?

Information Architecture

A chart containing four branches

Main user flows & actions

People use a ticket booking app for very few things and whenever they are planning to travel. So we don’t seek for user engagement in such utility apps. For the information architecture, I found out that there are basically four major user flows.

Newly Added Features Explained

After going through the pain points of users, I thought of some new features which can be a valuable addition to the app. In this section, I have listed these newly added features and explained why they are helpful for our users.

  • Global search for Trains

Your parents are coming to your place. They have shared the train name/PNR with you so that you will be there in the station to pick them up. There are so many such instances when you just want to search about a specific train by it’s name or number. This global search on the app homepage will be helpful in such instances.

https://medium.com/media/f4890dd1465cda3a7fc77e1f5d9ae584/href

  • Round trip Booking

Due to puja holidays, you want to go on a trip to kolkata with your friends for 4 days. You want to book a round trip ticket and get some concession for bulk booking. Unfortunately neither IRCTC app nor IRCTC website have round trip booking feature. You have to book two separate one-way tickets by going through the same process. That’s why this round trip booking feature was important to be added.

  • Location based Information

This feature uses your device’s location services to give you more railway related information about the city you’re in. It provides you the local and metro rail routes for easier roaming around in the city.

While leaving the city, it gives you a list of nearby stations to help you in booking tickets. If your friends or family is coming to see you off you can book platform ticket for them from the app. By doing this, you’re avoiding the queue at station to book platform tickets. It also suggests places to visit in the particular location. This is not an essential feature but it is there to promote Indian tourism among people.

https://medium.com/media/5a8d371f779ddc136de56cf9844da56a/href

  • Train Ratings & Reviews

Some common issues with Indian trains are late arrival, bad sanitation, safety of passengers and their luggage. 3 out of 4 people I interviewed told me that there should be a better way to know about these problems before booking a train ticket.

Here comes the role of ratings & reviews as a feature. When you search trains for your journey, a 5 star scale rating will appear alongside the name of the train. By tapping there, you can view the ratings and reviews in details for that particular train. And obviously you can give feedback about your journey after completion.

Here comes the question, Why would an user bother to give feedback after the journey is over?

Well, I have observed a pattern in the most common e-commerce apps that, users give feedback mostly at two scenarios. Firstly, if they are extremely happy with their product i.e, the delivered product is exceeding their expectations. or they are so disappointed with the product that they don’t want other customers to go for it. That’s why we don’t get to see much of 3 out of 5 stars. Most of the time, it’s either 1/2 out of 5 or 4/5 out of 5.

Similar scenarios can be applicable for train journey cases. A train arrived 2 hours late from it’s expected arrival and you missed your next flight for that. Or a train had a very clean bedding and sanitation that was beyond your expectations. In both the cases you’ll want other passengers to know and make the right choice.

Indian railways carry approximately 23 million passengers using around 13500 trains on a daily basis. That brings us to around 1700 passengers per train per day. Even if 5% of that number bother giving feedback, we have 85 responses per day, which I think is enough to keep this train rating and review system going.

Some text and rating system
Train card

https://medium.com/media/15c424b1a14a847d2e6d5ceedbf82d8c/href

  • Showing seat availability & fare upfront

When provided with a list of trains for your journey, you want to compare the fare for each train and check availability of seats. These information come after choosing the seat class in existing IRCTC App. By providing them upfront in the list of trains, we’re helping users to compare their available options easily.

Some text on a blue background  like a card
Train card expanded

https://medium.com/media/bc8853009cdbbf37848f79d9ecfc7a97/href

  • Introducing Travel mode

When you have a journey starting in next 1–2 hours, you’ve to check a lot of things starting from your luggage & tickets to booking a cab to the station. After you arrived at station you also need to check the arrival time, the platform number and the coach position.

What if we assemble all these necessary information at one place to make things easy for you? This is what travel mode does. It contains

  1. Ticket view
  2. Live running status
  3. Coach position
  4. Route information

https://medium.com/media/2bca9e3c0e411ee813e3dcb250af49f5/href

  • Introducing IRCTC Pay

There are so many UPI payment options available now in the market. They also provide concession in fare or some other usable coupon deals to the customers for booking tickets using their app. Though users have to provide their IRCTC account details for successful booking, they still do the payment via other apps. This is high time that IRCTC should consider building it’s own payment system, so that users will get one app for the complete booking process. This is essential for existence of IRCTC app in long run. Otherwise users will completely move to other apps because they are also trying to improve their booking process.

Two mobile screens with some text
IRCTC Pay card in profile & payment section of the app

Some key screens UI Comparison

In this section, I will present the comparison between some important screens of the existing interface and my redesigned interface. This comparison is based on my knowledge of visual design and User experience design. I won’t write individual comparison for each screen to avoid so much text. But you can visually mark the difference in terms of

  1. Proximity in design (Grouping of related elements)
  2. Information Hierarchy (using color and type scale)
  3. Focus on CTAs, buttons and other interactive elements
  4. Design system using an user familiar language for communication
  5. Consistency of visual design through out the app
Two mobile screens showing home screen
Home screen comparison
Two mobile screens showing log in screens
Log in screen comparison
Two mobile screens showing profile section
Profile section comparison
Two mobile screens showing ticket details
Ticket details comparison
Two mobile screens showing search results
Train search results comparison

Complete prototype in Figma

Finally, here is the embed complete prototype I made using figma. You can try the prototype and share your views. Thank you.

Link to open in figma

https://medium.com/media/00526aff5b8b725cad6bcaf857e562c3/href

Responsive Design

There are so many types of devices now a days, it is very important to consider responsive design as an UI designer. Responsive designing refers to designing for one form factor and then resizing the design for other devices with rearrangement of contents. In figma, I used the auto layout and constraints features to achieve this result. Developers use flex box and media query for this purpose. Different grid structure according to material design break points were used to arrange contents in different screen sizes.

https://medium.com/media/04a57247585e3921d2a65e2d7c447a18/href

A laptop, a mobile and a tablet view of some content
Different device mockups

Future Work & My reflection

Some screens (like options of “more” tab) were ignored as they are not so important for the main user flow. These screens, which are ignored as of now can be made easily maintaining the design language and visual consistency with existing screens. According to me the redesign of app is almost complete with 2 sections remaining. These two are

  • Round trip booking screens
  • Local & metro routes

I’m currently working on these two sections. I have prepared the user flow diagram of Round trip booking, which is very similar to one way booking except the requirement of two train search results (onward and return).

“Just because something works, doesn’t mean it can’t be improved.”

– Princess Shuri, Black Panther Movie (2018)

Future additions to this app may include cargo shipment booking, Catering/Meal booking, A brand new on-boarding experience, Live running status using cellular network etc.

If you think there is any important user need that I’m leaving behind, please let me know. The problem is with so many screens and interactions, it gets difficult to remember everything for a single person. I’m sure that a team of designers & developers work on creating such end-to-end mobile app, not a single person.

A screenshot from some software on windows 10
A snap of back end of protoype in figma

Yeah! this is how the back end of the prototype looks like now. When I started working on this, I had no idea that it’s going to be this huge. I started this project to learn

  • End-to-end mobile app design
  • Responsive design using auto layout and constraints (flexbox & media query in developing terms)
  • Ideating and creating user flows with minimum possible path

and now after 3 months of simultaneous working and learning, I’m confident enough about the process that go behind such projects and looking forward to more of such work.

What did I lack in this project?

  • More user interviews and more data points
  • A developer’s opinion about the feasibility of my design
  • A client opinion about what they need for business.
  • Basically I worked on this whole project wearing an user’s shoes. But a final product is always an optimization between user needs and business demands.

This app design doesn’t contain any UI design trends like Neumorphism, Glassmorphism, Dark mode etc. Why so? Firstly it’s an app owned by Indian railways, which is a public sector organization owned by the Indian government. So it needs to have a neat professional look. In my opinion, dark mode should be used where user spends more time once they open the app like Entertainment (Netflix), Social media (Twitter). On the other hand, this travel ticket booking app once opened, will be used for 15 minutes at maximum considering it’s scope of usage. So dark mode won’t be a functional addition to this design.

Thank you so much if you read till here! 👏🏽👏🏽👏🏽 Here onwards, I present the design language and the UI Library that supports this prototype.

Footnotes

Atomic design principle by Brad Frost is something that is essential for structural development of such user interface designs. It helps you construct the most basic blocks of design (text, color, button) to complex elements (cards and pages sequentially. This is an example of how the Atomic Design principle by Brad Frost was used in this design.

Some text and icons on white background

Type system

Roboto typeface provides a sufficient x- height to make it legible even at small sizes. Minor third is chosen the type scale because I didn’t want much variation in font sizes. Much variation in font size leads to more dynamic look of the app, which is not required for this functional app owned by a government organization.

Text of different sizes
Typeface and type scale system

Color system

The existing color system (a gradient of two warm colors Orange and Yellow) lacks the essence of being a product of IRCTC. The newly used blue color (#34346A) is actually extracted from the existing IRCTC Logo. Then other tints of the color were created by using a color scale generator in figma. Also, a cool color blue felt just right for the neutral, professional and trustworthy look of the app with necessary contrast. Stark plugin was very helpful in checking the contrast, whenever it was required.

Color system containing colors in rounded rectangular blocks
Color system

UI Library

Buttons & Input field variants

Buttons and input fields variants

These buttons and input fields were created to have a consistency in the visual design throughout the app. There are three different sizes of button with each having active & inactive, primary & secondary, with icon & without icon variants. Similarly input fields have default, filling, filled and error states to be used whenever required.

Some Components

These components are the major building blocks of my Design system.

Ticket View

A ticket view containing journey details and QR Code

This view is a futuristic approach towards a complete digital system of traveling by Indian railways. All the necessary information that needs to be verified is present in this view. Traveling Ticket Examiners (TTEs) can use this QR Code for passenger verification. Also in future, a QR Code scanner based entry can make Indian railway stations a much safer space for passengers.

Route information

text with associated times and number

Route information was previously there in the existing IRCTC app. But this time, I have added a world in a miniature view of actual distance between intermediate stations by varying the distance between two pin points in the left side. This is a very small change which gives users the visual idea about distance n time between intermediate stations.

Live running status

Text, icon with some map view

Users need live running status, Whether it’s their own journey in next few hours, or they are in the train about to reach destination or they are going to pick up someone at the station. Initially I had only text showing the running status. But To validate the text, I had to add a map showing the actual route and approximate live location of train.

Feedback Card

A card containing 5 stars for rating

Initially I also thought about having a conventional form for taking feedback from users after completing the journey. But then I realized as a user, I don’t want to fill a form after completing my journey. Filling a feedback form seems like a not-so-important job from user’s point of view.

So to make this process interesting, I designed this card which uses a very simple gamification method. This card comes as a floating element in the completed trip screen and showing one criteria to review at a time doesn’t seem like much work.

Booking status

Booking status variants

These are all the possible variants for showing booking status of a trip. Familiar colors and symbols are used to deliver the correct message to users.

App Notifications

I have been using this app for booking train tickets for several years now. But I have never received notification regarding updates on my journey. Some people (like Rajat chauhan from user persona II) are very busy to keep up with their journey schedule. So we need to remind them about their journey with an update on live running status. Similarly we should let the WL (Waiting list) or RAC (Reservation against cancellation) passengers know about their updated booking status once the chart is prepared.

Notifications Mock up

The end.

Thank You so much for going through the complete case study. I can assume that you found this interesting to continue till the end. As a designer I always look for opportunities to visualize any information in an interesting way. Currently, I’m looking for UI/UX Designer roles. If you have any vacancy, where you think I will be a good fit, please let me know via vupatibhusan@gmail.com or any of my social media.

Vupati Bhusan Sahoo on Behance

https://www.instagram.com/vbs_designs/


Case study: Redesigning Indian railways ticket booking experience was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.