Problem #1


Double-charging is ranked #1 in Google's search engine for the term "Metro Card Machine". Double-charging or overcharging is very common with the current Metro Card vending machine. There are numerous complaints and articles about this issue. Click the button below to view search results.

Problem #2

Subway Congestion

Through my contextual inquiry, I also observed that subway stations can become congested, and the lines to use the vending machines can get long. Commuters are on-the-go, and this coincides with the MTA’s brand as a rapid transit system.

Project – MTA Mobile App (Design Challenge Winner)
My Role – Product Designer
Timeline – 1 Month
Tools – Survey Monkey, Sketch, InVision, Photoshop

Research & Empathize

Contextual Inquiry

First I needed to get an understanding of the company and the legacy systems that were in place. I then kicked things off by conducting a contextual inquiry. I took a deeper dive into the company background, product offerings, and customer reviews. While conducting this research tactic, insights began to uncover themselves that led me to generate a few assumptions about the problems to be solved. The two biggest pain points were:

  • The current card purchasing kiosk, which is an MTA legacy product; which caused hundreds of double-charges per day. Through research, I discovered that the kiosk was manufactured in a time period people when online purchasing wasn’t as familiar.
  • Subway congestion was a huge pain point especially for people that traveled in and out of the city regularly.
User Interviews
With the knowledge of legacy purchasing kiosks becoming very outdated, I began speaking with actual users.  In addition, users admitted they run into problems quite often. This brings inconvenience to users and costs more time, patience, and repair. Users also admitted that they were encountered with machines freezing, not accepting payment, and even wrong charging, which leaves them only unhappy experience and no trust in vending machines anymore. It is necessary to go digital and provide a friendly interaction in the refill process.
  • Subway stations can become congested, and the lines to use the vending machines can get long.
  • Commuters are on-the-go. This coincides with the MTA’s brand as a rapid transit system.

With these findings in mind, I decided that one of the Key Performance Indicators (KPIs) that would allow us to judge if our app were a successful one is if its usage would decrease congestion at the subway stations.

Personas and Scenarios
The primary persona, Patrick, is a commuter from New Jersey who represented the interviewees who had multiple MetroCards and needed a way to manage them both. He also represented interviewees who did not mind linking their bank account and credit cards to e-commerce businesses. I developed two other personas who did have concerns over online security and wanted other payment options, as the interviewees did.

With Patrick in mind, I created a scenario for Patrick, who needed a way to set up an auto-fill option for his MetroCard. This scenario begins setting the stage for design, by having to focus on what specific task our user wishes to complete (auto-fill MetroCard), and what screens are necessary for Patrick to complete his task.

Define & Ideate

Feature Prioritization

With multiple forms of research completed, I now had a sense of what kind of features MTA commuters would want in a design solution to their problem (i.e., to give them the option of mobile Metro Card purchasing, and on-the-go), and what kind of features comparable transit systems’ apps included.

Listing all features, I prioritized them via two methods. The first included plotting the features on a graph, with their positions depending on the impact it would have on commuters when trying to complete a task, and also to what degree a commuter would expect a feature. Features that warrant implementation are those that have a high impact on commuters, but would also be unexpected.

The second method of prioritization was by categorizing features under four categories: Must Have Features, Should Have Features, Could Have Features, and Won’t Have Features, (MoSCoW method).

With the features prioritized in two ways, I was able to see that the feature that would have a high impact and not be expected, but that I felt was a must-have, including alerts that would notify commuters when their MetroCard balances were low.

Other features, including the ability to Add Value/Time, would be neutral when it comes to expectedness but would have an equally high impact on users, and thus was a must-have feature for the design challenge.

Prototype & Test

Sketching & Wireframing
Having prioritized features and deciding on which were central to the design, I began sketching app screens that would include these features. 31 sketches were produced in 10 minutes. After several rounds of sketching, I produced home screens and refill option screens, giving users the options to add value/time to their MetroCards, access their accounts, as well as see their transaction history and card usage history.
After a comprehensive series of initial whiteboard sketches, digital wireframes were made using Sketch. Every interaction present in the aforementioned user flow was pinpointed, and a priority was made to minimize clicks for the core experience, all while keeping the app as simple but functional as possible.
Testing & Iterations
I tested the design by observing users as they tried to refill their Metro Card and asked them questions about particular pages in that task flow.

Testing results showed that users knew exactly how to refill their Metro Cards. After selecting a card refill purchase majority of users were stuck for a moment not knowing how to continue to the following screen.

After the testing sessions, I worked on these issues in the next iteration by removing the floating action button and linked the button directly to the following screen. The results from the following testing resulted much better along with side other findings that were iterated upon as well. I learned quickly that even the obvious can be confusing in design if the users find it confusing.

Visual UI Design

UI Design System
I decided to use a design system kit. Returning to the personas created. Because the user is on the go, I wanted to keep the primary color palette to embrace familiarity. I choose this minimal kit to assist with a plethora of research conducted. This ultimately helped me to reduce cognitive overload while fulfilling the user needs.

Many challenges brewed with the initial wireframe and flow. I managed to collect enough data points to make decisions for user scenarios and prioritizing key priorities. A mood board was also created to help create a flow of consistency and feel for the user.