MTA ReDesign
Updated: Feb 14, 2019
Prompt: 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.
Initial Thoughts
I’ve used a MetroCard in NYC, but the last time was about a decade ago, so rather than starting with assumptions, I jumped straight into research. I was pretty confident that I was about to dive head first into a complicated and cumbersome process, but I needed to garner a better understanding of who rides the Metro and what the current process is like before I could even begin to garner insight into pain points and design. I wanted to answer the following questions:
Who uses the MetroCard/MTA? How many routes and modes of transit need to be accounted for?
How many types of MetroCards are available? And, among these types, how do they relate to demographics?
What does the current process of purchasing a MetroCard look like? What's working about it? What challenges exist?
Research
So, for anyone else in that boat…here’s what the MTA has to say about it’s systems and riders (as a quick note, the MTA last updated these figures at the end of 2017, so it’s likely that the actual numbers now have changed):
The New York City subway system had 472 stations - the largest number of public transit subway stations of any system in the world. In 2017, the subway saw a total of 1,727,366,607 riders.
Furthermore, the MTA Bus and New York City Transit bus system had 235 local, 17 Select Bus Service, and 74 express routes. Some buses run along the same route, but have different stops and terminal options. A total of 122,213,569 riders utilized MTA buses in 2017.
Alright, so I know that there are a TON of different routes that can be taken, and a huge variety among these some ~1,849,580,176 riders.
Next, some basics about the MetroCard:
They are available in NYC Subway Stations, but not on buses
Newsstands, grocery stores, etc. also sell cards
There is a $1/card fee to buy a new MetroCard
There are several types of MetroCards that people can choose from. Regular MetroCards come in Pay-Per-Ride, Unlimited Ride 7/30 Day, and Single Ride Tickets. EasyPayXpress MetroCard options reload automatically, and can be set up as Pay-Per-Ride, 30-Day Unlimited, and Reduced Fare (which is more of a combination Pay-Per-Ride & 30-Day Unlimited, and only applies to the elederly and those with qualifying disabilities).
Oh, and in case that's not enough options - I should mention that there are overlapping ways to combine these cards, so that you can put money on your unlimited card to cover other modes of transportation, or upgrade a pay-per-ride card to have a set unlimited period. Different cards work on different transit options, outlined in the spreadsheet below.
Next, I wanted to understand the demographic of the average rider. I couldn’t find any recent data, but I did come across a 2010 write up by Benjamin Kabak of MTA riders and how they pay for their rides. This brought up some technology limitations, because the systems largely cater to low-income individuals.
I had hoped to find the breakdown of tourists versus local use of these systems, but unfortunately couldn't locate any studies of this nature. I have to assume that since NYC is a tourism hotspot, a decent percentage of riders fall under this category.
I also wanted to understand the challenges faced for MTA users, and there seemed to be a lot of them. The New York Times reported last year that 40% of subway trains are delayed, and just one delayed train can back up a significant portion of the system as trains are forced to slow or stop to maintain a safe amount of space. These delays have attributed to a decrease in ridership of 40,000 people and, in 2018, the MTA announced a “Fast Forward” plan to update and improve the subway system over the next 10 years.
Finally, I looked at the current MetroCard, analyzing the current process of purchase and the design of the cards themselves. Looking at the cards, I noticed that there’s no physical difference in the type of MetroCard, so you can’t tell the difference unless you swipe it at a card reader. Furthermore, the lack of an expiration date means that riders can’t check when their unlimited balance runs out unless they swipe it, and pay-per-ride users also can’t tell their balance until swiping. This also triggered a serious potential pain point alert for me, because I couldn't find how or even if cards set up with multiple uses (remember that fun add-on pay per ride to your XPress card feature?) show up when swiped. Theoretically, a rider could have no idea what is on their card.
To get a better sense of the process, I watched a video of how to purchase a MetroCard in 2018. The process was pretty involved, and while I'm sure the regular rider has been familiarized with the process, it seems like it could be overwhelming for tourists and less frequent riders.
I saw a lot of potential issues for this process. Number one, for unfamiliar riders and tourists, there is no clarity as far as best options, the lack of descriptions for the types of cards leaves it open to interpretation and could lead to frustration and incorrect purchasing. These riders may not know if they need transfers to different transit systems or have any idea what passes can be used with what transit options.
Finally, the lack of an easy way to check the balance/expiration is problematic for riders that are in a rush. The fact that the process still relies on a physical card really exasperates this issue, since small cards can easily be lost and, if discovered, have no clear value.
Defining Pain Points
Phew! So I had a ton of information now, and a lot of potential problems. I started listing out all of the challenges that were expressed in the research I'd looked at, and came up with these as main issues:
The Public Transit system itself is a confusing challenge for visitors
The onboarding process lacks clarity in choices, furthermore there isn't consistency in the terms used between the MTA website and the purchase terminals (a "fast card" isn't available on their website, and Regular and Pay-Per-Ride are used interchangeably)
Cards lack a clear way of checking the balance/expiration
Riders need to be able to quickly view and add onto their balance
Regular delays mean that routes sometimes need to be changed to cut back on lost time
Features & Flow
It was time to start thinking about how features needed to break down to keep the product streamlined, and maintain ease of use. I focused on the following areas:
Onboarding
I need clear paths for different types of riders. Local, regular users of the transit system likely know what they need and want to access it quickly. Visitors, on the other hand, may need more guidance in selecting the right card for them. Catering to both served as a challenge.
Routes
Even though the prompt didn't dive into the huge variety of paths and transit options, it came up as a major challenge for visitors. Moreover, locals are burdened by worsening delay times. The Subway system had the largest issue here, so I decided to focus on this aspect. Having a way that users can put in their desired trip, access route options, and view delays would really elevate the use of the product as well as lessening the need for old, paper route maps. Last year, NYC implemented the Real MTA map, which shows New Yorkers which subway lines are affected by delays to give real time accuracy to commuters. Connecting the MetroCard purchasing process with this map would elevate the functionality of the product by solving a very real problem for riders.
Accessibility
Mobile stuck out as the easiest way to implement this, since most individuals keep their phone on them and smartphones are regularly used to scan and pay for products already. I was a little worried about accessibility here, for a few reasons.
We need very standardized symbols, because we have a variety of languages and cultures that utilize the system.
The vast majority of New York City residents own a cell phone, but since the transit systems also cater to a large percentage of low income riders, I had to be aware of potential technology disparities. Furthermore, even though locals have access to phones, the fact that it's a global tourism destination means that I have to be aware of challenges in having access to this technology.
Very easy to read text and other plugins should be available for riders that have vision disabilities.
Information Visibility
The current system leaves a lot to be desired here, so I want users to be able to easily see how much time and money they have left on a card, and add on as needed, quickly.
Security
MetroCards can carry over a $100 balance, so I needed to include a password, passcode, or touch ID option to prevent a stolen phone from turning into a stolen MetroCard as well.
I started to write out the basic flow of the onboarding process and adding routes before moving to some basic sketches.
Sketching
I used these as a loose guideline to start figuring out how the design of things would actually flow. To save time, these subbed as wire frames.
Design
I decided to give the MetroCard a little makeover when I jumped into this part since, quite frankly, I wasn't a fan of the corresponding perspective on the angles, and the whole design feels dated (Spoiler alert: I'm not the only one that thinks that, it's been up for debate for over a decade).
I wanted to stay true to the MTA's overall feel, so I combined the current MTA logo (which utilizes Akzidenz Grotesk) with Helvetica Neue. Color coding allows riders that have multiple cards to quickly access the correct card, and standardized calls to action alert them to oncoming expiration dates, low balances, and inactive cards.
Accessibility and signaling are super important to this design because of the huge variety of people that ride the Metro everyday. As such, I kept the same color coding calls to action, and iterated a lot as I moved through the design process.
For instance, you can see in the design below that I initially thought having users walk through the onboarding process with some guidance could be helpful in determining the best card choice. As I started playing with it, however, there were too many variables. Without a clear cut way to define the 'best' choice, I instead opted to give users an initial decision; a Regular, EasyPayXPress, or Single Ride Card. I beefed these up with descriptions, so that riders can get a good feel for their best choice at a glance.
Since I was working from incomplete wireframes, I did a lot of iterations as I moved into the design process. The image below shows three versions of the sign in sheet as I worked towards my final layout.
Even though updating to a digital product alters a lot of the card-buying experience, I wanted a level of familiarity to exist for riders that regularly use MTA services, and referenced the steps in the current process fairly frequently.
Once signed up, the user moves towards selecting and purchasing a card. Since there are so many options, brief descriptions are included on each card so that the decision is more informed.
Finally, the user purchases the card and moves to their main Dashboard.
I also explored what the app experience might look like for more frequent users, as shown below in a quick prototype. If the video doesn't work, you can try out the prototype here.
Final Thoughts
This project was a doozy, with lots of variables and a ton of information. Overall, I'm happy I took on this beast of a project, and was able to come up with something that streamlines the MetroCard buying experience.