Redesigning the M-Indicator app — a UX/UI case study
M-Indicator is no.1 Pune & Mumbai Local Train Timetable.
Note: This is not done by official M-Indicator team, This is just a concept I made for there UX/UI hackathon.
Design Process
Problem
The M-Indicator app, for a first time user it becomes confusing to use the app as a lot of people don’t know which train or bus to take for their final destination. So they have to switch between apps in order to know their route. Still, a lot of people use it for offline Timetable for railways.
Because of that a lot of people still, use google maps than M-Indicator
Goal
- Stop the switch between apps.
- Providing easy navigation between travel information
Topic Research
I researched the travel habits of office and young people through local transportation.
How do people check train travel information currently in India?
- Google Maps
- Mumbai Local Train Timetable
- Other online travel service portals
SCOPE
User: People aging 20–40 years old are tech savvy and use google maps to travel in their daily routine.
Market: Working population in Mumbai.
Potential Users Interviews
I have selected young and office people as the users, who travel frequently don't have time to check two apps and want easy access to information. I chose this category of people to understand the pain points and their challenges.
- I conducted initial field research.
- I sent the survey report.
Key Quotes directly from user:
“I use google maps as I get the exact start and end point for my travel.”
“Its difficult sometimes as google maps doesnt tell the train timings”
“M-Indicator is only good to see when the train is coming”
“I have to swtich between google maps and M-Indicator to know my entire travel route.”
“M-Indicator is a little confusing to use.”
Design Principles
After my research and user interviews, I have come up with a set of design principles to admit while designing. I want to maintain the direct relationship between the interview result and my UI design.
1. Simple
The intact background of this app is simple to use. The users need not learn a new pattern.
2. Easy of use
The design should be beneficial and accessible to the user. There should be no insignificant disturbances for their search in travel routes.
Ideation + Validation
- I came up with 3 concepts to solve the problem for the initial phase.
- I tested my idea with my fellow friends and my working colleagues.
- I inquired my 1 test groups to vote for the best idea out of the three.
User flow
Wireframe
Based on the feedback, I designed the wireframe for the train section of the app.
Prototype
Two Modes of App
After our brainstorming section with storyboarding, I came up with two modes.
- Normal Mode: Enter your travel location and then search for the route and timetable of the train
- Navigation mode: In this, the user enters the location and then it automatically shows the user to their final destination with all the details
Marvel app link for the app to test
Conclusion
Based on the interviews with participants it seems they are looking for an app that makes them less switch and doesn't consume much of their time to find out which route to take or which train to take. Their main goal is to go from point A to point B
What could I have done better?
- Research about the features and results of competitors.
- Select participants from different areas.
- Usability test of the prototype with users.
- Time to make more changes to the flow.
Result
This project gives me an understanding that how difficult it is to introduce a small new feature into an app that is being used by so many people.
My rank was 11th on this Hackathon out of 202 designers which submitted their designs for the app.
Before you go
👏 50 Clap if you enjoyed this article, this will tell me to write more of it!
🤔 Comment if you have feedback for me
