IRCTC
IRCTC
IRCTC
Redesigning IRCTC Rail Connect to refine the train booking journey and resolve usability issues
Redesigning IRCTC Rail Connect to refine the train booking journey and resolve usability issues
Redesigning IRCTC Rail Connect to refine the train booking journey and resolve usability issues
3 weeks
Timeline
Mobile app
Type
3 weeks
Timeline
Mobile app
Type
Overview
Overview
IRCTC dominates Indian rail bookings (12.38L tickets/day in FY23-24), yet poor UX drives users to competitors. Key issues from research: cluttered screens with overwhelming info density, painful login/signup with CAPTCHAs, confusing calendars/reservations, inconsistent navigation, congested spacing causing eye strain, and no easy passenger edits on review screen
IRCTC dominates Indian rail bookings (12.38L tickets/day in FY23-24), yet poor UX drives users to competitors. Key issues from research: cluttered screens with overwhelming info density, painful login/signup with CAPTCHAs, confusing calendars/reservations, inconsistent navigation, congested spacing causing eye strain, and no easy passenger edits on review screen
IRCTC dominates Indian rail bookings (12.38L tickets/day in FY23-24), yet poor UX drives users to competitors. Key issues from research: cluttered screens with overwhelming info density, painful login/signup with CAPTCHAs, confusing calendars/reservations, inconsistent navigation, congested spacing causing eye strain, and no easy passenger edits on review screen
Research
Research
Research
Interviews with frequent train travelers (friends, relatives, professors) plus domain insights from father (Railway Protection Force). Analyzed Google Play/App Store reviews for real-user pain points and sentiment.
Interviews with frequent train travelers (friends, relatives, professors) plus domain insights from father (Railway Protection Force). Analyzed Google Play/App Store reviews for real-user pain points and sentiment.
Interviews with frequent train travelers (friends, relatives, professors) plus domain insights from father (Railway Protection Force). Analyzed Google Play/App Store reviews for real-user pain points and sentiment.
Top Insights:
- Login/signup is the biggest drop-off (clutter + CAPTCHAs).
- Users struggle with recognition vs. recall in bookings.
- Irregular layouts make navigation and details hard to process
Top Insights:
- Login/signup is the biggest drop-off
(clutter + CAPTCHAs).
- Users struggle with recognition vs. recall in bookings.
- Irregular layouts make navigation and details hard to
process
Top Insights:
- Login/signup is the biggest drop-off (clutter + CAPTCHAs).
- Users struggle with recognition vs. recall in bookings.
- Irregular layouts make navigation and details hard to process
Key takeaways
Key takeaways
Key takeaways
Inconsistent Navigation
Inconsistent Navigation
Inconsistent Navigation
Users face challenges as a result
of irregular screen layouts and
nonstandard navigation
elements.
Users face challenges as a result
of irregular screen layouts and
nonstandard navigation
elements.
Users face challenges as a result
of irregular screen layouts and
nonstandard navigation
elements.
Overwhelming Information Density
Overwhelming Information Density
Overwhelming Information Density
The application presents an excessive
amount of information at once,
which confuses users and makes it
difficult for them to locate pertinent
details.
The application presents an excessive
amount of information at once,
which confuses users and makes it
difficult for them to locate pertinent
details.
The application presents an excessive
amount of information at once,
which confuses users and makes it
difficult for them to locate pertinent
details.
Edit Passenger Info
Edit Passenger Info
Edit Passenger Info
Editing passenger information is not possible from the "Review and Pay" screen.
Editing passenger information is not possible from the "Review and Pay" screen.
Editing passenger information is not possible from the "Review and Pay" screen.
Recognition Difficulties
Recognition Difficulties
Recognition Difficulties
Rather than making it simple for users to recognise and modify their previous selections, the current design makes them recall them.
Rather than making it simple for users to recognise and modify their previous selections, the current design makes them recall them.
Rather than making it simple for users to recognise and modify their previous selections, the current design makes them recall them.
Define
Define
Define
Meet Gautam
Meet Gautam
Meet Gautam
Bio
Bio
Bio
Gautam is a busy IT professional who travels a lot, both for business and pleasure.
He appreciates apps that provide a smooth user experience and expedite the
booking process because he has a busy schedule.
Gautam is a busy IT professional who travels a lot, both for business and pleasure.
He appreciates apps that provide a smooth user experience and expedite the
booking process because he has a busy schedule.
Gautam is a busy IT professional who travels a lot, both for business and pleasure. He appreciates apps that provide a smooth user experience and expedite the booking process because he has a busy schedule.
Motivations
Motivations
Motivations
Convenience
Convenience
Convenience
Simplicity
Simplicity
Simplicity
Efficiency
Efficiency
Efficiency
Budget friendly
Budget friendly
Budget friendly
Goals
Goals
Goals
Travel to different cities and meet different people from different states.
Travel to different cities and meet different people from different states.
Travel to different cities and meet different people from different states.
Wants to book tickets without and difficulty
Wants to book tickets without and difficulty
Wants to book tickets without and difficulty
Easily view and manage travel itinararies
Easily view and manage travel itinararies
Easily view and manage travel itinararies
29, India
29, India
29, India
IT Manager
IT Manager
IT Manager
01 Identify and Understand Need
01 Identify and Understand Need
01 Identify and Understand Need
Why Am I Re-designing This App?
Why Am I Re-designing This App?
Why Am I Re-designing This App?
I am redesigning the app the address problems that I’ve identified during the research phase of this project.
I am redesigning the app the address problems that I’ve identified during the research phase of this project.
I am redesigning the app the address problems that I’ve identified during the research phase of this project.
02 Finding Opportunities
02 Finding Opportunities
02 Finding Opportunities
Using ‘Pains’ To Develop ‘Gains’
Using ‘Pains’ To Develop ‘Gains’
Using ‘Pains’ To Develop ‘Gains’
By looking at the user pain points, i thought about how the Re-design
would turn them into ‘gains’.
Example:
Pain: Users struggle with a cumbersome date selection process and complex navigation.
Gain: Develop an inline date range slider that allows users to adjust
dates without leaving the current screen, streamlining
the booking process and improving user satisfaction.
By looking at the user pain points, i thought about how the Re-design
would turn them into ‘gains’.
Example:
Pain: Users struggle with a cumbersome date selection process and complex navigation.
Gain: Develop an inline date range slider that allows users to adjust
dates without leaving the current screen, streamlining
the booking process and improving user satisfaction.
By looking at the user pain points, i thought about how the Re-design
would turn them into ‘gains’.
Example:
Pain: Users struggle with a cumbersome date selection process and complex navigation.
Gain: Develop an inline date range slider that allows users to adjust
dates without leaving the current screen, streamlining
the booking process and improving user satisfaction.
03 Developing Features
03 Developing Features
03 Developing Features
Using ‘Gains’ To Develop Features
Using ‘Gains’ To Develop Features
Using ‘Gains’ To Develop Features
I Identified the desired effects or advantages that users want from a product and then creating features that fulfil these needs.
I Identified the desired effects or advantages that users want from a product and then creating features that fulfil these needs.
I Identified the desired effects or advantages that users want from a product and then creating features that fulfil these needs.
Design
Clear, Sharp & Minimal
I made these low-fidelity wireframes, which are layout and functionality-focused, serve as a visual manual that lays out the key components and user flow of the app.
Login
Logo
Login
Continue with Google
Agent login
Continue with Apple
Login
Usernname
pin
Home
Logo
Home
my transactions
Account
From
To
Class
Date
Search
Search results
Train
Price from Rs xx
Continue
Location X
Time
Time
Location Y
Train
Price from Rs xx
Continue
Location X
Time
Time
Location Y
Passenger details
Train
Class
Passenger details
Name
Add passenger
Contact details
Mobile
₹ 00000
Proceed to pay
Select payment
Train
Class
Payment method
opt 1
opt 2
opt 3
Proceed to pay
₹ 00000
price breakdown
Base fare
Ticket charge
Reservation charge
IRCTC travel insurance premium
Payment gateway charge
Total
₹ 00000
Design process
Design process
Clear, Sharp & Minimal
Clear, Sharp & Minimal
I made these low-fidelity wireframes, which are layout and functionality-focused,
serve as a visual manual that lays out the key components and user flow of the app.
I made these low-fidelity wireframes, which are layout and functionality-focused,
serve as a visual manual that lays out the key components and user flow of the app.
Login
Logo
Login
Continue with Google
Agent login
Continue with Apple
Login
Usernname
pin
Home
Logo
Home
my transactions
Account
From
To
Class
Date
Search
Search results
Train
Price from Rs xx
Continue
Location X
Time
Time
Location Y
Train
Price from Rs xx
Continue
Location X
Time
Time
Location Y
Passenger details
Train
Class
Passenger details
Name
Add passenger
Contact details
Mobile
₹ 00000
Proceed to pay
Select payment
Train
Class
Payment method
opt 1
opt 2
opt 3
Proceed to pay
₹ 00000
price breakdown
Base fare
Ticket charge
Reservation charge
IRCTC travel insurance premium
Payment gateway charge
Total
₹ 00000
Final UI
Final UI
Final UI
9:41
9:41
9:41
Login
Login
Username
Username
Username
Enter PIN
Enter PIN
Enter PIN
Forgot PIN?
Forgot PIN?
Forgot PIN?
Login
Login
Login
Agent Login
Agent Login
Agent Login
Don’t have an account? Register
Don’t have an account? Register
Don’t have an account? Register
Continue with Google
Continue with Google
Continue with Google
Continue with Apple
Continue with Apple
Continue with Apple
OR
OR
9:41
9:41
9:41
Registration
Registration
Basic Details
Basic Details
Personal Details
Personal Details
KYC Details
KYC Details
Username
Username
Password
Password
Confirm Password
Confirm Password
Continue
Continue
Already have an account? Login
Already have an account? Login
9:41
9:41
Registration
Registration
Basic Details
Basic Details
Personal Details
Personal Details
KYC Details
KYC Details
Full Name
Full Name
Email ID
Email ID
Mobile Number
Mobile Number
+91
+91
Continue
Continue
9:41
9:41
Registration
Registration
Basic Details
Basic Details
Personal Details
Personal Details
KYC Details
KYC Details
Adhaar/PAN Number
Adhaar/PAN Number
State
State
City
City
Pincode
Pincode
Register
Register
Login/Signup
Login/Signup
Login/Signup
Home
Home
Home
Home
IRCTC Rail Connect
IRCTC Rail Connect
From
From
New Delhi
New Delhi
To
To
Bengalore
Bengalore
Select Class
Select Class
Select Class
Select Class
Date
Date
Departure
Departure
Today
Today
Tomorrow
Tomorrow
Search Trains
Search Trains
Train
Train
Bus
Bus
Flight
Flight
Order
Food
Order
Food
Hotels
Hotels
9:41
9:41
9:41
Home
Home
My Transactions
My Transactions
Account
Account
Provided the option to search for trains and select
date and departure right on the home screen
Provided the option to search for trains and select date and departure right on the home screen
Provided the option to search for trains and select date and departure right on the home screen
Notification: for every update and search: to allow users to search
any service they want.
Notification: for every update and search: to allows users to search any service they want.
Notification: for every update and search: to allow users to search
any service they want.
Train search/booking
Train search/booking
Train search/booking
Passenger details
Passenger details
Passenger details
Easily located CTA’s
Easily located CTA’s
Easily located CTA’s
A simple login screen without any visual clutter
and the inconvenience of captcha’s
A simple login screen without any visual clutter
and the inconvenience of captcha’s
A simple login screen without any visual clutter
and the inconvenience of captcha’s
Book Tickets
Book Tickets
New Delhi
New Delhi
NDLS
NDLS
Bengalore
Bengalore
SBS
SBS
Tue
11
Tue
11
Wed
12
Wed
12
Thu
13
Thu
13
Fri
14
Fri
14
Sat
15
Sat
15
Sun
16
Sun
16
Mon
17
Mon
17
9:41
9:41
9:41
9:41
9:41
9:41
Easy to understand input field to change the boarding station
Easy to understand input field to change the boarding station
Easy to understand input field to change the boarding station
Users can easily Add, Delete and Edit passengers details
Users can easily Add, Delete and Edit passengers details
Date sliders provide a clear and intuitive visual representation of
the timeline, making it easier for users to understand the range
and context of dates they are selecting.
Date sliders provide a clear and intuitive visual representation of the timeline, making it easier for users to understand the range and context of dates they are selecting.
Date sliders provide a clear and intuitive visual representation of the timeline, making it easier for users to understand the range and context of dates they are selecting.
I provided ample spacing for the content to prevent it from
feeling cluttered.
I provided ample spacing for the content to prevent it from feeling cluttered.
I provided ample spacing for the content to prevent it from feeling cluttered.
The addition of tags ( fasterst, cheapest etc) allows users to
make a guided decision.
The addition of tags ( fasterst, cheapest etc) allows users to make a guided decision.
The addition of tags ( fasterst, cheapest etc) allows users to make a guided decision.
Passenger Details
Passenger Details
NZM- SBC | 14 Aug, Friday
NZM- SBC | 14 Aug, Friday
33hrs:30min
33hrs:30min
SBC Rajdhani (22692)
SBC Rajdhani (22692)
14 Aug, Fri
14 Aug, Fri
19:50
19:50
H Nizamuddin
H Nizamuddin
(NZM)
(NZM)
16 Aug, Sun
16 Aug, Sun
05:20
05:20
KSR Bengaluru
KSR Bengaluru
(SBC)
(SBC)
AC First Class (1A) | General (GN)
AC First Class (1A) | General (GN)
9:41
9:41
Change boarding point | New Delhi
Change boarding point | New Delhi
Gautam
Gautam
29M | Indian | Veg
29M | Indian | Veg
Add Passenger
Add Passenger
Note: Children under 5 years of age shall be carried and no
purchase of any ticket is required. (If no seperate berth is opted.)
Note: Children under 5 years of age shall be carried and no
purchase of any ticket is required. (If no seperate berth is opted.)
Passenger Details
Passenger Details
Contact Details
Contact Details
Mobile
Mobile
+91
+91
Mobile Number
Mobile Number
Enter Email ID
Enter Email ID
Fare Breakup
Fare Breakup
₹ 7300
₹ 7300
Proceed to Pay
Proceed to Pay
Payment
Payment
Payment
9:41
9:41
9:41
9:41
Payment
Payment
New Delhi - Bangalore | 14 Aug, Friday
New Delhi - Bangalore | 14 Aug, Friday
SBC Rajdhani (22692)
SBC Rajdhani (22692)
H Nizamuddin
H Nizamuddin
(NZM)
(NZM)
to
to
KSR Bengaluru
KSR Bengaluru
(SBC)
(SBC)
AC First Class (1A) | General (GN)
AC First Class (1A) | General (GN)
Choose Payment Method
Choose Payment Method
Debit Card
Debit Card
UPI
UPI
Bank Transfer
Bank Transfer
Price Breakup
Price Breakup
Fare Breakup
Fare Breakup
₹ 7300
₹ 7300
Proceed to Pay
Proceed to Pay
Base fare
Base fare
₹ 4380
₹ 4380
Ticket charge
Ticket charge
₹ 1460
₹ 1460
Reservation charge
Reservation charge
₹ 730
₹ 730
IRCTC travel insurance premium
IRCTC travel insurance premium
₹ 365
₹ 365
Payment gateway charge
Payment gateway charge
₹ 365
₹ 365
Total
Total
₹ 7300
₹ 7300
9:41
9:41
Booking Confirmed
Booking Confirmed
A confirmation has been sent to
your email
A confirmation has been sent to
your email
Booking Details:
Booking Details:
SBC Rajdhani (22692)
SBC Rajdhani (22692)
To
To
19:50
19:50
H Nizamuddin (NZM)
H Nizamuddin (NZM)
05:20
05:20
KSR Bengaluru (SBC)
KSR Bengaluru (SBC)
14 Aug, Fri | 1 Passenger | Gautam 32M | Veg
14 Aug, Fri | 1 Passenger | Gautam 32M | Veg
AC First Class (1A) | General (GN)
AC First Class (1A) | General (GN)
Home
Home
Emphasis is placed on the total amount due in order to make
the fare clear.
Emphasis is placed on the total amount due in order to make
the fare clear.
Emphasis is placed on the total amount due in order to make the fare clear.
Easily select payment method by just switching to
different modes.
Easily select payment method by just switching todifferent modes.
Easily select payment method by just switching to
different modes.
Clear confirmation message
Clear confirmation message
Users can easily Add, Delete and Edit passengers details
Design system
Design system
Icons
Icons
Layout
Layout
Reusable components for consistency:
Reusable components for consistency:
Thank you
Design system
Design system
Reusable components for consistency:
Reusable components for consistency:
Icons
Icons
Layout
Layout
Thank you :)