My MTA Redesign

My MTA app redesign is dedicated to improving the user experience of using the official guide, making it inclusive for everyone to travel in New York under different circumstances.

CHALLENGE

To keep certain visual aspects of
the app, enhance its user flow,
and consider accessibility feature

ROLE

Facilitate User Research
Redesign User Experience
Conduct UX Audit
Create User Interface

SKILLS

App Redesign
Prototyping
User Research

Problem

Lack of Accessible Stations

Competitor Feature Analysis

The lacking of accessible features in navigational apps

My MTA considers the feature of accessibility help that all other apps have not yet done, but the current version of My MTA does not provide good navigation on most of the existing features.

UX Research

The official My MTA app got a relatively bad rating from users. As the official app, it should provide the most accurate information and provide a great user experience so people know what they are looking at.

There are many frustrations users face while using the original app,

UX Audit

Original MYmta App's pain points

  • CTA is not obvious
  • Many useful information all cluttered on the home page
  • The "Favorite" feature requires unnecessary steps of looking up the live status
  • Instruction on getting to the accessible stations is not clear at all
  • Not good at providing updates on construction

User Persona

Why Redesign Matters?

There are elderly who need to use wheelchairs, people who accidentally broke their legs, or you might become a parent who likes to take your kids out for fun. They are facing a lot more problems traveling around, but we can improve the experience on the app to match their needs.

Key Features Prototypes

When I come up with solutions, I always refer back to the pain points users are facing while they are on their journey. These are the prototypes of the solutions to the problems.

Direct icon representation

Quick route toggle / detailed information

Specific elevator entry direction

Wireframe Revision

Cleaner visual brings a better understanding of the functions

When redesigning the app, my main focus is to provide less crowded visuals with a reorganization of the information. With the additional feature of directly showing where the elevators are located, users face less hustle while walking.

User Testing

I had conversations with my target users of all ages. They used crutches, wheelchairs, or strollers at some point while traveling underground.

Interview data synthesis

Based on the interviews, I learned more about user pain points and analyzed the data I gathered. In addition to usability testing, I realized some design solutions could cause misunderstanding.

Usability Testing

I also asked the target users to go through the first version of the prototype, noting down their reactions while doing tasks.

Saved Route Feature

A quick click will take you to the daily route you take, with a suggestion on a different route if there's a service change.

Live Service Change

Incorporating the Beta version of the live subway map into the app, gives a better visual of the service change status.

All About the Line

Contains all changes to this line throughout the week. Based on the beta version of the live subway map.

Live Service Change Map

Gives a quick map view of the live change description.

UX Test Learnings and Improvements

Leanrings

  • Station safety alerts information is important to a certain group of people
  • Information that’s important to the users can be shown simpler in a less crowded manner (Service status change)
  • The choice of icon and wording can be reconsidered to be more inclusive

Improvements

  • Clear up the home page
  • Change the wheelchair icon to elevator icon
  • Change the accessible mode to toggle mode
  • Change "Favorite" lines and "Location" to "Saved", for regularly used routes
  • Instruction to a different station under service change status
  • Give & show the specific entrance to the elevator at each station
  • Separate navigation to check the real-time status of the trains and bus

Reorganization of app structure

How Does User Journey Change?

Brand Mission:

To make public transportation in New York City inclusive for everyone.

Competitor Analysis

Key Values

Humanity is a value that recognizes people’s difficulties and devises long-term solutions. The device was created with the user in mind, having simpler visuals and pictures. The color usage is lively and welcoming. Blue implies the value of trustworthiness, which My MTA should always provide its users with.

Competitor Analysis

Opportunity Space

My MTA has a versatile database of information, resulting in a cluttered and information-heavy design. In order to be inclusive to all ages of users, the opportunity space for the new visual lives in a simpler UX realm with a less data-driven visual.

Visual Design

Visual Competitor Analysis

This is the visual analytics of the best-rated navigational apps. 80% of the people I interviewed use Google Maps because of its easy-to-use user experience. Transit offers a unique experience and showcases information in a really clear way. The color is lively and attracts people.

Stylescape

This is the style scape I settled on. It consists of the primary colors which bring liveliness to the product and differentiate it from other navigational apps.

UI System

The meaning behind the logo is inclusivity. It's a combination of an existing character with braille, which is the character for people we cannot see. My aim for this product is to bring inclusivity to everyone.

Prototype

Moving Forward

Key Takeaways

  • People have a limited attention span on information, so it is crucial to not provide a lot on one single page.
  • Icon representation is a key to being inclusive.
  • Different age groups responded very differently to the visuals and features.

Next Step

  • Enhance user safety by adding safety information for each station.
  • Be able to share the current updated arrival time with friends.
  • Voice-over option for visual impairs.