IRCTC UI/UX Website Case Study

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 1

Website Redesign

Project
Overview

Why IRCTC?
IRCTC is the only authority of train ticket booking in India and has a complete monopoly on trains. Overall, the
Indian railway network has transported over 22 million passenger every dat in the pre-pandemic era. This
website however fails miserably to deliver and makes life tough for its users. Our personal pains while using this
website made us want to choose this for a redesign.

The Team

Methodology

Tools

Devanshu Soni - MA in Experience Design

 In Person Interview


Figma

Anindita Doshi - PDGP Design Computation



Usability Testing
Google Docs

Mon Mayur - MA in Visual Communication Affinity Mapping

Project Timeline
User Journey

Prototyping

2 Weeks

Usability
Protocol
During our usability test, we recruited participants who were representative of the
target users of the IRCTC website, including both frequent users and those who
were less familiar with the website. To ensure unbiased responses, we asked our
respondents more scenario-based and exploratory questions, avoiding prompting
them towards a particular answer. This approach helped us to gain richer insights
and discover issues we had not noticed before. Participants became more
personal in their responses and provided detailed explanations of their
frustrations with the website.

Problem
statements
To improve the website's user experience, we conducted research using the Qualitative method to better
understand user needs and pain points. During this process, we discovered several problems, such as
issues with the current website version. These problems were thoroughly defined and documented,
allowing us to address them in the final design. As a result, the website's current version offers solutions
that incorporate these improvements.

Visual clutter makes it difficult to Can’ t book a round trip ticket rather
comprehend important information. than going through the one-way
booking process twice.

Difficulties in understanding few terms/ They have given high priority to ads.
abbreviations such as WL/Vistadome/ sometime it overlaps on the main
Tatkal/RAC/CNF. content(really irritating).

Goals
After properly understanding the problem statements, the primary
objectives for the website redesign were established.

Upgrade the visual look Declutter the landing page

Present the features that have been most


Improve the site’s navigation frequently requested by users

Design
Process
Analysis

User research Persona


We commenced by interview to After conducting research and analysis
obtain insights from users. This it’s important to understand users
helped us to better understand different needs.expectations concerns.
what problems users are facing.

Design

User flow Wireframe Prototype testing

User flow provides Created wireframes to illustrate screen A round of usability testing was
a birds eye view of layout and functional elements on them. conducted on few users to make
the website Helped to evaluate usability and sure the solution was user
functionality friendly and appeling.

Methodology

Participant Group Our User group consists of 8 participants.

The participants were from varied socio-economic, age, and professional background
All Users are tech savvy and have used other well developed website
All Users have some basic knowledge about the Indian railways

Procedure The method used was Personal Moderated Interview (Think Aloud Protocol)

Each Interview was around 15 minutes long.

Documentation The interviews were documented through Audio Recording, Screen Recording, Audio
Transcript.

Usability
Testing
General Checking train status through PNR
Have you used the IRCTC website before? How It’s 2 days before your trip and your friends are
often do you use it? asking you for the details of the trip. Can you check
the status of your train on the website?
Booking multiple tickets Booking a ticket
Imagine you're going on a vacation with your 2 best
Can you now imagine that your friends have called you friends. Where in India would you like to go (Place Y)?
and asked you to book their tickets as well. Can you Where would you be leaving from (Place X)? Now can
book 2 tickets together on the same train for them? you book a train ticket for yourself from place X to
place Y?
Terms & Abbreviations Booking a round trip

Were you able to interpret with the terms and Now imagine that you just realized that you have an
abbreviations provided in the website? important event 4 days after your trip's start date.
Can you book a round-trip for yourself?
Opinion
Language
If you had to change 1 thing about this experience Do you think english and hindi are enough languages
of booking tickets on the IRCTC website, what for this website?
would it be?

isting
Ex

Website
Prob lems
Round Trip Functionality
Can’t book a round trip ticket Alert button seems that informs about the cancellation
rather than going though the one of train or some changes in the timings but what it really
way booking process twice. shows is the terms and conditions

Language
There should be an
H ome Icon option called
“Preferred Language”,
Not clearly visible and
because India consists
it is not highlighted of diverse cultures
properly and many languages.

Repetitions
Unnecessary repetition of
few functions like PNR
status which is displayed
on the homepage and in Legibility
the “Trains” drop down
menu tab. Text is superimposed
on the image creating
Arrangement readability issues for
the visitors.
States are not in an
alphabetically arranged
order

There are just too many


categories represented upfront

Price sorting Difficult to comprehend


Can’t find the train at first as it display loads
which fits in my of information within a
budget small space

V isual clutter
...... . ................

M akes it difficult to
comprehend information.
................

Terms & ..................

Abbreviations Overwhelming
Ads.
...... . ...........................................
D ifficult to understand
These advertisements
all these terminologies
are irrelevant and
pushes important
content down below.

User
Persona
G oals

Traveling once every 3 weeks with his friends or famil y

Easy ticket booking

Roy

F r u station
Age:22 Years

Occupation: Environmental Consultan t


Annoyed by the option of no round tri p

Location: B engaluru
H is friends always make him book their tickets as well
and it is very frustrating for hi m

He is a passionate environmental consultant


working in a small consultancy. He is a fun H e finds the login process very daunting and annoying

loving individual and loves to frequently go on


trips by train for its cost efficiency and the
camaraderie that they build during long hours Technical bugs like being thrown back to the home page
on the train. in the middle of login irritated hi m

G oals

H e wants to book a train ticket from B angalore to


Chennai on the IRCTC website .

H e wants to find the best train options for his travel


dates, check the availability of seats, and book the
ticket without any hassl e

Wants to view train tickets sorted by pric e

K a r ti k

F r u station
Age: 1 7 Years

Occupation: Design Studen t


H e has never used the IRCTC website before and finds it
overwhelming due to its complex interfac e

Location: B engaluru, K arnataka

H e had also faced difficulties in understanding the train


He is a student living in Bangalore for his college schedules, abbreviations and the availability of seat s

education. He often travels to his hometown


Chennai to visit his family during holidays. So Was irritated by “ unnecessary ” details at the time of sign
far, he has always traveled by flight but now he u p

wants to explore train options as well. He has


never used the IRCTC website before and is not
familiar with the train ticket booking process. Did not understand which station to choose for his trip,
and was unsure about which station is where at his
destination .

Affinity Map
I consolidated and organised the findings from the user research into
groups with common relationship.

Information
Architecture

What would these problems look like in the life of a person booking
tickets on IRCTC website.

Ideation
During the ideation stage, we focused on generating a wide range of ideas and concepts to address the
challenges faced by our users. We conducted research to gain a deeper understanding of their needs, goals,
and pain points, and used this information to inform our brainstorming sessions.

Storyboarding

I mage 1

The new user of IRCTC interviewed


found it difficult to understand which
seat to select and subsequently which
seat was which. For this, we realized
that on flight ticket websites, the
structure of the flight and seats are
laid out in a visual format, which helps
customers easily choose their flight
tickets. Therefore we designed a
solution that displays the seat
selection in a visual format.

I mage 2
The corporate user who has no time to
book tickets multiple times and pay
multiple times for train tickets wants
the option of a round trip. We designed
a radio button on the booking screen
that will enable users to book a round-
trip and save effort.

T y pography

Roboto S erif Inter


Bold AaBbC c Regu a l r AaBbCc
ABCDEFGHI JKLMNOP QRSTUV W XYZ
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmopqrstuv w x yz
abcdefghijklmopqrstuvwxyz

Robot Serif typeface has a sleek and modern appearance Inter is a variable font family carefully crafted and
with uniform width and balanced design making it highly designed for computer screens. Inter features a tall x-
legible, even at smaller sizes. height to aid in readability of mixed-case and lower-case
text.

Final Landing
Page

Book Ticket Services Contact Us sk Disha My Bookings More EN Login/Sign-Up


>

INDIAN RAILWAYS
Safety | Security | Punctuality

Book your Ticket


Roun d Trip One way DD/MM/YYYY* DD/MM/YYYY*
Depart r
From To Add date
Retu n

Add date

Quota Class
Person With Disability Concession lway Pass Concession
General Sleeper (SL)
Rai

Trains With Available Berth Flexible With Date

Search Trains
To

Good Morning
How many I help you today?

Find My Train PNR Status


Enter Train Name Find Enter PNR Enquire

Services

Holidays

Rai l Tour Packages International Packages Maharaja’s Express


IRCTC offers Exclusive Rail tour Best deals in International Holiday Redefining Royalty, Luxury and
packages with confirmed train tickets, packages, handpicked by IRCTC, for Comfort, Maharajas' express takes you
sight-seeing and meals for enchanting Thailand, Dubai, Sri Lanka, Hong Kong, on a sojourn to the era of bygone
Nilgiri Mountains, Darjeeling, Kullu China, Macau, Bhutan, Nepal, U.K., stately splendour of princely states.
Manali, Kashmir, Gangtok or divine Europe, USA, Australia etc. The Sylvan furnishings, elegant ambience
tours of Mata Vaishno Devi. packages are inclusive of sightseeing, and modern amenities.
meals, visa charges.

Rea d More Read More Rea d More

IRCTC Trains
How To
IRCTC eWallet
For Newly Migrated

General Information
IRCTC Official App
IRCTC Loyalty Program
M obile Zone

Important Information
Advertise with us
IRCTC-iPAY Payment Gateway
Policies

Agents
Refund Rules
IRCTC Zone Ask Disha ChatBot

Enquiries
Person With Disability Facilities

About us

Redesigned
S creens Book Ticket Services Contact Us A sk Disha My Bookings More EN Login/Sign-Up
>

The redesigned landing screen includes


strong and bold fonts makes easier for the
user to interpret
INDIAN RAILWAYS
Safety | Security | Punctuality
I chose the colour Black for the background
of the hero section
Book your Ticket
By using this colour in the background along
d Trip way
with the heading, I was able to design a rich, DD/MM/YYYY* DD/MM/YYYY*
Roun One

Depart Return
From
exclusive and an authoritative user To Add date Add date

experience Quota Class


Person With Disability Concession lway Pass Concession
General Sleeper (SL)
Rai

Trains With Available Berth Flexible With Date

Search Trains
To

Good Morning,Rahul
How many I help you today?

Find My Train PNR Status


Enter Train Name Find Enter PNR Enquire

Log in
Login to your account
Don’t have an account? Create now

By carefully listening to user feedback, a number of


changes have been made to improve the user experience.

Username

The design of the login screen has been streamlined,


making it more intuitive and user-friendly. Additionally, the Password
layout has been simplified, and the color scheme and
typography have been updated to enhance user navigation.
Forgot password?
OR

Login & Booking with OTP

=uqY3H
Enter Captcha

SIGN IN

Personal Account Agent Login

T rain
Navigator Book Ticket Services Contact Us Ask Disha My Bookings More R Hi Rahul

Quick Filters
Trains Selection Passenger Details Payment Confirmation
A C
The number of categories on the page were Available Ajmer D elhi Wed,19 Apr 23 All Classes Search

reduced and only holistic categories were Price

shown upfront Lo w to High


DEE JAN SHATBDI (12065) 05:23| Wed, 19 Apr 6 hrs 50 min 11:40| Wed, 19 Apr
High to Low
View route
Run s On: M T W TH AJMER JN DELHI S ROHILLA
Departure Time
3A TATKAL 570 2A 1570 1A TATKAL 2200
Tried to Improve user experience by Early Morning - 00:00 -
06:00

AVAILABLE 12 AVAILABLE 9 RLWL 8

enhancing readability on the landing screen


Free Cancellation Free Cancellation Free Cancellation
Morning - 06:00 - 12:00

of the website. Mid Day - 12:00 - 18:00

Night - 18:00 - 24:00


CHETAK EXPRESS (14261) 15:23| Wed, 19 Apr 7 hrs 50 min 22:40| Wed, 19 Apr
View route
Stations in Delhi Run s On: T W TH F S AJMER JN DELHI S ROHILLA
Delhi Sarai Rohilla Railway
Station (Nearest 2.5 km)
3A TATKAL 600 2A 1000 1A 1800
AVAILABLE 12 RLWL 8 RAC 8
New Delhi Railway Station (4.1
Free Cancellation Free Cancellation Free Cancellation
km)

Old Delhi Railway Station (5 km)

Good Morning,Rahul
How many I help you today?
Shahdara Railway Station (8 km)

Jhajjar Railway Station (10 km)

S eat
S election Train Book TickFlight
Bus et Services
Hotel More
Contact Us Ask Disha My Bookings More RR HHi Ra hhuul l
i Ra

DEE JAN SHATBDI (12065)


Departure: 05:23 hrs
 Arrival: 11:40 hrs

AII JAN | Wed, 19 Apr Run Time: 6 hrs 50 min
DEE JAN | Wed, 19 Apr

This is where you can choose the perfect


seat for your journey and make your travel
experience more comfortable and enjoyable.

Select Seat(s):

Seat selection screen has been designed Seats:

with your needs in mind. Makes it easier to Upper Berth (12)

see the available seats and their positions, so Middle Berth (19)

you can make an informed choice. Lower Berth (22)

Side-Lower Berth (3)

Side-Upper Berth (0)

Back

B ook Now

Takeaways
Research is mu st

For complex UX problems research is must. We couldn’t have redesigned the website without the help of
the people who actually use it. The user interview revealed invaluable insights.

Design opportunities are everywhere:

This project reinforced the idea that there are countless opportunities to identify problems and develop
solutions. While there may already be existing solutions to these problems, our approach to rethinking
and reframing these issues has shown us that there are always new ways to approach a challenge and
create meaningful solutions.

Thanks for looking through 16,000 pixels!


Comments appreciated.

You might also like