Work       About

Metrocard Refill App

Role: Product Designer / Researcher
Time: 3 months
Today, we use mobile applications to shop, to bank, to pay etc.

However, living in New York City, which has one of  the most complex subway systems in the world, we don’t even have an easy way to buy or refill a subway transit ticket. It is annoying to wait in line and deal with those “old guys” - Metrocard vending machines at train stations. Since the first day I moved to New York, I have been wondering why a NYC Metrocard app never exits.

Well, since it’s not here yet, let me make one, attempting to make our NYC life easier and happier!


Design a mobile app providing a convenient, efficient and friendly experience of Metrocard purchase and refill.


Field Study

I tested different Metrocard vending machines at several subway stations, and visited Transit Museum in Brooklyn to study the history of NYC subway.
New York has the busiest public transportation systems in the world. It has over 4.3 million people ride the subway system every day. Most of them purchase/refill Metrocard in vending machines at subway stations. Both New Yorkers and visitors have experienced spending time using machines and waiting in line.

Most of those vending machines are old, and running into problems often, which causes inconvenience, time wasting, and even a bad beginning of your day.

Industry research

I researched Metrocard and fares information on, and tested several cities’ transit ticket apps (Chicago CTA Ventra, NYC Ferry and London Oyster card).


According to field study and industry research result, I conducted an half-hour interview with 15 targeting audiences, who live in or travel to New York occasionally. Personas are created to better understand users’ behavior and thoughts on purchasing/buying Metrocards with purpose to find out needs and trends.
In my research and interviews, quite a few users admit that they were encountered with machines freezing, not accepting payment and even wrong charging issues, which leaves them only unhappy experience and no trust on vending machine or even the subway system. Thus, it is necessary to make this process go digital and provide more accessibility in a friendly environment.
Synthesizing interview result, I gained quite a few insights and summarized them into 3 major problems, which need to be tackled for meeting users’ essential needs.

Problem 1

Too many steps in purchase/refill process

Survey Insight:

  • 80% of users have experienced long line waiting 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.

  • Most users admit that they have consistency on purchase/refill decision and action, which means that users intent to do the same purchase from time to time.



To prioritize important content and remove confusing or redundant parts, I rearranged step order to shorten refill process from 13 steps to 5 steps, shown in step map.


Step bar was created to show users where they are in the process.

Interface was designed with pagination format instead of scrolling. Navigation was designed as tab bar at the bottom to allow users access to different pages quicker.

Hierarchizing content and prioritizing “most wanted” information. I created information bar constantly floating on top of the screen.


According to users’ purchase consistency, a button of user’s last purchase will appear on the home page, which allows users to make the same purchase through one click.

Users can add multiple Metrocards under the same account. They can view different card information by tapping the number at right bottom corner of information bar.

Problem 2

Hard to find important information which users need

Survey Insight:

Users prioritize information in order in regards of importance:

  1. Metrocard balance and pass types
  2. Whether value/pass is added successfully
  3. Number of remaining rides
  4. Pass expiration date
  5. “Refill” button
  6. “Go back button



I created compelling user interface to add signifiers, especially for prominent buttons. Visual design is aligned with MTA brand identity, which is minimal, sharp and modern. -  I really appreciate the work of Massimo Vignelli, the designer of NYC subway system visual =)


Bigger buttons "back", "next", and "confirm" are located above tab bar to direct behaviors.

Problem 3

Confusion of terminology and registration for new users.

Survey Insight:

  • 90% of users don't understand what "add time" means, and 100% of them don’t know what is "Fast $9 Metrocard".

  • 80% of users had difficult time using vending machine for the first time, since it’s in lack of instruction.

  • 60% of them feel frustrated when machine problems happen and have no idea where to seek help.



Terminology was updated such as:
  • Changed "add time" to "add pass"
  • Removed "Fast $9 Metro card"


I created a friendly "registration" page for first time users. It’s a clear and easy instruction including 2 steps of information fill out and 1 step submit confirmation.


I added a FAQ section for users to search common questions on app using.

Wireframe & Prototype

Design Mockup


I always believe design is not only about good looking visual. It is accessible, communicative and influential in our daily life to connect individuals as a community. I had a great and meaningful time woking on this project. Talking to potential users, researching onsite and offsite information, and brainstorming solutions with different perspectives, all bring me a lot of insights, empathy and opportunities to be part of the community.