myMTA Transit App

UX Design

myMTA phone app picture
Project Type
UX Design
Role
UX Research, Ideation, and Interaction design
Client
Speculative Project
year / duration
2021 / 2 months
Tools
Figma, Miro
Team
Mitchell Paddy, Jennifer Lee
Clickthrough prototype:
Mobile Prototype

New York myMTA Phone App

Metropolitan Transportation Authority of New York City for use with the transit system operating in New York City and the greater area.

Problem

The mobile application has a heavy user load and lacks accessibility options.

Roles & Goals

My role on the team encompassed, research, ideation and interaction design. Everyone on the team chose a different minimal viable product to focus on.

My teams goal was to create an application that New Yorkers could trust and use for everyday public transit needs. We wanted to make transit in NYC more equitable and safer, whether that be helping a user avoid a delay, train congestion or helping someone with a disability use the subway.

Minimal Viable Product

My focus was on a developing an accessibility mode. This feature would enable those with accessibility issues to easily use the transit system in NYC.

I also wanted users to be able to customize their journey within the myMTA application and not be forced to go to another application for any of their navigation needs.

Final Prototype

These are the final click through prototypes that were developed after research and testing. The user turns on the accessibility mode, searches for a transit station and views transit information.
Clickthrough prototype:
Mobile Prototype
Final wireframe gif for app part 1
Final wireframe gif for app part 2

Research

In order to know how to proceed with the redesign, I did a heuristic analysis of the existing mobile application.
Recognition Rather than recall
The existing application has a lack of diverse accessibility options or information, at times this can prevent a user from finding a suitable route.

The application has high user load, often forcing the user to remember options they picked or requiring them to dig around menus to find information.
Flexibility and Efficiency of Use
The app is missing basic functions like buying a ticket. Users must go to another application to do some of these tasks.

Navigating can be confusing; there are multiple tasks with no confirmations when proceeding. When routing from one place to another the app doesn’t offer the user alternative route options.
myMTA original app

Competitor Analysis

The myMYTA app has a number of unique competitors. I looked at a few different types; apps that focused solely on public transit and ones that handled other transportation options such as biking or walking.
citibike
Easy to use, including downloading and setup.

Multiple ways to purchase the service (app/website/booths).

There are no language settings other than english.
Google Maps
Offers directions for multiple types of transportation.

Easily search the surrounding area for other necessities.

Can show irrelevant content.
Kakao Metro
Offers information such as carriage nearest to the exits and bus information.

Very simple to use.

Lacks information show beyond the subway.
Uber
Taxi-service also provides delivery service (e.g: ubereats).

Rating system of both drivers and passengers helps to weed out people deemed to be unsafe.

Drivers are able to cancel trips leaving users in a lurch. This can mess up schedule for customers.

Empathy Interviews

The target segmentation comprised of commuters that use public transit because they don't own a car. People who are looking to have a safe, comfortable, streamlined experience and enjoy their daily travel.
interviewees
Age range from 25-49. Average age of 37.
Students or working in the city.

Frequent commuters.
Key Questions
What is your favorite part of public transit?
What is your least favorite thing about public transit?
When do you normally use the public transit for commuting?
How has a transit delay affected you?
Do you feel safe on public transit?
What is your best New York City story?
5 words to describe the public transit and why?
What we heard
“More often than not you don't have a way out. Especially in between stops there is no control.”
“I would feel safe it there’s a lot of people. There’s safety in numbers.”
“ ....because of this there’s so many delays, why New Yorkers are so angry. Can’t get to work on time... “
“168th st used to freak me out. Crammed out of this tiny train into this tiny little elevator. This sucks. I'd rather take a helicopter than take this thing.”

Affinity Map

After the interviews, our team went through the notes we took and pieced together common thoughts that our interviewees had. I came to the conclusion that I wanted to focus on someone with a disability that had to navigate transit in the city.

There seemed to be a large hole to fill to help those with disabilities be better served by public transit. That group maybe couldn't walk, or was hard of hearing or had anxiety while using public transit in New York City.
Affinity Map sticky notes

Persona

Persona Description
Alicia is a disabled generation z student, new to the city and still finding their way around. She lives and goes to school in Manhattan. When she’s not at school she enjoys going out with friends to parties or to see shows and experience New York.
Goals
• Explore more of New York City and see the other boroughs
• Meet more people
• Figure out the fastest way to get to class
• Know what subway stations to avoid
Needs
• Accessibility options due to a disability
• Knowledge of how long it will take them to get from place to place
• Safety
• Meeting people
• Cost tracking
• Social media access
Pain points
• Afraid she’ll get stuck in a subway station
• App not giving feedback while en route
• Doesn’t feel in control while using transit
• Unable to find information on accessibility services
• Inconvienent and lengthy travel
• Wifi difficulties while on the subway

Journey Map

Alicia needs to find the most accessible and timely route to take her to meet friends. She uses the myMTA app to figure out what route will be the easiest for her to find her way across the city.
Alicia's Journey Map graphic

How Might We

HMW make the accessible routing process easier/quicker? Like using apple pay at checkout?

Through doing this brainstorm process I came up with possible solutions to enhance the access to information for those with disabilities.
How Might We sticky notes

Insight Statement / JBTD

Situation/Emotion/enemy
Alicia is a disabled student who travels around the city to see friends. (Situation) She is often frustrated and has anxiety (Emotion) about how difficult it can be to find an accessible route when using transit. (Enemy)
Jobs to be done
“When I am going to meet friends at a party (Situation), I want to have easy access to information in regard to accessibility (Motivation or Forces). So I can feel less stressed and anxious (Expected Outcome).”

MVP - Accessibility Mode

I decided I wanted to develop an accessibility mode. I read multiple articles online about people who aren't even able to get on a bus because of the lack of training and I wanted to try and design an application that could help people use the public transit in the city. This would allow users like Alicia to be able to tailor the myMTA app to their needs.
Table Stakes
• Accessibility mode: easily visible accessible transit information (maps, locations, feedback)

• High Visual Accessibility Standards
Delighters
• User feedback on accessibility

• One touch routing options based on user location, favorite destinations or friends

• Crowd source help function

Initial Wireframe Sketches

To begin developing how the accessibility mode would work I started with initial sketches.
App sketches on iphone
Toggling on Accessibility mode
We changed the existing apps information architecture and decided to add a preference menu that would house the accessibility mode options. A user would go into their preferences and turn on accessibility mode.
Transit display on the map
This was when I started thinking about how I wanted to handle showing the accessible stations that were available on the overall map. I knew one of the main issues facing NYC transit users are a lack of consistent information on whether elevators actually work. So I knew I wanted some sort of display on whether a user could actually use a specific station or type of transit.

I also read that using different shapes to signify whether something is available or not could be helpful to aid people who are color blind and cannot rely on just red or green colors for valid or invalid. With these sketches I was thinking of a few options from checkmarks to the landmark icon. I eventually decided to show handicap accessible stations with the handicapp icon.
Information displayed for specific transit
I reviewed other phone applications and modes of navigation such as information kiosks and websites. I needed several pieces of information such as location of elevators or where you can get service, where the entrance and exits are, what problems there might be, and a way to submit feedback on the station.

Task Flow

The goal for this task flow was to help Alicia find information on accessibility quickly. She would first toggle accessibility mode, then use the local map to find information about transit accessibility before leaving home, finally saving the station in their favorites.
1. Toggle accessibility mode
2. Go to local map
3. Search/Select Destination
4. Search Selection
5. View Accessibility Options
6. Display Station map
7. Favorite Station
8. View favorites

Wireframes

From these sketches I moved to figma to begin making more detailed wireframes to show how the interactions would play out.
Toggling on Accessibility mode
Users click on the settings button on the tab bar to find multiple options to tailor the app to them. In this case I focused on the Accessibility Mode. The persona I made needed to use a wheelchair so she toggles on the wheelchair mode.
Settings page prototype v1
Initial Search Page
The first search page will show some default options. The user in this case has a couple of favorited stations. The card tells you what lines are running there and whether it is currently wheelchair accessible.

There are also Quick Routes that the user can user to immediately route to friends.
Prototype v1 Initial Search Page
Search Results
The initial version of search results had a number of icons next to them. First it would tell you the transit station name and then an icon displaying the specific accessibility need the station will fulfill.
Search Results prototype v1
Station Map
The user has now clicked on a specific transit station and has been presented with a station map at the top.

The user can scroll down to toggle display for elevators, staff help, alerts or to save the station. They can also use quick routes from this station.
Prototype v1 - elevator access

User Feedback

After creating an initial prototype I contacted several people to test this new application with that were as close to my user as possible.
Icons
Users were unaware of what many of the icons meant. For instance on the search results page. The user didn't know what the wheel chair, eye or the ear meant. I switched out this information for more specific transit information.
Where are they now
Users wanted to see where they were in relation to their specific search. To address this I added an icon to the map showing where the user was when looking at transit specific information. For instance on the transit station map there is now an icon showing where the user is.
Too many options
Button location was unintuitive in the station specific information page. To help fix this I moved the buttons that interacted with the map above so the user can look at the map and toggle the buttons at the same time.

Final Wireframes

After testing I revised many of the key wireframes.
Map
Once users toggle on the accessibility mode they are shown a map with transit icons that are specific to their needs. In this case Alicia only sees transit that she can specifically use.
Final prototype - Initial Map
Settings page
User testing made it known that I needed to add descriptions for what the various accessibility options did. After going to the settings page, the user will navigate to the accessibility mode options.

Once there they will toggle on and off the various settings. A description will detail exactly what that toggle does.
Settings page - Accessibility mode - final prototype
Initial Search Page
I revised the search page to be a bit more streamlined. The user has already told the app that they need wheelchair accessible stations, so it only shows those now.

User’s did not know what “Quick Routes” meant, testing showed that users understood what “Go to Friends” meant in this use case.
Search page - final prototype
Search Results
The search result page changed considerably after user testing.

Users didn't understand what the eyes, ears and wheelchair represented.

Instead of those icons I switched them to bus, train and subway icons. Next to those are the specific transit lines running at those transit spots.
Search results - final prototype
Initial Station Details
After clicking on a specific transit station the app will zoom into where the transit station is located.

The map shows what type of transit is located at this station in this case a subway. There are also faded icons that show other nearby accessible transit.

A user can either click find a route or scroll to see more information.
Station specific results - final prototype
Station Map
The user has now clicked the Station Map button and been presented with a map of the station.

There are now buttons that can be pressed in order to quickly find elevators, a helper, or service.

Below this in the menu, the user can rate a station or report an issue.
Final Prototype Elevator Access
Saved Trips
The user has clicked the Save Station button, and has the option to see their saved trips. From there they can see their saved stations or quickly navigate to friends.
Favorites Page - final prototype

Takeaway

I spent a lot of time researching how people used the new york city transit. I found that there was a severe lack of transit options for those who are disabled. I was able to read articles detailing disabled peoples use of transit but found it difficult to interview anyone with a physical disability. Because of this I had to rely on assumptions.

After completeing many revisions of the accessibility mode I became aware that these options could help any user, not just Alicia.

Covid has changed how people use public transit and will continue to change how people use it in the future. How many people will still use transit. Will the current target segmentation make sense in a year, a couple years?

Finally, working through the testing and task flows helped bring about more ideas that would be great to explore in the future.
Final UI for myMTA