Concept Redesign · IRCTC Rail Connect

Redesigning IRCTC Rail Connect: Making train booking feel simple again

A UX / UI exploration to put train journeys back at the centre of the experience, reduce cognitive load and modernise the visuals while still feeling like an official government app.

Role · Solo Product Designer
Timeline · Personal project (2025)
Platform · Android mobile app
Tools · Figma, FigJam, NotesApp

Why this project?

I’ve barely used IRCTC myself, and I don’t have much prior knowledge about how train booking works in detail. That became the reason I wanted to redesign it. I was curious to understand how a dense government product feels to someone new and what it would take to simplify the experience without removing important functionality.

I saw this as an opportunity to practise analysing an unfamiliar domain, breaking down a complex interface and rethinking the experience with a beginner-friendly perspective. Most of my understanding came from secondary research: watching walkthrough videos, reading app store reviews, exploring existing screens and speaking with frequent travellers about where they feel stuck.

What I focused on in this redesign

  • Understanding user pain points from an outsider’s point of view
  • Analysing navigation, hierarchy and information overload
  • Restructuring the home screen around booking trains
  • Wireframing cleaner flows before hi-fi screens
  • Building a calm visual system without losing trustworthiness
  • Reflecting on decisions and iterations throughout the process
Ecosystem & Competitor Scan

IRCTC in context: ConfirmTkt & TrainMan

To understand the landscape and what IRCTC could learn from other apps, I compared it with two popular third-party train booking apps to identify key differences and opportunities.

IRCTC (official)

  • Powerful, official service with full feature set (bookings, PNR, trains, transactions).
  • Feels dated and information-dense; navigation often feels desktop-first.
  • Refunds and some utilities are slow/complex (higher user friction in edge cases).
  • Strong trust factor because it is the government-backed app — important to preserve.

ConfirmTkt (third-party)

  • More modern UI patterns and clearer flows for booking and refunds.
  • Helpful features like waiting-list prediction and quicker refund summaries.
  • Tends to prioritise convenience and fast decision-making (good for inspiration).

TrainMan (third-party)

  • Strong utility features: PNR status, live tracking, quick notifications.
  • Simple, focused screens for the most common tasks (booking, status, tracking).
  • Good example of presenting dense information in smaller, digestible chunks.

Design takeaways

  • Keep IRCTC’s trust signals but simplify the visual hierarchy so tasks are obvious.
  • Borrow quick, helpful features (e.g., waiting-list cues, clear refund summaries) without adding clutter.
  • Group utilities so they don’t compete visually with the main booking flow.
  • Prioritise first-time user clarity — reduce overwhelming choices upon first view.
Why this matters

The redesign aims to bridge IRCTC’s official strength with the usability lessons from third-party apps: trusted, but easier to use.

01 · Problem & Goals

What’s not working in the current app?

Approaching IRCTC Rail Connect as a relatively new user, the experience often felt overwhelming and harder than it needed to be. From walkthroughs, reviews and conversations with frequent travellers, these issues surfaced repeatedly.

IRCTC Rail Connect supports a lot of features, but the way they are presented makes the core journey of booking and managing train travel harder than it needs to be. From my walkthrough, these issues stood out the most:

Summary – Pain points mapped to impact

Pain point
Impact on users
Core task is hidden behind an extra step. Booking a train ticket is tucked under a generic “Train” option.
High: Users spend extra time deciding where to tap first; the main action doesn’t feel obvious.
Flights and buses are over-emphasised. Secondary services visually compete with trains.
Medium: Core train journey feels diluted; the home screen looks like a mixed travel marketplace.
Ads appear before any ticket-booking option.
Medium: Users are distracted at the most critical step, increasing friction and drop-off risk.
Too many top-level options before scrolling. 13+ tappable items on first view.
High: New or low-tech users feel overwhelmed and unsure where to start.
Order food & Bills & Shop feel out of place.
Low: Breaks mental grouping of train-related tasks vs extras, adding cognitive load.

Detailed breakdown

Problem – key pain points

  • Core task is hidden behind an extra step. The main reason people open the app is to book a train ticket, but that action is tucked under a generic “Train” option instead of being surfaced directly on the home screen.
  • Flights and buses are over-emphasised. Flights and buses are secondary use cases, yet they visually compete with train booking instead of being treated as supporting options.
  • Ads grab attention before ticket booking. A promotional banner appears before any ticket-booking option, pulling focus away from the primary task and disrupting the flow.
  • Too many top-level options before scrolling. There are 13+ tappable options visible before scrolling. Items like YouTube or Gift Card feel irrelevant in that moment and add to cognitive overload.
  • Order food is mixed with unrelated categories. “Order food in train” sits alongside flights and buses, even though it naturally belongs with train-related utilities and services.
  • Bills & Shop feels out of place. The Bills & Shop section feels like a separate mini-app inside IRCTC, with little connection to the core journey of planning and managing train travel.

Impact on users

  • Users spend extra time just deciding where to tap first.
  • New or low-tech users feel overwhelmed and unsure of the flow.
  • Routine actions like booking, checking PNR or live status feel heavier than they should.
  • The app feels functional but not very focused on helping users complete their main task quickly.

Goals for the redesign

  • Make train ticket booking the clear hero action of the app.
  • Give secondary services (flights, buses) less visual weight.
  • Reduce cognitive load by grouping and reordering content.
  • Modernise the UI without losing the “official, trustworthy” feeling of a government product.
  • Add subtle personalisation so the experience feels more like a companion than a static portal.
02 · My Design Process

How I approached this redesign

As a self-initiated project, I used a simple, iterative process centred around quick exploration, visual refinement and documenting key decisions.

Step 01
Audit & heuristic review
Walked through the existing app, captured screenshots and noted usability issues, confusing labels and visual inconsistencies.
Step 02
Define problems & prioritise
Grouped issues into navigation, home hierarchy, information overload and visual consistency. Prioritised flows like booking and train search.
Step 03
Wireframes & flow
Sketched low-fidelity layouts for the home, train search and results to explore different hierarchies without worrying about colours.
Step 04
High-fidelity UI
Defined type, spacing, cards, chips and button styles that still feel like IRCTC but cleaner and calmer.
Step 05
Iteration & polishing
Reworked the header, bottom navigation, home content and train utilities after realising my first version was “prettier” but not much simpler.
03 · Scope & User Flow

What I chose to redesign

Scope

This is a concept redesign focused on improving the core experience, not rebuilding every IRCTC feature. I focused on:

  • Home screen (dashboard & primary actions)
  • Train search & results screens
  • Bills & Shops and Transactions overview
  • Login & profile header patterns
  • Bottom navigation & utilities (chips on Train screen)

All back-end logic, rules and policies from IRCTC stay the same. The redesign focuses only on UX and UI.

Updated primary flow

1. Open app → Home
User sees a personalised greeting, a short travel tip and four clear train-related CTAs.
2. Home → Book Tickets
Tap “Book Tickets” to land on a focused Train screen with From / To, date, class and quota.
3. Train search → Results
View trains with colour-coded availability cards and a sticky date row.
4. Results → Passenger & payment
Select passengers, review summary and then proceed to payment.
04 · Design Challenges & Iterations

Lo-fi wireframes & early explorations

Designing a calmer bridge, not a brand-new app

Before committing to any visual style, I explored low-fidelity layouts for the home screen, train search and results. The goal was to surface the primary “Book ticket” flow clearly while still keeping secondary services discoverable.

Home screen wireframe
Lo-fi home screen wireframe
Train search wireframe
Lo-fi train search wireframe
Train Availability page
Lo-fi train search wireframe
Passenger Details
Lo-fi train search wireframe

Home screen process

Current IRCTC home screen



Current IRCTC home screen
First redesign: Visually cleaner but still cluttered and unclear.


First redesigned home screen
Second iteration: Replaced number of passengers with a travel tip and a bottom navigation bar for better structure.
Second iteration of home screen
Final iteration: Toned down the ad into a text banner, rearranged the header and added the IRCTC logo for a calmer, branded hero.
Final redesigned home screen

Current train search flow

Train tab from the current home screen
Current train tab on home page
Current train search form
Current train search form
Current train list view
Current train list view
Current availability view
Current availability view

New train flow process

Train booking from home
Redesigned train tab from home
Train search form
Redesigned train search form
Train list layout
Redesigned train list layout
Train availability view
Redesigned availability view

What didn’t work (brain fogs, wireframes & discarded ideas)

Figuring out color choices

Discarded utilities layout
Exploring train availability layouts

Discarded home screen exploration
Thinking why not show class and availability together
Discarded train search exploration
Figuring out colors again

Discarded train list exploration
Figuring how to present extra links/buttons that currently available on IRCTC train page
Discarded availability exploration
Figuring out layouts and colors


Discarded compressed layout

Checkout & payment

Existing passenger details screen


Current passenger details screen
Redesigned passenger details: clearer boarding station and traveller information.
Redesigned passenger details screen
Existing review & payment screen


Current review and payment screen
Redesigned review & pay: a cleaner summary of fare, passengers and actions.

Redesigned review and pay screen

Login

Existing IRCTC login screen
Current IRCTC login screen
Redesigned login: clearer hierarchy and focused CTA.
Redesigned IRCTC login screen
05 · Final Design Highlights

What the redesigned experience looks like

Key screens

Home as a calm starting point: personalised greeting, a short travel tip and four clearly separated primary actions for trains.
Final home screen
Simplified login screen with clear hierarchy between credentials and OTP flow.

Final login screen
Bills & Shops layout aligned with the rest of the app, so it no longer feels like a separate product.

Redesigned Bills & Shops screen
Cleaner “More” menu organised into a readable, icon-led list.


Redesigned More menu
Secondary services grouped into a tidy grid, clearly separated from the main train journey.

Secondary services grid
Delhi Metro, File TDR, Schedule and Chart Vacancy moved into light chips below the form—easy to tap but no longer competing with Search.
Redesigned train search with chips
Train list view with clearer hierarchy and colour-coded availability.


Redesigned train list view
Availability panel that keeps the dense information but makes scanning easier.


Redesigned availability view
Passenger details screen focused on who is travelling and their key preferences.
Final passenger details screen
Review & pay screen with a clear summary before committing to payment.

Final review and pay screen
Design System

UI Kit & Visual Language

Color System

Primary Background
#FFFFFF
60% Usage
Secondary Accent
#FE8B34 (81% optional)
30% Usage
Button Stroke
#A3561B
Depth & Contrast
Grey – Footer & Surfaces
#F3F3F3
Icons & Text
#000000

Primary Buttons

Typography Scale

Style Typeface Size Weight Usage
Hero / Display Inter 22px Bold Train names, key screen titles
Heading 1 Inter 20px Medium Page & major section headers
Heading 2 Inter 18px Medium Form titles, sub-section headers
Body Inter 15px Regular Main interface text, passenger names
Body Small Inter 14px Medium Tips, supporting labels
Caption Inter 13px Regular Notes, disclaimers
Micro Inter 12px Medium Chip text, dropdown items
06 · Impact & Learnings

If this went live, and what I learnt

Potential impact (if implemented)

  • Faster access to core train-related tasks from the home screen.
  • Reduced cognitive load through clearer grouping and hierarchy.
  • A more modern, trustworthy perception of the IRCTC app.
  • Better scalability for future services inside the same structure.

Personal learnings

  • Redesigning a government app is more about trust and clarity than flashy visuals.
  • Sometimes a redesign is a bridge – you don’t have to solve everything at once to make the experience noticeably better.
  • Writing the case study while designing forces more intentional decisions instead of “aesthetic” ones.