Cover Picture

What is m-indicator?

m-Indicator is an award-winning Public Transport App in India providing live train tracking of Mumbai Locals. It also helps track the Indian Railways timetable. I will share the interface of the m-indicator app here and the problems I faced while traveling, which gave me the idea to use the new upcoming feature of iOS 16.

How the flow to find the local train work?

Once you open the app, Select Local → Enter the current station you are at → Select the track where your destination lies → Select the train you want to onboard.

m-indicator flow

Android phones have an option of To → destination after we select the current station. I would love to know why that is not the case with iPhones.

Android — To destination feature

What are live activities and Dynamic island?

When I started the case study, I had a question. Was this even a problem to work on or even a feature that the m-indicator needed? Luckily Apple released its guidelines for live activities and answered my question.

“A Live Activity displays up-to-date information from your app, allowing people to view the progress of events or tasks at a glance.”

Live Activities help people keep track of tasks and events that they care about, offering persistent locations for displaying information that updates frequently. For example, a food delivery app could display the time remaining until a food order arrives, or a sports app can display the score for an ongoing game.

m-indicator can surely use these features.

Why is there a need for these features in the m-indicator app?

Even when the idea got validated, a question still loomed. What was the need for this feature for the users?

In the past few months, I traveled to different parts of Mumbai. To visit all these cities, I had to use the lifeline of Mumbai, the local trains. Coming from a state where such a system does not exist, it can get overwhelming. One needs guidance to understand it. For me, it came from using m-indicator.

Once you get into the local, if you get a seat, you are lucky. If you don’t, I hope you have strong legs & patience to stand for a couple of hours.

Now, my problem wasn’t standing for an hour. It was tracking the next station/current station. I am aware digital boards are showing the next, current, and last stations. There are audio announcements at regular intervals as well.

But if you see the image below, one can hardly see the boards with that crazy crowd. I also had to spend 1–2 hours on the train, meaning I had to pass time listening to some music.

Mumbai local

I observed one thing. Irregular travelers continuously keep tracking the m-indicator app to know the train status. I was doing the same because of the ongoing questions in my mind. How will I be able to get off the train at my destination? When should I move near the door? Will I miss my station?

After some time, it was irritating because how long would one keep doing this? During this time, one also switches between different apps. If you close the app by mistake, you have lost track of the train you boarded.

m-indicator train route and status

Live activities

Here comes my solution to introduce live activity widget for the m-indicator app.

If you use the m-indicator app on an android phone, you can volunteer and share your location if you are inside the train. You have to enter your destination. It shares the exact location of the train with other users.

Refer to the screenshot below for a better understanding.

Are you inside this train?

Give people control over beginning and ending Live Activities.

M-indicator needs to introduce this component in their iPhone app with a tweak. The user will be asked, “Do you want to track this train?” Then select your destination and let the magic begin.

Track this train

So once the tracking is on, users can minimize the app and lock their phones. With the use of live activities, the train status will be shown. Check out the prototype below.

Live activity prototype

I tested these prototypes with my friends, who are daily commuters in Mumbai locals. Here are their responses

User testing

How did I decide to show the information on the widget?

I went through a few articles to understand how the live activities work and how to design the widget. Below are the links to articles and resources I referred to create the design.

Iterations for live activity

The rejected iterations are below. Let’s go through each of them to see why I left them.

I rejected the first one because glassmorphism looked weird. There wasn’t enough contrast which could cause a reading issue.

The second one was rejected because of the brand colors. I didn’t want the widget to look different from the app’s current colors.

The third one did not have the information shown on the final card. I felt something was missing. The traveler or final destination wasn’t giving complete information. I realized the train name has the final destination included in its name. The destination information felt redundant.

Live activity widget iterations

Final iteration and the information to be shown on the live activity widget

After considering all these aspects, I designed the final iteration.

Live activity information

1. Train name — This serves two purposes. One gives the train name and whether it is a fast or a slow train—secondly, the starting and last station on the route.
2. Current status of the train — What will be the next station, its arrival time, or what is its current station?
3. Arrival time, platform number, and side — The arrival time at each station, and the platform no. are crucial if you are to catch the train. It is vital to mention the platform side in advance as it helps the traveler know which side of the train he needs to stand on (however, there is a chance of a local train stopping on a different platform).
4. Visual representation — To get an idea of how far my destination still is.
5. Logo — For branding purposes.

Final Screens

Live activity final screens

Dynamic Island

If I don’t design this feature, will I even be called a product designer???

Just kidding! As Apple states in its guidelines, to ensure that your Live Activity works well on all devices that can support it — and in all system-determined presentations — you need to support all three presentation types for the Dynamic Island, in addition to the Lock Screen presentation.

Dynamic Island prototype

Designing the card wasn’t difficult, as I knew what information I wanted to show.

However, I didn’t want Dynamic Island to be the same as the Live Activity widget. This is how my first iteration looked.

Dynamic Island iterations

As per Apple guidelines, on devices that support Dynamic Island, the system displays Live Activities in a persistent location around the TrueDepth camera.

When displaying your Live Activity in the Dynamic Island, the system uses one of the following three presentations:

1. Compact
2. Minimal
3. Expanded

Let us go through the Compact and Expanded views. I decided to skip the minimal view because it gets used when multiple Live Activities are active. The system uses a minimal circular presentation to display two of them in Dynamic Island.

1. Compact: The compact presentation is composed of two separate presentations: one is displayed on the leading side of the TrueDepth camera, and the other is displayed on the trailing side. Although the leading and trailing presentations are separate views, they form a cohesive view in Dynamic Island, representing a single piece of information from your app. People can tap a compact Live Activity to open the app and get more details about the event or task.
2. Expanded view: When people touch and hold a Live Activity in a compact or minimal presentation, the system displays the content in an expanded presentation.

Dynamic Island final iteration

How can we measure the success of these feature inclusion?

1. Total number of times users are using this feature daily
2. The number of unique and infrequent ios users who are using the feature
3. The percentage of your total ios active users who are using the feature
4. Analyze the impact of the new feature on retention

Complete Prototype with Live Activity and Dynamic Island

Complete prototype

1. Working on this mini case study was to try and complete this in 1 week(10–20 hours) because when you work in a startup, most of the time, there are requirements to design a feature with a 1–2 week deadline.
2. This problem statement was ongoing in my mind from the day Live Activity and Dynamic Island were showcased at the Apple event.
3. I have a lot of problem statements to work on, but I was procrastinating doing a full-fledged case study. Hence I decided to start with a mini-case study(small baby steps).

That is about it!

I hope your journey on Mumbai’s local trains is exciting and safe. If you wish to discuss this case study or other design-related topics, feel free to reach out to me on any social media platform. I would be more than happy to chat with you. I am always open to conversations about F1, movies/series, and sports too.

Thanks, Nachiket Dandekar and Smit Patel for proof-reading my case-study.

Folks if you are interested to start your career as a product designer please check out 10kdesigners.

Did you know?

You can give up to 50 Claps for an article. Try it out 🙂

My Socials

Twitter | Instagram | LinkedIn | Dribbble