Making it easy to commute in the Delhi metro - Case study

Himanshu Gupta
Bootcamp
Published in
13 min readSep 1, 2022

--

People often feel lost when riding the Delhi Metro. It’s challenging to
understand route information, locate and navigate the nearest metro
station, and find the appropriate platform and exits. Apps have attempted to address these issues, but not end to end.

I had observed how challenging it could be to use the metro for first-time
commuters. Or to go along a new route for regular commuters. I finally got a chance to work on this problem when I was given a take-home assignment that closely related to it

Navigating through Delhi metro with existing companion app is not easy, commuters have to spend significant time finding route the details.

WHOM ARE WE BUILDING FOR

For readers who haven’t experienced what commuting in the Delhi metro is like, you can get a brief through this good article. In short, some of the stats are like:

One of the personal goals I’ve set with this assignment/ project was not just to solve problems, but also to test them with users

1. WHAT PROBLEMS DO COMMUTERS FACE

I started off with research, and to get some first-hand insights, I contacted some of my friends from Delhi and also got in touch with a few commuters I found on Discord, Reddit and Quora and took their interviews over the call

The question was framed in a way to pick pain points at each stage of their journey (Clear version here)

From all the responses that I gathered, we can break down commuter’s problems into two categories:

A. FREQUENT PROBLEMS FROM AVAILABLE APPS:

To further explore pain points apart from the ones that I picked from interviews, I went through most downloaded companion apps (and took Uber for indirect competitor analysis)

We can sum up all the above-mentioned issues into some major categories:

B. FREQUENT PROBLEMS WHILE COMMUTING METRO:

Let’s understand how different sorts of commuters use the metro before I outline the issues that individuals encounter. There are two usual behaviours of how commuters use companion apps:

Common user flows while navigating the metro

It’s important to note that while travelling to unfamiliar stations, a regular commuter may have many of the same issues as a casual commuter.

Some of the issues that commuters have brought up that they have encountered while using the metro:

I also circulated surveys in groups to get feedback from commuters about their experience with the app, here’s a cute outcome of that

Clubbed stats from online surveys and interviews

We can develop personas for the types of commuters on the metro based on all the concerns I was able to learn about after talking to various commuters.

WHY NOT USE GOOGLE MAPS INSTEAD?

“But…Himanshu, we’ve google maps right? Why will I download new app just for this”

For those who might have this question, let me explain why super quick:

Just because you can buy guns on amazon doesn’t mean it’s the real deal. Now let's continue with the designing part.

3. PRIORITIZING THE SCOPE OF WORK

After research, I was able to come up with areas of opportunities that can be improved or created from scratch to help commuters.

Opportunities and scope for improvement

Considering what will offer the most value to commuters and how much dev effort it might take to build them, we have a list of things I’ll be trying to solve for V1

  • Reduce the time it takes to search for routes.
  • Using the metro map to trim down the time it takes to skim route details
  • Making it easy to search for station details
  • Card Recharge and Lost and found items flow is something I worked on as well, but not included in this case study to keep it short

WHAT ARE WE GOING TO BUILD?

A digital platform that functions in sync with the metro system. It should be an extension that simplifies things for commuters and offers all necessary features right away.

We will work on creating a platform that aids commuters by facilitating easy access to all the amenities of the present metro system and bringing features that people feel are lacking currently.

LOW-FIDELITY IDEATIONS

Before starting the design part I had some rough ideas in my mind already because of research so it didn’t take long to make initial designs.

1. SEARCHING FOR ROUTE

  • The most frequently used feature of any companion app is searching for routes between stations and browsing metro route maps.
  • I’ve gone ahead by prioritizing both of them when commuter launches the app, and other features that can assist them are just a few taps away.
The flow of searching for routes between metro stations

2. LOOKING FOR STATION DETAILS

  • Looking for station detail is another frequently used behaviour by commuters, I’ve tried to introduce the colour of the metro line passing through it to introduce some character while viewing details.
  • All the other less frequently used options are available on the hamburger menu.
Looking up station details

TESTING DESIGNS WITH COMMUTERS

I built a quick prototype on Maze, sent the link to metro commuters, and observed how they interacted with it and the issues they encountered.

1. PEOPLE DIDN’T PREFER A “JOURNEY BRIEF”

My goal while creating the journey brief was to cater to regular commuters, someone who usually just checks for commute time, fare and where they need to interchange, and they are good to travel (if it's a casual commuter, they can go into details).

Dropping journey brief from the route search flow
  • Observation: While they were using this flow it turned out that they preferred all the details in one go instead of going through any intermediate screen.

Reason: Commuters may be interested in any collection of data that they want to compare while looking for a route. For example~ Rate vs Time/ Time vs Number of stops/ Number of interchange vs Time, etc.

2. EVERYBODY PREFERS THE SHORTEST ROUTE?

Almost all the available companion apps offer at least two types of routes, one that is the shortest and another with the least interchange.

The shortest route makes obvious sense but I was curious about having the option of the route with the least interchange since no commuter picked up “least interchange” over “shortest route” in the interview

If all the commuters prefers shortest route then do we need to offer them other route options?🤔😕

  • Hypothesis: The option of the route with the least interchanges is used by people with special abilities or in cases where commuters prefer convenience over the hustle of switching lines.

Reason: Shorter routes require more metro line change by commuters, someone who is specially abled/ old aged/ tired would prefer convenience over commute time.
Supporting: I was not able to come across any specially abled commuters while researching, but stats reveal that the metro is used by almost 200k specially abled commuters.

I ultimately decided to keep the route with least interchange and also provide other available routes; as it will also help when some of the routes are closed due to any reason

Reasons such as technical difficulties, Maintainance or commuters searching for available routes after the shortest routes are closed.

DESIGNING THE EXPERIENCE

From the changes that were done after user testing, we have our final user flow

Final user flow (thanks to medium’s compression it’s pixelated, check out the clear version here)

1. SEARCHING FOR ROUTE

Removing the clutter, focusing on what commuters are here for.

  • The field for searching routes has been made more compact.
  • While searching for routes, time to commute and available routes are shown along with the results.
  • The map on the route brief shows a clear distinct tag if a commuter needs to change the metro line.

One of the pain points from existing companion apps is that commuters firstly need to use Google maps for finding the closest metro station to the destination, and then they feed the station name in the companion app to search for route.

As we will be using Google maps API, we can fetch the details of the closest metro station to any location/address they search for.

Small animation to inform commuters about the search possibilities

And to convey that commuters can search for any place, not just metro station names, I introduced affordance in form of a small animation

2. ROUTE DETAILS

Looking at routes doesn’t have to be so boring

  • These screenshots are of the most popular companion apps’ route details; they all show a monotonous linear line linking stops.
Viewing routes on existing companion apps

But on the other hand, what do the below two snips of google maps make you feel like?

With both of them, you’ve different feelings attached. One triggers anxiety but another feels pleasant because we’ve attached certain emotions to what these colours mean to us

Just like that I wanted tie commuters emotion to the routes commuters are travelling on, routes can have have their own characteristics, the colour of metro lines could be used in a better way to create a canvas that may hold memories.

Evolution of design

After iterations and iterations, I landed on something which felt like what I was aiming for. Drum rolls…ta dum

3A. CHECKING METRO STATION DETAILS

Some of the station detail a commuter usually looks up while going through station details are :

  • Upcoming metro timing
  • List stations are available on the same line
  • List of amenities
  • First and last metro timing
  • Station gates direction

One of the common user behaviour of commuters is to check the arrival time for next metro and list of stops on the route.

And while figuring out how can I show those lists of stops along with the upcoming metro timing is when I landed on a new problem; When there is just one metro line, it is simple to display the list of stations and the metro schedules.

A metro can have anywhere between 2–6 platforms

but in the case of junction where there could be up to 3 lines and 6 platforms, how do we show all those details?

Exploring designs for platform details

After going through countless iterations, I found something which seemed to like a smart layout to show the list of platforms by using colour codes.

Metro station detail with multiple lines

3B. METRO STATION WITH JUST ONE LINE

We are stacking both the platforms to make details accessible upfront

Metro station details which have a single metro line

4. OTHER SERVICES

All less frequently used actions are accessible from the hamburger menu.

I’ve turned the left overlay to the bottom modal for making options easily reachable

FINAL USER TESTING

I travelled between random stops, handed over prototypes to commuters and observed how they use them.

Giving prototypes to random commuters

There were a few things I noticed and also received some feedback from commuters which we will quickly fix.

1. EASILY REACHABLE MENU

  • Observation: Whenever I asked commuters to access the menu, I saw that they all had to extend their thumbs to reach the hamburger menu, which is located in the upper left corner.

Solution: Simply bought it down and clubbed it in an area where it’s easily accessible. Also introduced a shortcut to navigate to your nearest metro.

2. CHECKING FOR LAST METRO TIMING

  • Observation: While commuters search for the first and last metro time, afterwards they usually searched for a route to that station

Solution: To skip the process of going back and searching for that route again, I’ve given a shortcut to directly go to route details.

3. PLATFORM NUMBERS WERE CONFUSING

  • Observation: People were finding it hard to understand what those colourful numbers meant.

Solution: I provided a copy to simply state what these meant and made platform numbers look more like buttons where they can tap on

4. OPTIONS FOR MAP STYLE OF ROUTE

Interestingly, some commuters asked me where can I access the simple metro map route. Taking a step back introduced me to a part that I missed.

Following the route lines on the actual Delhi metro map might be hard because of their layout and shapes, hence DMRC has provided a simplified version of the map.

Introducing simplified map style into current designs

  • Observation: Some of the commuters asked “ where can I see that simple version of the map?” After talking to them I realized that they use both types of maps depending on the situation

Insight: Commuters use the actual map to get an idea about the real distance between points, and they use a simplified version to skim through the routes.
✅Solution: Provide a toggle on the map that commuters can use to switch between map style

EDGE CASES

Some real-life edge cases apart from no result search states.

1. STARTING JOURNEY LATE AT NIGHT

If a commuter is travelling late at night, we ease their trip by offering information that will help in better trip planning in the future.

2. LOOKING FOR ROUTES AFTER METRO IS CLOSED

When metro lines are closed, commuters don’t land on any dead ends. They can still browse through the routes to plan their subsequent journies with metro opening time being mentioned.

CONCLUSION

Improvements I was able to make through this project:

Survey report of 38 commuters • Avg time compared between new design v/s official DMRC + a top downloaded companion

DESIGN CONSTRAINTS

I dropped some of the features towards the end because it’s hard to implement at the moment, hence I ended up dropping them from V1.

1. LIVE CARD BALANCE IS NOT POSSIBLE (FOR NOW AT LEAST)

  • Commuters can’t check their metro card balance online, they need to be at the metro station and use dedicated AVM machines to check them.
  • This has been a real pain point for commuters and I wanted to introduce live card balance in-app, but it turns out that DMRC doesn’t provide this user data to 3rd party services.

2. LOCATION ASSIST HAD TO DROPPED

  • Assisting commuters by informing them about their live location route could easily fix issues of travellers missing the metro stops.
  • I dropped it towards the end because ~40% of Delhi metro is underground, so we can’t track their GPS location along the route.

THAT’S A WRAP🎊

That concludes this case study, ufff **take a sip of water**

ugh, more than s sip

Got any suggestions or feedback? feel free to reach out to me on Twitter or Linkedin.

FEW IMPROVEMENTS

  • We can add an “SOS” button to help commuters who travel at late night.
  • Further user testing can be done to check if commuters would prefer to have fare rates in the search results too.
  • More information and details about stations can be listed that can help specially-abled/ visually impaired people.
  • Introducing metro station floor plans/layouts can help commuters easily find exits, amenities, washrooms, etc

AND FEW LEARNINGS

  • Conducting usability testing: was surely something which was the highlight for me, approaching random commuters and handing over prototypes and then observing them was interesting.
  • Continuing to get better at framing the right questions for user interviews.
  • It’s better to use real/appropriate data while conducting user research because users are smart and can pick on details they think are not correct.

Since you’ve made it this far, don’t forget to drop claps if you liked this project, it would mean a lot 👏👏👏

( by the way, you can hold it👇 instead of pressing it continuously)

I’m currently open to full-time product designer role🌻, you can have a look at my portfolio on himmi.me and browse through some awesome works.

Building something interesting and looking for a problem solver? Get in touch

--

--