Enabling users to book and cancel train tickets efficiently— UI/UX Case Study

In this case study, I’ll share how I redesigned the booking and cancel ticket flow of IRCTC.

What is IRCTC?

IRCTC is a company owned by the Ministry of Railways of India that provides users with an online train ticket booking facility.

Core Problems

1. Inability to book tickets efficiently.
2. Inability to view and cancel booked tickets efficiently.

Core Users and User stories

15–35 age

Rahul is a 20-year-old college student. He wants to book train tickets because he is planning a trip with his friends to Goa from Delhi.

35–60 age

Nitin is a 52 years old man who works in Tata Steel and lives in Jamshedpur, he wants to book train tickets because he is missing his daughter who works as a software engineer in Bangalore, and wants to surprise her by visiting her place in Bangalore.

Research

To gain some perspective, I did primary and secondary research, and these are some insights:

1. Users find the app frustrating and confusing.
2. Users find it outdated and not user-friendly.
3. Non-tech-savvy people usually depend on someone to book tickets for them as they find it difficult to use.

Let’s get to problems and solutions.

#1. Inability to book tickets efficiently (ticket booking flow)

Train search page

Problems

Lack of emphasis on Trip details, visual clutter, and lack of visual hierarchy is making it hard to scan.

Solutions

1. Gave emphasis to trip details, fixed visual clutter, and visual hierarchy.
2. Removed options like, flexible with date, trains with available berth, and others as they can be used later on by various filters.

Search results page

Problems

1. The inability to quickly change trip details makes the user think they don’t have control and creates frustration.
2. Similar features — sort and filter are separated.
3. Need to click on every card to check the availability and price of every card.

Solutions

1. After multiple iterations, I came up with a navbar with the ability to edit trip details quickly.
2. Placed similar features — sort and filter together differentiated available by giving a toggle switch.
3. Showed the price of each class with seats without clicking on it.

Normal State

Expanded State

Filters page

Problems

1. Options are scattered.
2. Lack of consistency — checkboxes are placed differently in different places.
3. No option to filter from the arrival time slot.

Solutions

1. Fixed options together.
2. Improved consistency.
3. Gave the option to filter from arrival time slot.

Passenger details page

Problems

1. Related information like “Class”, “seats” and “price” are scattered.
2. No emphasis on “add new”.
3. Visual clutter and lack of visual hierarchy.
4. Payment info is irrelevant on the “passenger details” page (the next page is a review, not payment so it doesn’t make sense)

Solutions

1. Placed class, price, and seats together
2. Emphasis on “Add passenger”
3. Fixed visual clutter and lack of visual hierarchy
4. Removed payment info

Review details page

Problems

1. Uneven spacing.
2. Visual clutter and lack of visual hierarchy.
3. Extra click to see fare summary.

Solutions

1. Fixed uneven spacing.
2. Fixed visual clutter and lack of visual hierarchy.
3. Placed fare summary on screen for ease.

#2. Inability to view and cancel booked tickets efficiently (view and cancel ticket flow)

Bookings page

Problems

1. Visual clutter and lack of visual hierarchy.
2. Information overload makes it overwhelming for users.

Solutions

1. Fixed visual clutter and lack of visual hierarchy.
2. Gave limited information — removed PNR because usually, users identify their tickets by trip date and location.

Tickets details page

Problems

1. Visual clutter and lack of visual hierarchy.
2. No option to cancel the ticket on this page, here it says “cancellation and refund rules”. For cancelation, users need to go to another page which can be frustrating.
3. No emphasis on “confirm” status and seat details

Solutions

1. Fixed visual clutter and lack of visual hierarchy.
2. Gave the option to cancel the ticket.
3. Emphasized “confirm” status and seat details.

My learnings

• Each data point holds a different rank in the hierarchy and needs to be identified and conveyed accordingly.
• I worked on a lot of iterations to arrive at the right solution. During this process, I realized that iteration is the key.

And… That’s a wrap!

So that’s pretty much it. Hopefully, you found this article insightful. Feel free to comment with your thoughts and feedback.

You can connect with me on :

LinkedIn

Twitter

Email