Connecting riders through language and consolidation

The MTA or Metropolitan Transportation Authority is North America's largest transportation network. It serves 15.3 million people across the surrounding New York City, Long Island, southeastern New York State, and Connecticut area.

Project: Add a feature

Role: UX Designer

Tools: Figma, Lookback, Miro, Google Doc, Google Meet, Zoom, Loom

Departure

Context

Stop 1

Potential

Stop 2

Research

Stop 3

Discovery

Over 60% of the racial and ethnic makeup of New York City is non-White, and 36.3% of the population of NYC are foreign-born (which is higher than the national average of 13.6%). This data points to the fact that the MTA is used by a diverse range of people. Whether it be people of different ethnicities, race, class or citizenship; accessibility to this service should be at its forefront. 

For many riders, there’s a high probability that English is not their first-language.

I conducted a Competitive Analysis, User-Research Interviews and interviewed a Designer specializing in web accessibility.

Competitive Analysis Findings:

Direct Competitors

Secondary Competitors

  • Each network presents and informs the rider about accessibility their stations differently. Some networks are more detailed, while others are more generalized.

  • All networks have translation tools located towards the top of their website.

User-Interview Findings

  • Language translation, inclusivity, accessibility and public transportation are important to everyone.

  • Everyone mentioned experiencing issues with using the MTA.

  • Everyone uses apps that aren’t provided by the MTA.

  • Everyone described how language translation connects people and cultures.

Web-Accessibility Designer Insights:

  • Accessibility is a holistic approach that includes gender, language, literacy, culture and more.

  • Having the language translation tool at the top is a universal design pattern.

  • Having proper access to technology should be a “right”.

  • From their experience, often governments and companies need some degree of convincing to value accessibility of their products.

This research process confirmed the importance of a visible translation tool and…

The apps provided by the MTA aren’t well-known or popular amongst riders.

Stop 4

Problem

  1. The translation tool is not located somewhere accessible and follows general design pattern.

  2. Riders are unaware of the mobile apps offered by the MTA.

Stop 5

Solution

Stop 6

User

  1. Change the location of the translation tool from bottom to top of the page.

  2. Create a place within the MTA website that organize and consolidates all of the mobile app information.

I used several tools to understand the user better:

  • User Personas

  • User Task Flows

  • User Stories

  • User Flow

  • User Persona

Stop 7

Design System

High-Fidelity Mockup

  • Home

  • Menu

  • Mobile

  • MTA App - Hover

  • TrainTime App - Hover

  • TrainTime App - Detailed

Original

Stop 8

Test

Stop 9

Refine

What worked?

  • 100% success rate amongst all users in identifying the translation tool on their first-try.

  • 80% success rate amongst all users in finding information about “mobile apps” and a specific app.

What didn’t work?

  • Several users mentioned finding the translation tool a bit small, they wished it was bigger in size.

  • One user found the wording of the new mobile app section as “Mobile” confusing.

The changes I made were:

  1. Increase the size of the translation tool

  2. Change the name of the “Mobile” page to “Mobile Apps”.

Original
Updated

Update 1: Increased the size of the translation tool so it’s more visible to the user, but still proportional to the other UI elements of the website.

Updated

Update 2: Changed the name of the section containing all MTA mobile app information from “Mobile” to “Mobile Apps”. All screens that are linked to this section have also been updated with this name change.

Final Mockup

  • Home

  • Menu

  • Mobile Apps

  • MTA App - Hover

  • TrainTime App - Hover

  • TrainTime App - Detailed

Arrival

Conclusion

Creating impactful design can be as simple as moving the location of an UI element. This project began with moving the location of the translation tool, so that the MTA website is more accessible to people whose first-language isn’t English.

Through the research process, another potential area of improvement was identified. Consolidating all the information within the MTA website about their mobile apps into one section.

This project demonstrated the importance of improving designs through observation and understanding the user’s needs.

Personal Takeaways

Improvement, but not really?

The location change of the translation tool, although not drastic, it was an improvement that follows common design pattern and format of MTA “competitors”.

This update reminded me that improving the user experience doesn’t have to be revolutionary. It can be a simple change, but the impact is what matters.

Be open to opportunities

This project has taught me to always seize the opportunity to improve the user experience and understanding of a product.

While speaking to users of the product, I learned and realized that most people had no idea the MTA has their own mobile apps.

After assessing my personal bandwidth and project timeline, I knew creating a section that consolidated all this information would drastically improve both the user experience and “business” goals.

If I had more time...

I would have recruited and interviewed people who experience disability or impairment issues. Additionally, I would have reached out to and spoke with more UX designers and professionals that specialize in web-accessibility.

I think doing both would have provided me more insight into the lived experience of people with disabilities, and the experience of designing for this demographic of people.

Thank you for reading, check out my other projects!