IRCTC Redesign — Avani Nagar

00 · The Brief

Context & Constraints

"India's railway ecosystem is a marvel. Its digital booking platform shouldn't be the thing that lets it down."

This was a self-initiated redesign challenge — not a client project. I chose IRCTC because it's a platform used by people across every age, income level, and digital literacy spectrum in India. If a design works here, it works anywhere.

My constraint was intentional: I did not redesign the entire platform. I focused on the core booking flow — the six screens a user touches from landing to confirmation. Depth over breadth.

Problem SpaceCluttered UI causing task abandonment in the train booking flow

ScopeHomepage · Booking · Passenger Details · Food · Confirmation · My Bookings

UsersIndian train travellers, age 18–55, mixed digital literacy

ApproachResearch-led · Hypothesis testing · Iterative design

Key ChallengeDesign must work equally well for a 22-year-old student and a 50-year-old first-time digital user

01 · Research & Discovery

I Started with People,
Not Pixels

Before opening Figma, I spent time observing and talking to real IRCTC users. The goal wasn't to validate assumptions — it was to find the real friction.

👥

Contextual Observation

Watched 3 users attempt to complete a booking on IRCTC without guidance. Noted where they paused, mis-clicked, or gave up.

🗣️

Informal Interviews

Spoke with 5 regular IRCTC users aged 20–50 about their biggest frustrations and workarounds they'd developed over time.

🔍

Competitive Analysis

Benchmarked against MakeMyTrip, Ixigo, and RailYatri — all platforms solving similar booking problems with different approaches.

"I always ask my son to book tickets for me. There are too many steps and I never know if I'm on the right page."

User, age 48

"The homepage looks like it was designed in 2010 and never updated. I know where things are, but only because I've used it for years."

User, age 24

"I always screenshot the booking summary before paying because I'm scared of losing my place. The site gives me no confidence."

User, age 31

"On mobile it's a nightmare. Half the text is too small to read and the buttons are tiny. I only book on desktop when I must use IRCTC."

User, age 22

02 · User Personas

Designing for Two
Very Different People

Rather than design for an average user that doesn't exist, I created two distinct personas that pull the design in opposite directions — and found the solution that works for both.

Priya, 22

Engineering Student · Books 2–3 times/month · Indore → Pune

Goals

Book quickly with minimum steps

Track seat availability in real time

Order food on the train

Frustrations

Too many ads and banners on the homepage

Session timeouts losing her selection

Cluttered navigation confuses flow

Tech ComfortHigh

Rajesh, 48

Govt. Employee · Books once/quarter · First-time digital user

Goals

Complete booking without help from children

Understand what he has selected at every step

Receive clear confirmation he can trust

Frustrations

Can't tell which step of booking he's on

Confusing mix of corporate and user content

Anxious about making payment mistakes

Tech ComfortLow

03 · Problem Audit

What the Original
IRCTC Gets Wrong

I annotated the existing homepage to map specific UX failures — each numbered point corresponds to a real friction moment observed during user research.

irctc.co.in — Current State Analysis

Ad banners above the fold — third-party ads (Hertz, BudgetSmart) appear before the core booking widget, competing for attention and reducing trust

No visual hierarchy — the 14-item horizontal nav treats every item as equally important. Users cannot identify where to start

Footer information overload — 40+ footer links with zero categorisation, making support discovery nearly impossible

Holidays content on a train booking page — Tourism promotions interrupt the primary user task without any clear wayfinding to return to booking

05 · Problem Definition

How Might We

How might we redesign the IRCTC booking experience so that users of all digital literacy levels can complete a ticket booking with confidence, clarity, and zero anxiety?

01 Design Principle

Hierarchy over completeness

Not everything needs equal weight. The booking widget must dominate. Everything else — tourism, loyalty, news — is secondary. Users must feel the "right thing to do" the moment they arrive.

02 Design Principle

Persistent context, always

Users must never have to remember what they selected. The booking summary follows them through every step of the flow. Removing cognitive load IS the design decision.

03 Design Principle

Design for the anxious user

When designing for a high-stakes transaction involving real money and real journeys, I optimise for the most nervous person in the room — not the most confident one.

06 · The Redesign

Six Screens.
One Coherent Experience.

Each screen solves a specific problem identified during research. Here's the thinking behind every major design decision.

01 / 06 · Homepage

From Chaos to Clarity — The Personalised Dashboard

The redesigned homepage does one thing first: it gets you searching for a train. The personalised greeting surfaces upcoming journeys and recently viewed routes — so returning users never start from scratch.

Removed all third-party ad banners — they compete with the primary task and erode trust

Navigation reduced from 14+ items to 6 user-relevant categories, eliminating corporate noise

Trust indicators (10,000+ Daily Trains, 5M+ Happy Travelers) anchor confidence without being intrusive

Upcoming journeys + Recently Viewed cards reduce repeat-booking time to a single click

02 / 06 · Passenger Details

The Step People Used to Screenshot Their Way Through

Research finding: users photographed the train details before entering passenger info because they feared losing their selection. The persistent Booking Summary panel eliminates this anxiety by design.

Progress stepper (Train Details → Passenger Details → Payment) anchors users in the flow

Booking Summary panel stays fixed on the right — users see what they're paying for at all times

Each passenger in a distinct card with clear labels — removing ambiguity about which traveller you're editing

"Add Another Passenger" action is unmistakable — no hunting for a buried link

03 / 06 · Food Ordering

Food Discovery That Actually Makes You Hungry

The original food ordering experience was a plain-text list. No images, no dietary tags, no categories. I redesigned it as a visual menu with rich food photography, dietary filters, and a real-time cart.

Food photography makes items tangible — users know what they're ordering

Dietary tags (Veg, Non-Veg, Vegan, Halal) are persistent and clearly visible on every card

Sidebar filters allow quick narrowing by meal type and cuisine without page reload

Floating cart button ("Review Cart · ₹190") provides live feedback and a clear path to checkout

04 / 06 · Booking Confirmation

The Moment That Must Feel Certain

Confirmation is a high-anxiety moment. Users need immediate, undeniable proof that their booking succeeded. The redesign leads with a bold green confirmation state and a clearly displayed PNR — before anything else.

Large green checkmark and "Booking Confirmed!" is the first thing users see — zero ambiguity

PNR number displayed prominently in a dark pill — the key reference users need for everything that follows

Journey, Passenger, and Payment details broken into distinct sections — scannable, not overwhelming

"Download Ticket" and "Email Ticket" are co-equal primary actions, respecting different user preferences

05 / 06 · My Bookings

Everything You Need, One Tap Away

My Bookings is where users manage their travel lives. Every action they might take after booking — download, food order, hotel, cancel — is surfaced inline on the booking card. No sub-menu diving.

Tabbed navigation (Upcoming / Past / Cancelled) creates a clear mental model of booking history

Confirmed status badge visible immediately — users know their booking is safe at a glance

"Order Food" promoted to a highlighted primary action — driving platform stickiness while serving the user

Passenger seat assignment visible inline — information users frequently need without navigating deeper

06 / 06 · Empty State

Even "Nothing" Is a Design Opportunity

The cancelled bookings tab with no entries — a moment most designers ignore. On the original IRCTC, an empty tab renders a broken-looking blank page, leaving users unsure if content has loaded. The redesign communicates clearly: nothing is here, and that's fine.

Clear icon + message confirms the tab loaded correctly — eliminates "is it broken?" anxiety

No call-to-action clutter — this is a neutral state, not an upsell opportunity

Consistent card container — empty states use the same visual language as populated states

Small detail with outsized impact on user trust and confidence in the system

08 · Testing & Validation

What Real Users Said

I ran informal usability tests with 3 participants representing different points on the tech-literacy spectrum. Each was asked to complete a full booking flow on the redesigned prototype.

Priya, 22 Student · High tech comfort

"I found the food ordering screen really clear. The filters work exactly how I expected. And I love that my previous journey is right there on the home screen — that alone saves me 3 minutes."

Rajesh, 48 Govt. employee · Low tech comfort

"The summary on the side — that's the thing. I always worry I'm booking the wrong train. Seeing it right there while I type my name, I felt calm. I completed it myself without asking anyone."

Meera, 35 Professional · Medium tech comfort

"The confirmation page is so much better. On the real IRCTC I always re-check my email because the site never feels certain. Here I felt 100% sure my booking went through."

10 · Reflections

What This Project
Taught Me

Scope is a design skill

Choosing NOT to redesign the entire IRCTC platform was the most important decision I made. By limiting scope to 6 core screens, I went deeper than I ever could have gone wider. Depth of thinking is visible in the work. Breadth without depth just looks like wireframes.

Anxiety is a UX problem, not a UI problem

The persistent booking summary panel didn't fix the visual design — it fixed a feeling. Users were anxious because they couldn't remember what they'd selected. The UI change was trivial; the UX insight behind it took research to find. This is the difference between decorating and designing.

Design for Rajesh, and Priya gets it for free

Designing for the least confident user in the room produced a better experience for everyone. Clear labels, obvious hierarchy, and persistent context help experts and novices equally. The reverse isn't true — design for experts, and you leave everyone else behind.

Empty states are not afterthoughts

The cancelled bookings empty state took 20 minutes to design and was the last thing I built. In testing, it was the detail Meera noticed most — "This feels like a proper app, not a government website." The smallest decisions often carry the most signal about how much a designer cares.

Making India's
Busiest Rail Platform
Human Again

Context & Constraints