New York City Metrocard Refill App
Living in the present days, we use mobile app to shop, to bank, to pay etc.
However, living in New York city, we are still missing an app to buy or refill subway transit tickets, instead of using the annoying station Metrocard vending machines. Why there isn’t a transit refill app for NYC Metro? Well, let’s make one!
New York has the busiest public transportation system in the world, and has over 4.3 million people ride the subway system every day. Most of them purchase/refill Metrocard in vending machines located at each train station. Both New Yorkers and visitors spend pretty much time using and waiting for using those machines, but there isn’t a mobile app yet to make the process convenient and timesaving.
In addition, since most of vending machines are old, they run into problems quite often, which brings inconvenience to users and costs more time, patience and repair. In my research and interviews, quite a few users admit that they were encounter with machines freezing, not accepting payment and even wrong charging, which leaves them only unhappy experience and no trust on vending machines anymore. It is necessary to go digital and provide a friendly interaction in the refill process. Thus, I decide to design a Metrodcard refill app.
The goal is to make the refill process easy and timesaving.
1. RESEARCH
- Tested different Metrocard vending machines
- Collected related information on http://web.mta.info
- Researched and tested several different city transit ticket refill apps
- Visited Transit Museum in Brooklyn, NY http://www.nytransitmuseum.org
2. INTERVIEW & SYNTHESIZE
- According to research result, created survey (20 questions) executed as a 25-minute interview
- Interviewed 15 people, who live in or travel to New York occasionally
- Analyzed, synthesized and created personas
Problem 1: Too many steps
80% of users had experienced waiting in long line for using vending machines. Wait time varies from 2 mins to 15 mins. Users need to go through at least 13 steps to refill/purchase a Metrocard.
SOLUTION:
1. Prioritize important steps and remove confusing or redundant steps. Rearrange steps to shorten refill process from 13 steps to 5 steps.
2. Create step bar to show users where they are at.
3. Make interface pagination instead of scrolling, and have navigation bar at the bottom of the screen to let users jump to different pages quicker.
Problem 2: Hard to find essential information
Users say they pay most attention to the information below:
1. Metrocard balance / Type of pass;
2. Whether value/pass is added correctly and successfully;
3. Number of remaining rides;
4. Pass expiration date;
5. Refill key;
6. go back key…
SOLUTION:
1. Hierarchize most-wanted information, create information bar constantly float on top of the screen.
2. Use visual design to make important keys stand up more and increase affordance.
3. Make “back”, “next”, and “confirm” keys more obvious as signals to speed up process.
Problem 3: Confusing terms
90% of users don’t understand what “add time” means , 100% of them don’t know what “Fast $9 Metro card” is.
SOLUTION:
1. Change “add time” to “add pass”.
2. Remove “Fast $9 Metro card”.
Problem 4: Lack of assistance and instructions
80% of users had difficult time using vending machine during the first time, since there is a lack of instruction .60% of them feel frustrated when machine problems happen and have no idea where seek help.
SOLUTION:
1. Create a friendly “registration” page for first time users, with clear and easy instruction including only 2 steps and 1 submit confirmation.
2. Add a FAQ section for users to search about common and general questions about using the app.
Other Highlights in the app
1. According to behavioral consistency, a button will show the value amount/pass type purchased by the users last time. It can help users refill quicker if making the same purchase as last time.
2. Users can add multiple Metrocards in the same account, and view different cards’ information by tapping the information bar on top.
3. Make app branding align with MTA brand identity. UI style is minimal, sharp and modern. (Always a fan of Massimo Vignelli, designer of NYC subway map system =) )
3. CREATE USERFLOW
4. SKETCH & WIREFRAME
5. PROTOTYPE
6. FINAL MOCKUPS
Conclusion
As a simple and bold app, Metrocard Refill App is easy to use, timesaving and convenient for our daily commute. I always believe design is not about something high end and a form of fine art. It is in our daily life and connected with every individual. I have a great and meaningful time woking on this project. Talking to each user, researching every piece of information, and brainstorming solutions with different angles, all bring me a lot of insights, empathy and opportunities to be part of the community.
Know more about Athens and see her other works at Athenschen.com
