IRCTC WEBSITE UI
Key Features and Design Elements:
- Hero Section: A prominent hero section dominates the page, featuring a stylized illustration of a train traversing a bridge against a backdrop of trees. This visual immediately connects the user with train travel and creates a sense of journey.
- Clear Navigation: The top navigation bar provides easy access to essential sections: Home, Your Booking, Agent Login, Promotions, Contact Us, and More. A contrasting green "Login" and "Register" button stands out for user account management.
- Prominent Search Form: The core functionality of the website, the train search form, is placed centrally and prominently. It features clear fields for:
- From & To stations: With a convenient toggle to reverse the input.
- Trip Type: Dropdown menu to select "Return" or "One Way."
- Depart & Return Dates: Utilizing a calendar interface for easy date selection.
- Passenger Class: Dropdown menu offering various travel classes.
- Accessibility and Concessions: Checkboxes are provided for "Person with Disability Concession," "Flexible with Date," "Train with Available Berth," and "Railway Pass Concession," demonstrating a focus on inclusivity and user needs.
- Call to Action: A clear "Search Train" button in a contrasting dark color guides the user towards the next step.
- Additional Features: Smaller buttons below the search form offer quick access to "Buses," "Flights," "Hotels," and "Holidays," expanding the platform's offerings beyond train tickets. A link to "Try booking in Ask DISHA 2.0" promotes the AI-powered assistant for booking assistance.
- Branding: The IRCTC logo is placed in the upper left corner, reinforcing brand recognition.
- Footer: The footer (partially visible) contains standard links such as "Safety," "Security," and "Punctuality," building trust and highlighting important aspects of train travel.
Tools used
From brief
Topics
Share
Reviews
3 reviews
Great job! I like the illustration in the background and use of good UX practices in the design. If I were to recommend some changes it would be the following:
- Making the background illustration a bit more secondary could help give higher importance and improve the visibility of the heading and section bellow for starting the journey. This can be done by eg. adding a light white overlay over the illustration, reducing the contrast, or making the background slightly less dense in elements.
- I would also consider giving more importance to the section on the bottom by increasing the padding between elements a bit (space between the three rows - the journey type, dates, checkboxes), as well as maybe even bringing this section higher or placing it nearly in the center of the page, making it the most important part of the page. This could lead to higher conversion rates and thus more sales.
Besides that, I think you generally did a great job!
As a frequent (and often frustrated) IRCTC user, this redesign is a breath of fresh air. This feels easier to use and looks modern and clean. The illustration is beautiful but perhaps a bit too dominant, maybe consider giving more space to the booking interface since that's what most users come for. Also, the microcopy needs a consistent voice and more clarity. For instance, the form options could all use first-person phrasing —Change "Railway Pass Concession" to "I have a railway pass concession" or "person with Disability Concession" to "I have a disability concession." Also, make sure you maintain consistency in terms of pluralization (For example, "Buses" and "Trains" instead of "Buses" and "Train") and capitalization. Also missing are crucial booking categories Indian rail users need like the Tatkal/Women and General quota options. And what exactly is Ask DISHA 2.0? That button certainly needs more user-friendly labeling. That said, I feel this design has real potential to be expanded into a detailed UX case study! 🙌
Dear Ankita, Thanks for making the design. I will provide the feedback based on below aspects
UX:
- Red Color CTA "Try booki.." defines as an alert CTA. Usually CTAs can be different in colors but not Red.
- Also users eye tracking goes from Left to Right so technically the main CTA should be right after the form ends. For better UX
- Swapping the CTAs can be a good option since "Search CTA" is the main button
- Just a suggestion to reduce click for Trip Dropdown, if you keep a toggle switch "Round Trip" enable this can be round trip and disable this can be a single journey trip. It serves both the purpose.
UI:
- Whitespace at right side of the Container. Please increase the size of the input field which can fill the space.
- Remove the Red color from the button
- Add color to Busses, Flights etc. It seems disabled.
- I loved the illustration.
Rest Looks Good!
All the best.
You might also like

Security Expert Group — Web & Brand Identity Redesign

Fresh Baladi | Real-Time Bakery Alerts App | UI UX Case Study

Rummly - A zero-friction freecycle app

Product Catalog Mobile design

Crave Corner – Brand Identity for a Modern Dessert Cafe
