MetroCard App

This was a month-long project where I worked with a team to make the process of adding funds to a MetroCard and scanning through the turnstiles in subway stations simpler by designing a mobile app from which users could scan their card, add money to their account, and check train times.

Role: UX/UI Designer

How might we make the experience of riding the subway simpler and more efficient for both regular passengers and first-time travelers?

The Problem

Currently, it is difficult for people to purchase MTA cards and add funds to their accounts because they are limited to the physical MTA machines found in subway stations, which are outdated and slow.

Constraints

The major constraint for this project was the timeline, as it was conducted for a final project in my last semester at Rutgers, and thus I only had about a month to work on it. Additionally, this was my first exposure to the design program Figma, so it took a bit of adjustment using it and not having access to previous symbols and asset libraries I have installed on my usual program of choice, Sketch.

User Research & Persona Development

A few of my team members conducted user interviews on frequent MTA patrons to gain a better understanding of the current system's shortcomings and how our solution could be optimized to be more helpful. Using these interviews, I created a user persona. I then mapped out the current journey of what it could be like to utilize the mobile app and which features would need to be present to make their experience more enjoyable and efficient.

The biggest concern that the interview subjects had was finding out they had insufficient funds once they went to go scan into the subway. So, we made sure to make accessing how much money they have available and adding more money without needing to be in the station our first priority.

Brainstorming & Wireframes

Using the insight on user feedback from the interviews, we began coming up with concepts for how to structure the app so that it can perform its main functions of adding funds to the user's account, scanning through the turnstiles, and checking the subway schedule.

Login Screen

Home Screen

Add Funds Screen

Menu Screen

Schedule Screen

Route Screen

What I Delivered

For our final presentation, we created high-fidelity screens that we felt best showcase the extent of the project's functionality, and also created an interactive prototype, which is embedded below.

For our final presentation, we created high-fidelity screens that we felt best showcase the extent of the project's functionality, and an interactive prototype which is available on the desktop version of this site.

Launch Screen

Scan Successful Screen

Menu Screen

Add Funds Screen