IRCTC Indian Railways
IRCTC is a government-operated train ticket booking platform in India, serving over 130 million users.
The redesign aimed to completely revamp the platform, streamlining the login and ticket-booking process to make information more accessible and user-friendly.
CSAT 80%
40% ⬇️ Time-on-task
Timeline
2 months, 2023
Tools
Figma, Figjam, Balsamiq, Maze
Role
UX Research, UX Design, Prototyping
FINAL PRODUCT
Highlights
Easy Flow
Effortless Navigation
Spotlight where it matters—booking tickets, checking PNR, and checking chart vacancies with real-time train updates. Through easy-to-spot CTAs, users can navigate the site effortlessly.
Fresh New Look
Easy Interaction
Design that feels as easy as it looks. Clear visual hierarchy and organized layout help users find and book a train with ease.
Clear Choices
Faster, Smoother Bookings
Decluttered information with a simplified booking and checkout process in three clear steps.
SOCIAL LISTENING
Problem Statement
The Indian Railways website has faced widespread criticism from customers, highlighting the need for substantial improvements to enhance its usability and functionality.
Need proper booking confirmation
Confusing layout
Unnecessary alerts
Complicated ticket booking process
Crowded with information
Too cluttered
Can't find where to click next
Quit midway
"
HEURISTIC MARKUP
Identifying The Issues
Design Principles Not Followed
There is a lack of visual hierarchy and disregard for the law of proximity, among other issues.
Missing Crucial Travel Information
Names of the arrival and departure cities were not mentioned etc.
Unnecessary Information Overload
Excessive, unwanted information makes it difficult to comprehend and focus on the important details.
COMPETITIVE ANALYSIS
Understanding The Market
I evaluated the criteria—clarity of information, intuitiveness of navigation, search and filtering options, visual design, and more—of IRCTC's top competitors.
Log in and book tickets on competitor websites to identify areas where IRCTC falls short and discover improvements needed to outperform them.
Results
The competitors provide a simpler and more intuitive process through
→ Clean layout, clear CTAs
→ Seamless user flow
→ Minimal and clean aesthetic
→ Focus on guiding users to the right information and next steps
→ Legends to explain uncommon terms
→ FAQs to address common queries
PRIMARY RESEARCH
Discovering User Needs
Participants for the user research represented varying levels of experience with the IRCTC website—from first-time users to frequent users.
User Survey
The survey received 25 responses. It aimed to understand customers' first impressions or previous interactions with IRCTC, their likelihood to recommend it, and likes and dislikes.
User Interview
Three participants were given two tasks: logging in through the homepage and booking a ticket from station A to B. Follow-up questions were asked to identify challenges and gather suggestions for improvements.
"How satisfied were you with the ticket booking process?"
Concerns Raised
→ Too many unnecessary alerts
→ Numerous unexplained terms
→ Booking page has too many filters
→ Redundant information
→ Outdated design with excessive advertisements
→ Hidden captchas
→ Unspecified errors with no cues on what to do next
Created an empathy map to help me distill and organize my findings. Categorized the data into what the users hear, say & do, see think & feel their pains and gains.
HMW, USER FLOW, AND SKETCHES
Ideating
Frequent users of the website are accustomed to the challenging methods of completing tasks,
How might we make improvements while also ensuring minimal interference for old users?
I created preliminary user flow sketches and wireframes (on balsamiq), avoiding drastic changes, and simplifying the ticket booking process by first focusing on removing redundant information and unnecessary steps.
FINAL CHANGES
Incorporating Improvements
Easy Login
Introduced a pop-up for login, removed background distractions and added a confirmation message for successful login.
Improved Visibility and Access
Key Functionalities
Booking Tickets, PNR Status, and Chart are accessible via clickable radio buttons. Alerts are highlighted without distracting from core functions. Holiday Packages are showcased for easy exploration.
Navigation Bar
Restructured navigation with reorganized menu items and a prominent login/register button.
FAQs, a chatbot for immediate assistance and testimonials were introduced to build trust.
Intuitive Design
Organized Information
The new design has improved visual hierarchy and eliminated redundant information making it easier to glance through information like - filters, available trains and seats, etc.
New Features
A new sort feature and date carousel at the top were introduced for easy train searching. A legend guide was added to explain potentially unfamiliar terms.
3 Easy Steps to Book
Add Passenger Details
Enter passenger information in a streamlined pop-up with clearly labeled fields.
Review Journey
Easy to glance and confirm all necessary journey details.
Checkout
Complete the booking with a secure payment process.
USABILITY TESTS
Creating An Impact
One-On-One Sessions | Five Participants
2 tasks were given
→ Log in to the website
→ Book a train journey (for a specified date and to & fro stations)
followed by questions about filtering and sorting, reviewing journey details, and ticket confirmation, etc.
“It’s just so much easier to take in all the information and find the train I’m looking for.”
-PARTICIPANT
The time taken for the task of booking a ticket on average decreased from 5 mins to 3 mins, a 40% decrease.
Most users said they were extremely satisfied with the process, rating it 4 or higher out of 5, resulting in a CSAT score of 80%.
WHAT DID I LEARN
Takeaways
Acquired the skills to develop designs that seamlessly integrate improvements while prioritizing a smooth transition for long-time users who are accustomed to more traditional approaches.
This experience underscored the crucial role of empathy in design.
WHAT I COULD HAVE DONE BETTER
Reflection
Needed to test the user flows with Balsamiq wireframes before designing in Figma.
Focused more on the train search page for a simplified flow of train compartment and seat selection.
