MTA eTix App Redesign

Being a daily commuter on the LIRR, I was sold on the idea of my phone being the ticket and not having to worry about missing a train because I am stuck in line at a vending machine. So I downloaded MTA’s eTIX mobile app and purchased a monthly ticket. Soon as I started using the app I noticed some issues that might turn off potentials users who were looking to switch to a mobile ticket. So I thought how can I improve the app to be more usable.

MTA's ambitious eTix app. While the premise of the app seems promising, it has many usability issues.
Research

I started my research by going online and collecting feedback from the users of the app. The overall feedback was overwhelmingly negative and most of them had a common paint point  – it’s difficult to use and process of getting to some screens is way too long. Additionally, I conducted in-person interviews with 5 passengers who use the app daily.

Problems –
Defining Pain Points

Here are some of the most common pain points of the app:

  • Number of tabs required to get to "Activated Ticket" to show the ticket to the conductor is way too long. Currently it requires 3 taps just to get to the the screen. (This is after the user has logged in.)
  • Activating a ticket when boarding the train. People understand the need to activate a ticket for data collection purposes but some people activate a ticket by mistake a day before and end up losing a ticket and not get reimbursed.

Some minor issues include:

  • App feels sluggish. This is probably due to the long and inconvenient process of getting to desired screens.
  • App's UI looks ugly.
Current flow for getting to "Activated Ticket" takes too long and makes the app feel sluggish.
Current ticket purchasing flow
Challenges
  • Reducing the number of tabs required to go to the “Activated Ticket” screen.
  • Improving look & feel of the app
  • Optimizing ticket purchase flow
Solution 1

Design
In an attempt to create an optimized ticket purchasing process and reduce the number of tabs to go to "Activated Ticket", I came up with the following solutions:

Activating a ticket and getting to My Ticket

  • Streamlined process for getting to "Activated Ticket" screen and activating it. It now requires 2 tabs vs. 4 tabs before.
  • More thought-out and clear hierarchy of information for quicker and easier scanning.
  • Improved look & feel while staying within stay within the family of colors.
  • Least used features are buried away while the most used features and useful information are placed front and center. For examples, the huge barcode on the "Activated Ticket" screen is not relevant to users, so It’s buried away but still can be accessed by clicking on the barcode icon below the ticket image.
  • Some other useful ticket information are added to the ticket screen. The info includes point of origin, destination, ticket expiration date, travel time and arrival time.
New and improved design requires just one tap to get to "Activated Ticket" screen.
The ticket screen puts useful information front and center and hides the irrelevant information under tabs.
I created an interaction that feels quick, responsive and delightful. I used "Principle" for prototyping.
Solution 2

Ticket Purchase Workflow

  • More prominent progress bar
  • Re-organized hierarchy of information for quicker and easier scanning
  • Improved look & feel while staying within stay within the family of colors
  • Separating "Single Ticket" and "Multiple Ticket" into 2 tabs seemed redundant and unnecessary. Instead, now each ticket type has a quantity box thus users can purchase a single ticket or select desired quantity of a ticket to purchase multiple tickets on the same screen
  • Re-organized hierarchy of information for quicker and better scanning
New ticket purchasing flow
I created an interaction that feels quick, responsive and delightful. I used "Principle" for prototyping.
TOP