Commute

MBTA App Re-Design

User Interface Design

The Project

As part of my Interaction Design course at Northeastern University, we were asked to redesign a "bad example" of a user interface and user experience. After some investigation, I realized that one of my most-used apps, for the MBTA commuter rail, needs an upgrade on its user flow and interface design.

The App

The Commuter Rail is a Boston based transit system for individuals living outside the city. Currently, there are two separate applications to see train schedules and to purchase a ticket. Both applications are confusing and difficult to use. In this project, I redesigned the experience to make commuters trips easier to understand.

The "Bad App"

Why do users need to download and use two separate transit apps for one combined service?

My Ride

This application displays schedules and gives the users general information about their ride. The navigation is difficult and there are many avenues that lead you back to the same information. The User Interface is outdated and hard to read. The most useful part of the app is the time updates for train arrival, but from experience, these cannot be trusted. 
 
 
 

Screen-Shot-2020-10-10-at-10.51.26-AM

My Ride : User Flow

Screen-Shot-2020-10-10-at-10.54.20-AM

mTicket

In addition to "My Ride" users who want to take the commuter rail must additionally download the app mTicket. Within this app, users must set up an account in order to purchase tickets for the train. The most bizarre feature is the scheduling section that guides a user to the website, rather than the My Ride app. 

Screen-Shot-2020-10-10-at-11.02.44-AM

UI Spec

When beginning the development of the new version I had a few goals in mind. Primarily, I wanted to clean up the user interface so that it is simple and seamless for the user to navigate. Additionally, I wanted to combine the use of finding a trip and purchasing a ticket.

UISPEC-mbtaa-03-1

Visual Design Development 

To further the design, I created a mock of what the visual design and use of color would look like. I chose to use purple, as the commuter rail is marked with a purple stripe but added additional shades. I also made sure to include a cohesive set of icons to help the user navigate visually. 

Screen-Shot-2020-10-10-at-11.24.08-AM