Chennai Metro Rail app redesign

UX | UI case study

Chennai metropolis has been growing rapidly and the traffic volume on the road has also been increasing enormously, which paved the way for Chennai Metro Rail System.

Currently, it covers 32 stations in 2 lines across the city. It has a daily ridership of 1,21,000 people.

While the Chennai Metro Rail system provides its users an hassle-free experience, the same cannot be said about their mobile app. So, we decided to put on our UX Designer hats and dive-in to have a look at the challenges faced by the users and did a complete redesign of the app to improve the end-user experience.

User research

The target users of this app are those

1. Who use the metro train service for daily commute
2. Who are 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.

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

Problems

We analysed the pain points that are frequently felt by the users and problems that can be solved through design and made this list.

1. No directions or route displayed in the app
2. No option to view previously searched routes
3. No option to search a station
4. Unable to view the balance of metro card
5. Functionality hierarchy in the app is cluttered
6. Not able to find the correct interchange stations

Goals

The first and foremost goal is to improve the user experience and to increase the user retention. In order to make this possible, we thought of breaking it down into smaller, scalable goals.

1. Easy way to view routes between different metro stations🚈
2. Allow users to view their previous searches🔍
3. Minimise the number of taps to complete an objective👆🏻
4. Organise the features in the app to increase usability📈
5. To enhance the overall user experience of the app✨

User flows

Presented below is the flow chart that explains the user flow through various actions and screens. We’ve tried to minimize the number of taps needed by a user to accomplish a task.

Wireframes

Using the flowchart, we built the structure for the app as a lo-fi wireframe and mapped them accordingly to the define the user experience.

Moodboard

With the crux of the app being defined, we collected some inspiring shots to setup an inspiring moodboard for the user interface of this app.

Final design

Using all these research and analysis, it’s time to design the app’s interface to make it look aesthetically pleasing and solves users pain-points at the same time.

Final prototype

We used Figma to design the wireframes and the final interface. For the interactions and screen transitions, we used a tool called Principle.

Thank you for reading! This redesign was conceptualised, designed and written by Aarthi and me. We hope you enjoyed this case study. If you have any feedback, we’d like to hear from you🤞🏻

PS.: This design is not affiliated with CMRL. As a regular commuter using Metro and as designers, we thought of enhancing the user experience and making this app much more useful. We had much fun completing this project and learned a lot of new things.