Updated 9/18/18

If you’re a New Yorker, you know that few things in the city are hotter targets of day-to-day derision than the MTA. The crown tomato of its mediocre service is the city’s century-old subway system — from overcrowding to poor on-time performance to dirty stations, the trains are tolerated by New Yorkers as the staple necessary evil.

In July of 2018, the MTA released a new app, MYmta, which provides users with public transit information, such as service status updates and arrival times, on the go. Needless to say, I was quite impressed with the clean and clear user experience provided by the app. (Given the MTA’s less-than-stellar digital offerings in the past, this was a hard one to screw up as far as is concerned.)

I use MYmta on a daily basis to check for service status changes and arrivals. While it’s useful in general, there is one particular task on the app that, over time, frustrated me more and more: finding arrival times for (and sometimes trains, but mostly ).

From the fires of that frustration, this was born. I begin by providing context for the app and the role it provides in a specific user scenario that I identify with. Then I highlight the issues of conducting this task in the app. I then propose redesigns that would improve the UX of the app for completing this task.

(Please share your thoughts, feedback, criticism, love, hopes, and dreams in the comments! I’m happily looking to improve at this craft.)

Background: NYC public transit UX stinks, but MYmta helps a lot

The MTA’s notoriously poor service efficiency has always been a pain point for New Yorkers, and it’s only getting worse. While I, with an unusually low standard for mercy, tend to cut the MTA some slack for its service, I do feel for my fellow city commuters who are familiar with the bitter taste of frustration toward the frequent subway delays. Delays are probably at the top of a list of reasons why customer satisfaction with the NYC subways declined in 2015, others including crowded trains, dirty stations, and high fares.

That said, for all of the issues with the the public transit user experience, I think that the MTA’s recently released MYmta app and responsively designed website(!) are steps in the right direction. I conjecture that having arrival information visibly available, whether on an app or on physical countdown clocks or touchscreens in a station, provides a major boost to riders’ satisfaction. According to Charles Seaton in an article written about then-newly-installed countdown clocks in 2016, the clocks

take the guesswork out of waiting for a train, offering a reduction in stress levels for harried New Yorkers. The clocks are arguably the most welcome innovation to the New York City subway…

Before the MYmta app, the official digital solutions to the information game were sloppy at best. I personally used third-party apps such as Citymapper and Google Maps to find bus and train arrival information. (With Google Maps in particular, I’ve used the “find directions” function not for its intended fashion, but because it could display arrivals for public transit much more clearly and delightfully than on the MTA’s own website.) I’ve also considered taking a picture of or printing out bus schedules with my phone and printing them out for easy access.

Now, the MYmta app is convenient as a designated tool to help me plan and anticipate daily commutes on public transit, without having to open a less specialized third-party app or task (i.e. Google Maps).

That being said, the myMTA app, while a nice pill of aspirin to the headache that can be the MTA, does have its UX issues here and there. In this case study, I’ll review and recommend changes for a particular task in the app: checking arrival times for trains and buses.

Problem scenario: Checking public transit arrivals on MYmta

Prompt

As a daily commuter on New York City’s public transportation, I want to check the most up-to-date arrival times for the subway and bus stations I’m departing or transferring from.

Whether I’m going to school or the arcade, I check bus and train arrivals in advance. If I’m leaving home, this is usually so I may plan my departure. If I’m waiting for a train or a bus, this is so I can expect the next arrival (or reroute if necessary). Either way, checking the arrival times gives me peace of mind at best, or the knowledge to recalculate my commute at worst.

About the user (myself)

I’m a born-and-raised New Yorker. However, I live in a suburb of Queens about 2 miles removed from the closest subway station (the 7 train), which is only accessible via bus. Since high school, I’ve dealt with a very small margin of error in commute times: missing a single (usually bus) arrival could mean arriving up to 20 minutes late to class.

Two years ago, while I was living in my school’s dorm in Manhattan, I began commuting via bike as one way to sidestep this issue. However, because of varying weather conditions (and an unfortunate crash back in June 🙁 ) my main method of transportation remains the bus and subway.

(I’ve also historically been a pretty bad procrastinator and lazy student — which doesn’t help my tendency to be late.)

The task: finding arrival times for trains and buses

As a reminder: the following user scenarios are modeled off of my own notes of how I use the app and are not a replacement for user testing. For this case study, I used MYmta version 0.9.3–6 on an iPhone 6 with iOS 11.4.1.

I like to check for arrival times for peace of mind. I usually know in advance which route I want to take to get somewhere; for instance, on my commute to school, I know that I want to make sure that the F train is arriving to and from the Jackson Heights — Roosevelt Avenue station on time. At stations that I visit less frequently or without reliable or visible arrival info displays (e.g. countdown clocks) such as East Broadway, I would like to know how long I’ll be waiting on the platform rather than wait anxiously for the train to arrive at any minute.

Screen 1A: Home/Service Status

When I’m checking for an arrival time, I navigate to the Service Status screen on the MYmta app’s home screen:

Main screen for checking train service status (and arrivals)

The information displayed here is fairly straightforward. I tap train or bus names to check the current status of my favorited subways and bus lines.

One issue that’s been bugging me more often is how “Updated now” isn’t a descriptive enough label for the status of the information. I’ve noticed that the service status info doesn’t immediately update upon launching the app, causing me to rely on outdated information about service changes.

Screen 2A: Subway Details

Back to the task at hand — I want to find arrival times for the F train at Jackson Heights — Roosevelt Avenue, so I tap the F line icon. I scroll to the section “Stations” to find the station I’m at and want to find out arrival times for. There it is: Jackson Heights — Roosevelt Avenue!

Full list of stations on a subway line

Screen 3: Subway Arrivals

I tap the station and it brings me to the list of arrivals.

Subway arrival times — nice!

And that’s it! This is how I usually check for subway arrival times. The pathway is relatively straightforward and requires little thought on my part. However, it requires me to go three levels deep into the navigation — a task that might add unnecessary cognitive load for users who are trying to access information quickly.

Screen 2B: Bus Details

When I’m checking bus times, however, the experience is a little different — in fact, this is where my main problems happen. Unlike the Subway Details screen, the Bus Details screen doesn’t provide a list of stops along the saved line.

Which stops appear is ambiguous (but are presumably nearby stops)

Presumably, the stops that would then show up on this screen are stops that I’ve saved using the “Favorite” feature in the app. As implied by the Service Status screen, subway/bus lines or specific subway/bus stops can be favorited.

However, the Bus Details screen doesn’t provide context for which stops are displayed — it simply says “Stops”. This would be fine if it displayed my favorited stops, but it doesn’t always do so — sometimes the stops displayed differ depending on the time of day or my location. Based on what I’ve seen, my best hunch is that the stops displayed are my favorited AND nearby stops.

As a user, this vague information makes me feel confused and frustrated when checking the app. It’s not clear what I’m looking at and I wish I knew exactly what stops are displayed.

Screen 1B: My Stations & Stops

If I don’t find the information I’m looking for — which happens far more often when trying to find bus arrivals than for subway arrivals — I tap on the My Stations & Stops tab from the Service Status screen. This should let me find arrival times of subways or buses at particular stations/stops. I see a listing of different stops, all of which I’ve favorited in the past.

Favorited stations

I tap a button to find out arrival times at that stop. However, tapping the button does nothing…

The dropdown with arrival times toggles upon tapping the + or — icon

…until I tap the plus button on the side. I literally JUST realized that while taking screenshots of the app for this case study. When I used this app in the past, the apparent non-interactivity (and telegraphed uselessness) of the cards was frustrating. I used to assume that the plus button served some other purpose, such as adding another line’s arrival information to the stop. Now I feel dumb for not having noticed this earlier.

My issue here lies in how the cards telegraph their interactivity. According to the Material Design guide, cards generally permit a primary action by tapping on the card body itself or a supplemental action via additional icons or text.

The primary action of interacting with these cards should be to reveal arrival times. However, that information is not available by tapping on the card body, but by tapping on an icon — which, as stated, suggests a supplemental action. Thus, the visual hierarchy of card actions is reversed.

Additionally, here’s a video of the transition between states. Note the lack of an indication to whether the card expands as well as the lack of animation. It’s another interaction issue that can possibly add confusion while using the app.

An instant animation can be somewhat confusing

Alternative considerations, and why they fail

There are two alternative solutions to finding arrival times on the home page of the app. Both are available as the first options on the home screen (above the Service Status section). However, both are ineffective for the specific user scenario of a frequent commuter who’s trying to quickly access arrival times while en route. As a result, they add additional cognitive load.

One possible solution is the trip planner. The trip planner takes several pieces of input, including a departure point and destination, and provides a route using public transit with anticipated arrival times for each line. It’s the MTA’s answer to Google Maps.

However, the trip planner’s design doesn’t align with the user scenario I described. The scenario involves a frequent commuter who is trying to quickly access arrival times while en route. The travel planner anticipates a whole journey beforehand. The feature feels like it’s intended for for more deliberate routing, such as planning a trip for a job interview or finding my way to a part of the city I’ve never been to before. It feels like more work than I need on an average day — I’m not usually trying to get exact directions; I just want to know when’s the next train.

Another solution to the arrival time issue is the Nearby Stations & Stops function. Similarly to the trip planner, this function misses the goal of my specific user scenario. It requires the user to manually search for arrival information by scrolling through a list of nearby stations and stops. This might be helpful for a user who is unfamiliar with the location of local lines, but for a veteran commuter, this function is also far more cumbersome than being able to access arrival information via saved stops.

It follows that, in order to solve this user scenario, we’ll have to redesign the favorites screen. It’s the most efficient way for users to access arrival information.

How I would redesign the user flow

I think the current structure of information on the Service Status section works out fine — it’s clear and logical. I believe the UX issues here are grounded in issues with the UI/interaction design. All of the required information seems to be present and organized in the right sections; I just can’t easily access them, or they could be presented much more clearly.

To illustrate how I would redesign each screen, I mocked up the changes in Adobe XD and After Effects.

Screen 1A/1B — Service Status

New section labels, clearer “update” information
  • Add a refresh control for the updates to give the user more control over showing the most updated information. Show a loading indicator when new information is being fetched (not pictured).
  • Change the “Updated now” label to something more specific, such as “Updated [now/x minutes ago] at [time]”. This clearer signalling of when the app last fetched information resolves any ambiguity about whether the app is loading new service data.
  • Extra credit: I would suggest changing the “Favorites” label to a more personalized title such as “My stations & lines”. I’d conjecture that a more personal label creates a stronger mental association between the user and information that is individually important to them.

Screen 1B — My Stations & Stops

New caret symbols for dropdowns, new station labels
  • Allow the card to expand by tapping anywhere on the body of the card (besides the Edit button). This pattern reflects the primary action of the cards as mentioned earlier: expanding to show more information about arrival times.
  • Change the plus/minus icon to a caret (a v-like symbol). This pattern makes it much clearer to the user that there is information hidden behind a dropdown.
  • Add “To [terminal]” or “[terminal]-bound” modifiers to station labels. This would reduce cognitive load by quickly clarifying the direction of the subway or bus line/route selected.
  • Extra credit: animate the card dropdown to show expanded information. An animated transition makes it clear that the new information belongs to an existing card.
An animated dropdown

Screen 2B — Bus Details

  • Change “Stops” to “Saved Stops” or “My Saved Stops” to make clear what information is being listed. I’m assuming that this screen shows nearby stops only, however. In that case, I would change the heading to something to reflect that, such as “My Nearby Saved Stops”.
  • Change the station name to the actual name of the nearby station. Currently, the name under the stop is displayed as the name of the terminal station of the route. This poses a problem especially when the terminal station is one that I actually frequent — I could mistakenly assume that the times displayed here are actually those for the station located at 39 Av/Union St.
    Again, a simple solution is to add “To [terminal neighborhood]” in the route label. This is how buses’ destinations are referenced on their physical displays: for instance, a Q16 bus headed to the terminal station at 39 Ave/Union St in Flushing will simply read “Q16 Flushing Main St”.
Clearer labels for the section and individual stations

Reflection

I presume that the app is built on a very simple design platform. There aren’t any transition animations present between different screens or states. In fact, all element interactions have only static, instant transitions. The interface seems very web-like in that respect, and I assume that the app is on an extremely simple, web-like design platform. There could be any number of explanations for this; my current conjecture is that the team has a limited budget to work with.

While some designers might scoff at the simplicity of the design, I actually am pleasantly surprised by the how the app otherwise has a great user experience. For what it’s worth, I think the design of this app is clear and pleasant to use (let alone a million times better than the design of the old MTA service and arrivals website). Information on service status is laid out in a generally accessible, clear fashion.

Another good sign for the app is how the MYmta team seems to be aggressively pursuing user feedback, whether via reminders on the app itself or on subway ads for the app. I wouldn’t say the MTA is well-regarded for its transparency with customers — take the classic generic announcement “we are delayed because of train traffic ahead of us” — so I think this strategy is a step in the right direction for building trust and improving the UX on the customer service side.

While I think the app has lots of room for improvement, it’s still a great step for NYC commuters and reminds us that UX design can be successful without loads of fancy visuals and animations.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here