top of page

MetroCard Application

Create a modern MetroCard through an application design. The goal of this project was to create a way for users to access the subway faster and to use their device to automatically pay for their transportation. 

​

Role: UX Researcher and Designer

Deliverables: Design Requirements, Sketches, Personas, User Flows, Wireframes, Design made with Adobe Illustrator, Prototype made with Invision

Timeline: 2 Weeks

Research

In 1993 the MTA introduced the MetroCard as a way to relieve passengers from carrying around tokens to gain access to public transportation. Over the past 23 years technological advancements require this system to be updated. Individuals use credit cards and applications such as Apple Pay to purchase items, so why not implement a similar method? I purpose a system that resembles these systems to purchase subway and bus rides. 

User Research - Survey

Goals:

  • Understand how individuals that live in New York City use the MetroCard system. 

  • Understand how they purchase MetroCards and rate how pleasant they are with the experience.

  • Understand if they currently use applications that aid in their traveling experience (MTA Bus Time, Bus Tracker, Subway Time, Transit, etc) 

User Research - Insights

  • 57% of respondents said they use their MetroCard daily

  • 71% purchase monthly or weekly MetroCards

  • 86% use machines to purchase a MetroCard

  • 86% state the current MetroCard system is outdated

  • "For the most part it's fine, but sometimes the turnstile slot won't process and you have to slide the card multiple times and that can get annoying"

​

"Honestly it is 2017. I wish we could pay via phone and not have to line up."
- New Yorker
Requirements for Redesign & Design Process
User Flow
Wireframes
Wireframe Insights

  • Users have to create an account upon entering the application because they will provide sensitive information. 

  • The homepage would include animations that indicate where the user is in the process. 

    • Not animating circles indicate the device did not pick up the sensor​

    • Animating circle (pulsing) indicates the device and sensor are interacting

    • Circle filled in with another color and bold check in center indicates successful payment

    • Circle filled and 'X' indicates unsuccessful payment and reports error messages to inform user

Design
Prototype
What I learned and the next steps...

  • Creating a design to ease transportation has to contain certain features including a rapid transfer of information and constant feedback. The homepage has to contain animations to let the user know where they are in the process. Are they too far away from the sensor? Was the transfer successful? Why was the transfer unsuccessful? Constant feedback would lead to a better experience. 

  • I will conduct user testing sessions for this application design and test the experience in a subway environment.

  • I will continue to research sensor technologies that can be incorporated into design of turnstile.

More Work
bottom of page