Designing The Namma Metro Application | Case Study

Hrishikeshck21
5 min readSep 22, 2020

Imagine you are new to Bangalore but you are staying outside Bangalore :), Yelehanka and your office is in Indira Nagar. Your daily commute will be more than 40KM. So you use the cheapest and fastest means of transport in Bangalore, Namma Metro. But to reach the metro station from your home and station to your office takes around 10 minutes, with this money you can’t afford a new room. So, sometimes you miss the train by staying in the long queue for taking a ticket. You wish there was an app by which you can book the ticket online and get tokens from the station or take a monthly/daily pass so that you can renew it online itself.

This was the problem I had when I first moved to Bangalore, I immediately downloaded some apps from the play store which does not Provide any service I needed at that time. Then I downloaded another app from their official website, which helped me during that time, however, I was not satisfied with the experience I had with that app.

So, I decided to put on my UX Designer hat and dive in, to have a look at the challenges faced by other users like me and did a complete design of the app to improve the End-user experience.

About Namma Metro

Bangalore Metro Rail Corporation Limited (BMRCL), a joint venture of the Government of India and the Government of Karnataka is a Special Purpose Vehicle entrusted with the responsibility of implementation of the Bangalore Metro Rail Project.

The project has an East-West corridor — 18.10 km long, starting from Baiyappanahalli in the East and terminating at Mysore Road terminal in the West and a 24.20 km North-South corridor commencing at Nagasandra in the North and terminating at Puttenahalli in the South.

The Problem

Currently Bangalore Metro doesn't have an official Application in Playstore yet. it's downloadable from the official namma metro website but it's outdated.

The Applications in the play store are by freelance developers, some of them have bad user experience, and some lacks features.

The Solution

Need an Application which meets end-user requirements and provides necessary features, also giving them an easy and usable experience

User Research

The target users for this app are those

1. Who uses the metro train service for the daily commute
2. Who is in the city as a tourist

The app is used by people of all ages. So the UI needs to be easy, intuitive, and less confusing about the information users are looking for.

I analyzed the reviews and feedback given by the actual users of the app in Google Playstore and Apple Appstore. Below are some of the challenges faced by users.

Reviews From Playstore and Appstore

I ran a survey to find out what makes people use the Namma Metro App. People were asked to rate some features on a scale of 1 to 5. The survey received about 30 responses from people of all ages, including people who are not residents of Bangalore. Given below is a representation of the results.

Challenges

With the received feedback on the current app and inputs from the survey, i defined the challenges faced by the users

1. Quick ticket booking, instead of staying in que to book

2. Can’t see previously searched routes

3. Not able to figure out the interchange stations, false interchange stations suggested

4. Recharge metro cards

Goals

1. Make it easy for people to view routes between different metro stations

2. Suggest alternate routes if present between different stations

3. View all the stations

4. Make use of research data to do a complete UI overhaul.

Information Architecture

Presented below is the flow chart that explains the user flow through various actions and screens.

User flow of the main App services

WireFrames

Wireframes are the skeleton of a UI, Before working on the high-fidelity prototypes, I sketched the app interfaces with the research data( sorry for bad drawing..XD).

Visual Design

The main pain point of the user is to find the trains between 2 stations quickly, so I have made the feature prominent on the home screen. The rest of the options are placed in order of visual hierarchy to make it easier for the users to go through and quickly find what they’re looking for

All Screens of the Application

This is not an official work done for BMRCL, As a UX Designer I found it as a problem during my daily commute, that was the reason behind this case study.

View the full case study on my Behance: Namma Metro

Thanks for reading!. This is my First Article, hence there will be a lot of flaws, even grammar mistakes. Do clap and support if you liked this writeup, it encourages me a lot. Feedbacks are very much appreciated which I can improve in future designs/articles. If you want to collaborate, talk about product design, give some suggestions, or just want to say hello, hit me up at hrishikeshck21@gmail.com or connect via Linkedin

--

--