Train capacity indicator — a UX case study

Overview

This design challenge is an excuse to dip my feet into the prototyping for Augmented Reality (AR). With that, I also want to solve a problem that I and many other commuters face on a daily basis: Rush-hour stress levels and delays caused by overcrowding.

Problem

Congestion on the subway network during rush hours is worsened by uneven distribution of passengers across the train. Passengers take more time to exit or enter, doors are being blocked from closing, bottlenecks form in the passages, preventing a fluid transfer of people, etc.. This is mainly due to a station layout and a platform configuration. Especially on stations used by tourists and newcomers to transfer, where unfamiliarity with the system creates a tendency for crowds to gather around the nearest arrival board or a network diagram.

Goal

Design a solution that will indicate in real-time how crowded each part on the incoming train is, enabling a more equal distribution of passengers. Use AR as a primary user interface for the sake of the challenge.

Existing Solution Analysis

British blogger Dan Taylor made a physical indicator that displays how busy each train on the line is:

Dan Taylor’s physical monitor solution.

In his mockup, the indicator is fixed into the wall opposite of the platform. One problem I can imagine is passengers making a brief stop in order to discern the information before proceeding to the desired part of the platform. This can create a potential hot-spot for crowds to form, turning that part of the platform into a bottleneck.

Another concept was made by the design house Ahsayane Studio. Train arrival clock with bulbs that indicate how busy the particular car is:

Ahsayane Studio’s clock.

This solution has some similar limitations to Dan Taylor’s indicator, with the addition of not offering an overview of the whole train. The indication is also a bit confusing to understand if you’re not familiar with the concept. It could also make a time illegible from a distance.

In general, having a physical indicator on the stations can be problematic as is potentially adding to the problem instead of solving one.

City Mapper app has a great feature called “Where to Get On the Train”:

City Mapper’s best section indicator.

This feature will let you know which section of a train is the best to enter. The version available at the time of me writing this article relies solely on crowdsourced data which is not as reliable as the real-time data. It is definitely a promising feature. However, I want to be more precise for our end-user.

User Research

Going in to this challenge I had a couple of assumptions that I needed to validate. I made a short survey using Google Forms that I sent around, receiving 34 responses.

Using AR on the station can make you feel uncomfortable.

A rather large issue that I see by using AR in public spaces is inevitable pointing of a camera towards people. Unlike landmarks or tourist attractions where photography is normal, a place such as a subway station would make it atypical. This can, in turn, make AR uncomfortable to use and people around you annoyed as they perceive it as becoming a subject of your photos. I wanted to ask a question that wouldn't bias our participants who never used AR before.

Survey question:

How comfortable are you taking photos with your phone in a crowded space that isn’t a location where people usually take photos?

Survey question:

How annoyed are you if people point phone at you as if they are taking photo of something behind you in a crowded space where people usually don't take photos?

Conclusion

It is clear that AR-only interface will discourage a great segment of our potential users from adopting our app.

Most of the regular commuters have a preferable spot on the platform.

This might be largely due to the use of a specific exit at their destination. Some commuters might also be familiar with the pattern and choose to wait on a spot where a train will be emptier.

Survey question:

Do you have a preferable spot in a subway platform where you wait for a train? If yes, can you elaborate why?

Some of those who answered “Yes” gave the following reasons why:

Either end of train where likely less people will enter.

The least congested place.

Near the exit that makes the shortest route to the final destination.

Front or Back — depends on the Arrival Station.

Spot where I am closest to my next connection or work.

To walk less upon arrival on destination station.

Conclusion

70% of the participants have no preferences for a waiting spot at the platform. This is a large chunk of the passengers that might be open to adopt new patterns using our app, improving a distribution of passenger volume.

Proto-personas

I based these porto-personas on the profiles of regular commuters that I interviewed:

Concept

Collecting data

Getting a real-time data of how crowded train cars are is possible by installing IR or weight sensors in train cars. Knowing a platform layout and the train configuration, we can narrow down the exact location of each train car as it stops at the station. With smartphone beacons and proximity detection, we can have a precise position of our user on a platform. With this we can equip the network with the necessary sensory package without invasive infrastructure changes.

Projecting data

With a color code, we can indicate how busy each train car is. We can then project that color in a shape of a zone on a platform floor where users can stand and wait for the train. As an alternative to the AR view, we can have a simple station layout map with zones positioned where train cars stop and our user as a blue dot, similar to Google Maps indicator.

Wireframe

I would like to project color-coded zones, which will indicate how busy train is, on to the platform edge.

1. Color-code legend.
2. Zones projected on the platform edge where train cars stop.
3. Change location / Map View buttons

User Scenarios

Juliane

First time user, going home from work.

Motivation
Want’s to read a book comfortably on her commute back home to wind down from work.

1. On-boarding
   Opens the app for the first time and waits through the launch screen until she sees the onboarding, explaining to her how the indicator works.
2. Confirm Location
   Approves the use of the iBeacon API, and waits for auto-location to finalize. Confirms that she’s located at the correct station and a train platform.
3. AR View
   Makes a quick scan of the platform through the AR view when she notices a green zone in the distance. Feels uncomfortable pointing her phone towards the crowd, so she decides to use Map View to locate, with precision, where that green zone is.
4. Map View
   Determines that a green zone is located in the middle of a platform next to the newspaper kiosk. Switches the phone off and walks towards that location on the platform.

Marcus

Return user, going home from gym.

Motivation
Achille tendon pain and guitar tutorial video to watch.

1. Confirm Location
   Opens the app and waits through the launch screen until he gets ask to confirm his location. Waits for auto-location to finalize. The station is correct but the train platform selected is for the U2 line instead of U8 where he is.
2. Change Location
   Skips the preselected station which is Alexander Platz and selects U8 from the lists of available lines. Confirms the new location.
3. AR View
   Looks at the platform and sees that he is standing in a green zone. Switches off the phone and waits for the train.

User Flow

New User

Mandatory first time on-boarding when you lunch the app.

Return User

location validation when you lunch the app. On-boarding still accessible in AR/Map view.

Prototype

I always preferred creating prototypes that are as close as possible to the reality rather than easy low-fi choice. So instead of making a paper or a static Invision prototype, I used my experience of 3D modeling and HTML to create something that will emulate the AR environment.

I modeled a station layout with platform elements, trains, and the crowd. I used low-poly geometry and simple material with cell shader output on a spherical projection. It took me approximately three hours to create the complete scene — justifiable amount of time invested for this kind of prototype in my opinion.

3D composition

Final spherical map render

I made a simple HTML scene using A-Frame framework where I applied the spherical projected image of the station into the live 3D environment. A-Frame framework uses the phone’s gyroscope to orient around the scene. I rendered a separate layer with color zones and added a virtual arrival board as an opportunity feature, superimposing it on to the station layout. The final composition is an AR wireframe that emulates a users point of view from standing on a platform.

With basic UI for navigation this is the working prototype on a iPhone 8+ Safari:

Screen recording of a live browser prototype.

The rest of the prototype screens.

Usability Test

I conducted 7 usability tests using two scenarios both happening at Alexander Platz station on a U2 U-Bahn platform. Every user was informed that this is a wireframe that emulates AR.

In the first scenario, our subject is standing on the far end of the platform where the south entrance is, taking a train bound for Ruhleben. This is where I wanted to test how perceptible the green zone is from a distance:

In the second scenario, our subject stands in the middle of the platform. Here is where I wanted to see how the subject perceives the zones in 360 degrees:

Findings

4 out of 7 users were initially confused about the zones in the AR view. Some thought that they indicate how busy that part of the platform is. I suspect this is mainly because I didn’t include the on-boarding into the prototype as all of the users fully understand the concept in the second scenario. All of the users preferred the Map View instead of AR view(eventhough they found it enjoyable using it).

Here are some other comments:

I like that there is an AR version of arrival board beside the zones.

It would be cool to see where to exit the station to get the connection on another line ( as a tourist).

Zones could be projected on the train tracks instead of the platform.

I wonder how it would work on the Tokyo network during peak hours where every inch of the train is packed.

In general, users liked the concept and would imagine seeing it integrated into larger apps such as Google Maps with additional use cases. AR wireframe emulated the reality good enough so users could focus on information instead on how the interface works.

User Interface

To conclude this little project, I made a UI that would represent the look & feel of the final app:

Thank you for reading.