Metrocard
Metrocard is a mobile application that helps riders to choose the best route and ticket options to navigate the greater New York area.
Never wait in line
WHEN
July 2021
DELIVERABLES
ux research
user persona
wireframe
high-fidelity design
interaction design
Challenge: The NYC metrocard system has remained unchanged for decades. The cost of the metrocard machine infrastructure, the lost time of waiting in line to buy a metrocard, touching a dirty machine to do it, the potential of losing the metrocard, and the ease of gaming the system by swiping your card for others has cost the city millions of dollars and leaves much to be desired from the user experience.
Design a new system that allows a daily user who uses the metro everyday or an-out-of-town visitor who will use the metro just once to get access to the metro, on time, without having a physical NYC metrocard on hand.
This design challenge was a great opportunity to study the challenges of the existing fare system in NYC public transportation. The goal was to come up with a design that serves the needs of different personas with competing priorities.
PROBLEMS & OPPORTUNITIES
In the city of 6 million residents and 65.2 million annual visitors, NYC public transportation supports 5.5 million rides a day on an average weekday. In effort to modernize its infrastructure, MTA introduced OMNY — a contactless card connected to individuals' credit/debit card in 2020. While OMNY would solve a lot of the problems stated in the challenge description, it excludes certain user groups such as international visitors without accepted credit cards or existing commuters who enjoy reduced fare or monthly passes. As of July 2021, MTA website states that they plan to roll out the expanded fare options by 2022, which will be interesting to compare the design in the future.
Another problem with the existing fare system is that it is very complicated. MTA tries to provide flexibility by supporting multiple transit systems (subway, bus, LIRR, Metro-North, as well as regional transit partners including PATH, AirTrain JFK, Nassau Inter-County Express, Westchester Bee-Line Buses, and the Roosevelt Island Tram) and various discount options for frequent riders and families. The resulting matrix of various fares often leaves riders confused which option is the best for their specific use case — especially for visitors or occasional riders not familiar with the system. There are even multiple websites dedicated to figuring this problem as well as a page on MTA's website to explain 'how to save money on NY transit fares'.
After initial research, I decided to focus on the following problems:
-
Help riders to purchase the right combination of tickets for regional trips
-
Guide riders to figure out the best fare options for their specific situation
-
While allowing commuters and frequent riders to purchase their tickets easily
Read the full version of unpacking the problem here.
USER PERSONA
There were 3 distinct types of riders: 1) daily commuters, 2) visitors, and 3) occasional commuters. Each rider comes with a different set of priorities and frustrations in their metro usage.
USER JOURNEY
Because each type of riders have different levels of understanding of the transit system, a user journey map helped better understand different pain-points and reveal key features each users are likely to prioritize. One of the key goals of the design is to integrate the key features such as trip planning while making direct purchase easily accessible.
INFORMATION ARCHITECTURE
Based on the user journey map, the following user flow was created with an emphasis on: 1) guiding riders to figure out the best fare options, 2) helping visitors purchase the right combination of tickets for regional trips, while 3) allowing frequent riders to purchase their tickets easily.
FINDING THE BEST FARE OPTION
Challenge: While MTA tries to offer various fare options to help riders save money, the current purchase flow requires users to have a prior understanding of the system. This underlying assumption in design imposes more friction for visitors and occasional riders.
Solution: By adding an option for users to enter their specific use case instead of choosing a ticket option, the app can make suggestions the best ticket options that matches their user case. Riders can click the each ticket option to read the details before they make the purchase, and they avoid having to go through a text-heavy document of FAQ.
PLANNING REGIONAL TRIPS
Challenge: When holding multiple cards at the same time, it can be confusing whether they need to purchase additional pass to transfer.
Solution: By allowing users to plan trips and viewing which passes they can use to transfer, they can easily purchase additional tickets they need to complete the trip.
DESIGNING FOR FREQUENT COMMUTERS
Challenge: While visitors and occasional riders need most help navigating the app, it was important to pay attention to features that frequent commuters need, such as making it easy to to load more money onto their Pay-Per-Ride card.
Solution: On the wallet page, users can directly purchase and access individual tickets. At the end of the purchase flow of a Pay-Per-Ride ticket, they can choose to set up an autoload that triggers when the balance drops below a certain value. In case they want to set up the autoload later, users have the option to do it on the details page of each individual card.
NEXT STEPS
Here are some next steps to consider:
-
Notifications: MTA communicates with the riders quite frequently. How can we design the notification systems that the riders are best informed?
-
Helper for discount options: MTA offers many discount options for the riders to take advantage of. How can we design the onboarding flow so that those who are eligible can seamlessly apply for those programs?
-
Special tickets: How would riders with special tickets (students, group purchase, etc) find their ticket options in the app?
-
Supporting multiple riders: the current design only supports one rider per app. Can the app be designed in such way that it supports multiple riders?
KEY TAKEAWAYS
1. The importance of progressive disclosure
Part of the problems that MTA had was that it was presenting all the relevant information to users at once, leaving users overwhelmed rather than informed. Thinking through the user flow and figuring out the right space and time to present a piece of information was a theme that arose frequently during this challenge.
2. Resolving conflict of interest among different types of users through design
Visitors and frequent commuters obviously have different challenges and priorities, and the challenge was to figure out when to prioritize which users to avoid cluttering of too many elements on a single screen.
3. Flexibility to accommodate users with different needs
It was tempting to fall back on "can't you simply tap a credit card with microchip and it solves all the problems?" but the more I researched various users who would use the metro, the more I understood the complexity of MTA's fare system. This was an opportunity for me to think outside of my box to empathize with underserved user groups that eventually lead to more comprehensive and inclusive design.
While the simple contactless card such as OMNY format provides simplicity, MTA would eventually need an app to support various types of tickets in the future. I'm looking forward to see the rollout of the OMNY app and the evolution of respective infrastructures to support such system.