Simplifying commuter experience for Mumbai’s local and metro trains—a product design case study 🚃
In this self initiated case study, I will take you through the design of a mobile app—EasyTransit that enables users to plan efficient journeys and book tickets/passes for local and metro trains in Mumbai.
Role
Product designer
Collaborators
Just me
Timeline
5 months
Mumbai has one of the best public transportation systems in the world. It’s local train network is considered the lifeline of the city—it is convenient, fast and economical.
I have been staying in Mumbai for a while now and have been exploring the city by local trains which is indeed a unique experience. I have had my fair share of experiences of missing a train, getting on the wrong one and running to catch a train (🏃🏻♀️although that is not recommended). During these commutes, I met a lot of interesting people and learned about their train journey experiences.
The local train system consists of four main lines: the Western Line, the Central Line, the Harbour Line and the Trans-Harbour Line.
These four main lines together run a total of over 700 trains and serve more than 85 lakh commuters daily!
The trains connect various areas of the city and suburbs, making it a crucial mode of transportation for the citizens. It has multiple terminus stations, which can make navigating the system a challenge for the users.
Apart from the local train network, currently, there is a metro train network in some parts of the city. By 2026, 10 more metro lines will be added to this network, making travel more convenient for commuters.
A graphical representation of the network- Illustration by Jaikishan Patel
The problem
While Mumbaikars lead a fast-paced life when it comes to traveling in and around the city, taking a local/metro train journey includes—juggling through various apps, taking multiple decisions and performing a range of tasks.
Diving Deeper-
Let’s understand the problem better with an example-
Sejal is at her home in Bandra and wants to meet her friends at a newly opened cafe “Costa coffee” in Dadar. In order to reach this place-
In order to reach this place-
Sejal needs to use Google Maps to determine the location of the cafe. She must then identify which local or metro station is closest to the cafe. Then, she must evaluate the proximity of that train station to her home and check for the closest one.
After understanding the location of the stations and modes of transport, she has to check the train schedule either on Google maps or on M-indicator app.
She can check the ticket fares on M-indicator or UTS app.
After gathering all this information, she must compare and determine the most practical route for her.
In order to buy tickets, she has to use UTS app for online booking or she can buy the tickets offline from the station.
It is challenging for the users to keep track of all the various data points (time, distance, fare) and make a decision.
Every time the user is in a new location or has to visit a new location, these problems will repeat. Therefore, it is crucial to consider design solutions to simplify the process.
Getting to know the users—
People who frequently use metro/local trains for commuting and are looking for a more convenient and efficient way to plan and book their journey. Generally, the journeys fall under two scenarios-
👉 Travelling on known routes-
Individuals traveling on known routes, such as commuting to work or school, have a set schedule and know their mode of transport (local or metro) very well. They are familiar with their boarding and destination stations.
They aim to board the same train daily and want to stay updated with any delays in the train timings.
Many of them own a daily pass and are well-versed with the journey. Tracking the expiration date of a physical pass is crucial for them as it ensures that the pass can be utilized completely for the intended period of time.
👉 Travelling on unknown/new routes-
Individuals traveling to new places out of their routine travel- to meet friends, go for leisure trips, visit or explore a particular place, etc.
They are interested in finding all the possible journey options and determining the appropriate boarding and destination stations.
They will look for train schedules, the duration of the journey and ticket prices with the goal of saving time and money.
In the current situation, the user encounters many obstacles and difficulties, making the experience less smooth. The goal is to have all the necessary functionalities and features to make it easy for the user to get to their destination quickly and efficiently. Here’s where EasyTransit comes into picture-
EasyTransit—a mobile app that aims to make train commuting more convenient for users. The app recommends a suitable mode of commute between local and metro, the most optimal route and enables users to purchase tickets/passes for their journeys. 🙌
Design process
I began by identifying issues in the user journey through my own experiences of traveling on local trains and by gathering feedback from other commuters. This helped me to understand the different edge cases and scenarios of the journey.
Additionally, I studied various patterns and best UX practices for specific elements such as search bar states, location permission prompts, and first-time user screens, etc.
I continually revised the user flows to account for all possible situations. In the process, I realized that a key feature of the app could be providing route recommendations and comparisons.
After multiple rounds of revisions and incorporating feedback, I was able to put together the following design solution.
Onboarding flow-
Onboarding flow
In order to accommodate people from all backgrounds that come to Mumbai, the app allows selecting a language right at the beginning. The user needs to log in or sign up by entering their phone number to start using the app.
Location permission
By granting location permission, the app can access the user’s current location and provide personalized recommendations based on it. Once the location is defined, the user lands on the home screen and can start planning the journey.
Homescreen
Interactions on homescreen
The top section of the home screen acts as a prompt to start the ticket booking journey. The middle section shows bookings of local and metro trains. The last section is a prompt for the pass booking flow.
Ticket booking flow
There needs to be a streamlined train ticket booking flow, to quickly find and book tickets.
Step 1: Input destination
In any case, the user knows two things for sure-
1. The start point (or the current location)
2. The destination
User's journey from current location to his destination
In apps like M-indicator and UTS, the user has to put the specific name of the boarding station and destination station. But the user might not always be aware of the route that needs to be taken.
To start the ticket booking flow, the only input needed from the user is the destination. In EasyTransit, the user can directly put the destination she wants to reach in the input field (be it a cafe/theatre/museum or a particular station name) and need not put the exact station names.
Destination field on home screen with animated prompts
The user can search for a specific place name or a local/metro station name.
Flow for selecting a specific local/metro station
In case the user is sure of the boarding station and destination station, she can directly put the station names in the input field.
Step 2: Selecting the mode of commute
Choosing between options—local trains and metro trains can be challenging because both types of trains have their own advantages and disadvantages, and the choice between them can depend on factors such as cost, comfort, frequency, and route. The users often have to weigh these factors by checking multiple apps to make an informed decision.
The user knows the destination and wants to compare all the available options to make a rational decision. To help the user solve this problem, the app provides route options to the user based on the start point and destination.
Solution
In the first scenario there are two ways user can reach Costa coffee, Dadar (W). She can choose to either take the local train or a metro train. She gets a clear comparison of all the variables.
In the second scenario, the user knows the station name she has to reach. So the app shows only the relevant option with which the user can proceed.
Flow for comparing and selecting the relevant route
The comparison of time taken to reach the train station by foot is provided to assist the user in determining if they are able to walk for that duration. If they feel they are unable to walk for the specified time, they can take a cab or auto to save time.
Recommendation cards
Additionally, users can also compare the prices of the tickets. This can be particularly useful for those who are trying to stick to a budget.
Interactions on maps
Having a map that displays the local train and metro train routes, enables users to easily visualize the different choices they have and make a decision with more clarity.
Let's take another example-
This time Sejal is at Marine Drive and has to reach Thane.
There are two options- either she can catch a direct train from CSMT (3.5 kms away) or take a train from Charni Road station (600m away) and change trains at Dadar.
Recommendation cards
Providing comparison cards with all the necessary data points such as time, cost, and route options, solves the problem of having to check multiple sources/apps.
Step 3: Selecting the tickets
Selecting journey type and tickets
The user has the option to choose between a single or return journey, which are the main categories displayed on the screen. The cost of the ticket will vary depending on the type of journey selected.
In addition, the user has to select the class and number of adult/child tickets. After this, the user can proceed to make the payment.
Step 4: Make payment
The user has the option to select a preferred payment method or choose from the other options available. The summary of the selection of tickets and journey can be seen at the bottom in case the user wants to verify before making the payment.
Once the payment is complete, a success screen will appear displaying the ticket and train details.
Thus, the app provides a convenient way for the user to book their metro/local train ticket, eliminating the need to use multiple apps or other booking methods.
Back to home screen
The journeys will reflect on the home screen in form of summary cards.
The main tabs are divided on basis of the mode of transport (local/metro) and not based on the type of booking (ticket/pass). There are 2 reasons for this-
The location of a metro station and a local station is not the same. So the physical context in which a local train ticket and a metro train ticket will be used is not going to be the same.
The physical context for using a local ticket and a local pass is the same.
While a user is checking for the booked journeys, it’s easier to check under the specific mode of transport depending on the physical context the user is present in.
Train schedules
The local trains have frequent delays, due to a variety of factors such as signaling issues, power failures, and overcrowding. This causes inconvenience to commuters and affects their travel plans.
A user wants to know about the delays and updates of the new timings to avoid any inconvenience at the last moment.
Solution
The status of the train (on time, delayed or canceled) is shown on the cards. If a train is delayed, the delayed time is shown in red colour along with the original time.
This card also shows the platform on which the train will be arriving. Knowing the platform number in advance can save the users time and effort in finding the right train, especially in larger stations where multiple trains may be arriving and departing at the same time.
An extension to this use case is the live tracking feature. I will explain the live tracking of trains and getting notifications updates in the later part of this article.
Pass booking
A user will buy a pass if she frequently has to use the same route. The user has already traveled on this route and knows the route and mode of transport well. Hence while booking a pass, the app asks the user to select the specific mode of transport as the first step.
Pass booking flow
This is followed by selecting the specific stations for which the user wants to book the pass. The user can select the duration of the pass and proceed to make payment. The summary of passes will be seen on the home screen in the summary section under local/ metro tabs for quick access.
Bookings tab
Users can view all the booked tickets and passes in this tab. Granular details like amount, date of purchase, journey type, accessible stations, etc can be viewed on the details page. Users can also check the booking history and its details.
Live tracking
Live tracking a train can induce a sense of trust among the users and lower the fear of missing a train. It will help the users in multiple ways-
Commuters can access information about trains anytime, anywhere via EasyTransit, without having to rely on traditional sources of information such as timetables or announcements at the station.
It will help the user to see the estimated time of arrival (ETA) of a train at the boarding station and the time it reaches the final destination.
The user will receive notifications if a train is delayed or is off schedule so that they can plan accordingly and avoid waiting at the station.
The live tracking feature can enable train operators to improve their operations in the future by providing them with real-time information. This will optimize their scheduling and maintenance as well.
Live tracking flow
To start with the live tracking flow, the user has to select from the booked journeys, or can track other trains by selecting stations.
Users frequently traveling on the same route, on the same train would want to get daily updates of the train. To solve this problem, the daily reminder feature will be helpful.
The user can customize the days she wants to get the updates. For example, if the user has to travel only on a few days of the week, she can set notifications for those specific days.
Push notifications for live tracking and other updates
Setting up notifications for live tracking updates
Thus by introducing the route recommendations and combining it with ticket/pass booking flow and live tracking, EasyTransit helps streamline the process at multiple stages providing users with a much more seamless experience.
Key takeaways-
I learned to build the design components using auto layout and components properties. I created a design system consisting of—typography, colors, shadows, buttons, an icon library, cards and other components. This helped me keep consistency and set up my pace through the exercise.
Snippet of Design System
Exploring multiple apps while designing EasyTransit helped me understand different interaction patterns and best UX practices. I was able to anticipate and design for potential issues that users might encounter.
There is no shortcut to creating good designs. The only way is to keep iterating until you reach something meaningful and good.
Snippet from my Figma file