Justin Lam

February 2020

New York City Subway App

Contact

Skills

  • Interaction Design
  • UX/UI
  • Prototyping
  • User Research
  • UX/UI
Scroll

Challenge

Problem

New York City will be launching a new app in support of its new system called OMNY that will include the new mobile ticketing system. How might we get users to transition from using physical Metrocards to a digital solution?

Insight

Through research I found out that users were often unsure how much money is available in their Metrocard. Users were often reluctant to use the OMNY system, because they were able to save money by buying monthly passes. Also, users who did not live near a kiosk had trouble purchasing Metrocards.

Solution

Create a mobile app that allows users to purchase daily, weekly, & monthly passes/tickets for both the subway, buses, and Long Island Railroad. Users will also be able to use the mobile app to scan and pay via a QR code. They will also be able to view their account balance and transaction history.

Process

I began this project by discovering that the subway system and buses use Metrocards and the Long Island Railroad uses tickets purchased at kiosks or the eTix mobile app. I took a look at the eTix mobile app and noticed many users were unhappy that once their tickets were activated there would be a set time limit before it expires, often resulting in unused tickets. Next, I spoke to users about why they haven’t used the OMNY system at stations. Many of the users acknowledged that they would save money, by buying weekly or monthly passes at kiosks. This shifted my interviews into asking users about how they go about purchasing tickets at kiosks. I then mapped out a ticket purchase flow as well as a persona that I wanted to focus on. The main feature I wanted to include a way for users to purchase Metrocards through the app as they would at a kiosk. Next, to have users full transition to using the mobile app I wanted users to be able to scan a QR code from the mobile app.

Design System

I took OMNY dark blue and decided to use softer shades as a basis for the primary color. The main features I wanted to focus on was purchasing a ticket and using that ticket. I chose to use the bottom sheet pattern to give the feeling of the user staying on the same screen and “less” steps of completing a flow. As for the ticket designs I wanted a Metrocard ticket to resemble a physical Metrocard and a Long Island Railroad ticket to resemble a train ticket. I’ve added certain accent colors to further differentiate the tickets as needed. I chose to use the tab pattern to easily switch between the ticket wallet and the transaction history so users can easily keep track of their trips. Within the ticket design, I wanted to highlight the ticket type and expiration dates.