User Pain Points & Insights Proposed Design Solutions
Login & Onboarding
Users can progress through multiple booking steps (e.g., station selection, ticket type, fare view) without being informed that login is required, leading to wasted effort and frustration. Give users a proper login flow that does not allow users to take actions before successfully logging in, saving effort and frustration.
There is no clear indication of login status; the main screen looks almost identical whether logged in or out, with only the login button being replaced by a notification button. Make the default screen a totally different stage in the flow so that the users log in first > then go on the main screen so there is no confusion.
The app lacks visual cues (e.g., greyed-out buttons, lock icons, tooltips) to indicate that certain actions are disabled when a user is logged out. Create buttons with proper states that indicate selected, active and inactive states.
The login prompt is unclear and not contextual when a user attempts to book without logging in. A modal that says session expired and prompts the user right away to log in to prevent annoyance and friction in booking.
The login button is poorly positioned and hard to notice, making it difficult for users to realize they are not logged in. Make the initial login screen and session expired screens prominent so that the user has to login before they take actions.
Performance
The app consistently demonstrates sluggish performance, with each step in booking flows taking longer than it should and every step involving a loading screen. Use progressive disclosure to make it easier for the system to load stuff in the background while minimizing wait times for the user.
Users express a desire to click something while the app loads to the next screen, indicating frustration with the delays. Make the loading process feel less lengthy by giving them a prompt or a interesting loading screen to make the users less irritated.
Navigation & Information Architecture
Navigation elements are confusing because many options look and behave similarly but perform different functions. Make navigation items look and function distinctly to eliminate redundancy and make the decision making process easier for the user.
The app lacks a clear navigation hierarchy, such as a bottom navigation bar, to group persistent and contextual features effectively. Create a hierarchical navigation system that feels natural and logical (for ex, a persistent bottom navigation).
Functions are not logically grouped (e.g., booking history, transactions, and "show ticket" could be combined). Combine similar navigation items to decrease cognitive load and eliminate confusion
Users struggle to locate specific sections, like the profile or help, due to their poor placement within the app. Create a visual structure for screens so that all the important items are easily discoverable
There is no visual indication of active or inactive states in navigation tabs, making it hard for users to know their current location. Create UI components that change depending on their state so the users understand if something is inactive.
Important features, such as booking by QR, are out of reach for one-handed use, posing a hassle for commuters booking on the go. Optimize reachability on all the important options and features so that users can operate the app easily while on the go.
Booking Flows (Journey & Season Tickets)
The overall booking experience is described as painfully slow, complex, repetitive, and unoptimized for on-the-go use. Redesign the flow to be streamlined and faster with less clicks and faster booking.
Users find it frustrating that moving back one step in a flow often results in going back three steps. Use progressive disclosure to tell users how far in the flow they are and save their booking progress wherever possible.
A significant friction point is the mandatory initial selection of radio buttons (e.g., "paperless" or "book at window" for journey tickets, "issue" or "renew" for season tickets) before users can proceed with basic booking details like source and destination. Eliminate the radio buttons and have one of the options be the default selection while giving the user the option to toggle to the other way of booking. This will help the users start booking and eliminate the biggest point of confusion in the app.
Call-to-Action (CTA) buttons are often confusing, irrelevant, or inconsistently named (e.g., "GET FARE" instead of "Book Ticket" or "Get Pass"; "Submit" instead of "Get Pass"), leading to user confusion and increased drop-off rates. Create consistent and easy to understand CTAs with proper hierarchy and copy that help people understand what they are doing.
Users are presented with an unnecessary decision point after entering source and destination to "get schedule" (which shows nothing) or "GET FARE". Eliminate all the empty options to reduce confusion and integrate the schedules smartly into the flow so that the users can understand when their next trains will be.
Booking pages are text-heavy, lack proper visual hierarchy, and are difficult to scan for information. Create scannable pages that allow users to get all the important information quickly.
The app limits bookings to a maximum of 4 adults or children, which is a significant inconvenience for larger groups. Increase the limit for booking in groups to avoid having to book multiple times or standing in queues.
Variable selections (e.g., number of passengers) are primarily managed through inefficient drop-down menus. Use buttons or sliders to set the variable options that are easier to use and save time.
The process for season ticket booking is elongated by asking for additional information (train type, pass duration, ID) on a separate screen after initial submission. Eliminate editing the personal information after it has been added once by the user because it is simply unnecessary to give the option to edit it every time.
Users are confused by the app's terminology, preferring "Pass" over "Season Ticket" and finding terms like "issue" and "renew" unclear. Make copy with terminology consistent with the daily users.
Users struggle to recognize input containers or search bars when they are depicted as a single line rather than a distinct field. Create proper boxes as input containers and buttons to help users locate and click on the hitbox.
Payment Flows
The payment process is cumbersome, often requiring users to cycle through three redundant screens to complete a transaction. Redesign the flows to be compact while complete so it reduces user frustration
Users face confusion on payment method selection screens, often seeing multiple, visually similar options that lead to the same next step. Make a distinct list of all the payment methods without redundancy.
Payment gateways are not well integrated; there is no option to save card or UPI information, requiring users to re-enter details if they navigate back. Design a well integrated payment flow that is straightforward and fast, that saves preferred payment methods and payment information if possible.
The R-wallet being the default payment option adds friction and an extra step to the booking process, especially if the wallet is empty. The app does not remember preferred payment methods. Allow the users to use whatever payment options they want and make them default if that's what the users use the most.
The initial payment option screen for R-wallet recharge looks unfamiliar and presents two vague options that confuse users. Redesign the payment wallet flow to look familiar to the booking flows to eliminate confusion.
Payment options for recharging the R-wallet are limited (e.g., only Mobikwik and Paytm were visible to one user), which can deter users of other payment methods. List all of the supported payment methods so that users know that every payment method they might have is supported.
R-Wallet Usability
The R-wallet main screen lacks visual hierarchy, and two of its four options are redundant. Redesign the screen to promote quickness and structure and merge the redundant options.
Users are confused by the similarity between "recharge history" and "passbook," suggesting they could be merged.
A "current balance" button serves no purpose as the balance is already displayed by default. Eliminate the current balance button as the balance is visible by default.
The recharge screen has a bright orange background that competes with content, an unconventional CTA shape, and an inconveniently placed/unclear back button. Create a familiar looking CTA on a page that has proper contrast so it is readable and accessible.
The minimum recharge amount is not prominently displayed, and additional instructions are difficult to grasp. Redesign the information part to make it scannable and readable.
The payment option screen appears corporate and bank-like, not consumer-friendly, with small CTAs and excessive text. Create a screen that looks user friendly so that the users are not intimidated by the corporate appearance.
Help & Support
The help section is difficult to locate, being isolated as a floating action button in the bottom right corner of the main screen. Change the placement of the help section to a more logical place like under profile so the users can reach it easily whenever needed.
Users struggle to find answers in the FAQ section, expressing reluctance to scroll through long lists of questions. A search bar is suggested to improve usability. Add a search bar and some pre filled prompt pills for popular search queries such as ‘refunds’ or ‘monthly pass’ etc. to save time.
The app lacks native chat or call support, redirecting users to external links, which adds friction to the process. Integrate native chat, email and call options so that the users do not have to dial the number or open the email app separately.
Users found certain sections of the help page not working or were unable to navigate it effectively. Create clearly structured pages that are sectioned well that help users find what they need instead of confusing them further.
The font size in the help section is too small, posing a readability issue for users with visual impairments. Apply proper type hierarchy in accordance with the accessibility standards that allow all kinds of users to read the screens without any issues.
General UI/UX
The app appears visually unappealing, and fonts are unreadable in certain areas. Create a visually appealing and inviting design that does not feel clunky and cluttered and feels familiar to use.
Users are hesitant to click on elements they do not recognise, often opting for familiar, albeit incorrect, options (e.g., choosing "quick booking" which has limitations). Apply recognizable visual cues such as icons and proper labelling that educate and engage users on exactly what each option does.
The "quick booking" feature is limited as it only works for routes previously booked and does not allow users to change specifications. Integrate the quick booking section as a part of the main ticket booking flow to allow users to book their regular routes in one click while also giving them the complete flow if they need it.
User information like name, date of birth, and ID number should not be editable as these details remain constant. Combine all the personal information under the profile section that is only editable in that place.
There was an instance where a common route (Mira Road to Dadar) could not be booked without a clear reason. Provide users proper reasons as to why a certain feature is not working.