MetroCard App

Role:

UX/UI Designer

Introduction

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.

Project Overview

My app solution, the MTA Mobile App, will allow users to purchase MTA cards and add funds to their account on the go. Additional functionality includes scanning into the subway station with a mobile ticket and being able to check the status of trains.

Design Process

User Research

In order to gain a better understanding of what users would most want out of an app like this, me and my group members interviewed two commuters in New York City who frequently use the MTA subway system using a script we drafted documented below.

From our interviews we found that users most commonly stated that being able to add funds from their phone to skip the lines at the MTA machine, and being able to scan through the turnstiles rather than relying on a physical card which can get lost or worn out over time, would best improve efficiency.

User Journey

Using feedback from our interviews, I created a user journey map that would help us visualize the typical user experience of adding funds to your card and boarding the subway, and determine pain points that the app could alleviate.

Wireframes

For this project we were tasked with sketching wireframes that would give an overall view of the user flow, and how each screen could serve function to the overall goal

High-Fidelity Reiteration

For this project we were not given the opportunity to test our designs with users, but instead the professor gave feedback on the wireframes and pointed out areas for improvement for when we designed our high-fidelity prototype.

We weren't tasked with many changes, however were challenge to push the final design to as close to realism as possible by implementing real information in place of the placeholder text and to flesh out the schedules page more.

Prototype

Taking into consideration some of the complications users had with the second set of testing, I decided to design on on-boarding tutorial to teach users how to navigate the interface. Additionally, I labeled the tabs at the bottom to be more easily understood, and