MBTA App Redesign

UI/UX

A redesign of the MBTA Commuter Rail iPhone App, with specific focus on improving the workflow and overall UX experience.

Individual project

Questions

  • How do you pinpoint pain points in an app that close to 200,000 people use every week?
  • How can you translate these findings into tangible improvements?

Outcome

A set of wireframes and a workflow created through user research and user evaluation that streamlines the experience of buying tickets on the MBTA Commuter Rail app.

Audit of App

Existing App Structure
This is how the existing MBTA Commuter Rail App is laid out. The front page links to six different sections, all giving the user different information. Through personal experience, I've found this app to be frustrating to use as it seems to take too many steps to do any action. This was supported through talking with friends that used the app, as well as by the reviews in the app store.




Card Sorting
I used this approach in order to figure out the best way to restructure the app. I knew the app was confusing, but card sorting allowed me to figure out exactly where the pain points were.

I asked 10 people who were existing users of the MBTA Commuter Rail app to sort through all the pages that existed in the current app, and restructure the pages in a way that made the most sense to them. I collected cards, as well as qualitative feedback from notes I took down while taking users through the task.




New Structure
Current tickets are on the front page. This allows for quick activation and quick reference—something important when rushing to activate a ticket for a conductor.

Due to making alerts as something that only appears when referring to a specific line (either while buying tickets or viewing schedules), "Schedules" is now one page, reducing the number of clicks that it takes to get to the schedule information.

FAQ, App Information, and Terms and Conditions are all parts of the app that no one really visits—they have been compiled into one page since there is a lot of overlapping information.

Proposal

Front Page
To make important information more accessible to users, tickets already bought are placed on the front page to easily access and activate them. The "Buy Tickets" and "Schedule" pages are the main use of the app, so they have been emphasized using visual hierarchy.

Buying Flow
Buying tickets is now streamlined, with station selection now on the same page. The "Select station to" field updates depending on the answer given in the "Select station from" field.

Alerts automatically show, depending on the train line you have selected. This removes an extraneous page, and puts the information where the user can react to it.

All prices have been right aligned in a column, to make it easier to compare numbers. Credit card fields are easier to distinguish, and there is in-line validation as credit card information is entered in.
Selecting Stations
When selecting a station, it uses iOS' built in input for selecting from a list. This makes the app feel more natural to use, and it feels more integrated into the OS. Furthermore, this approach does away with unnecessary information (e.g. zones, which the user doesn't have to worry about when buying tickets as the app automatically calculates price) as there is only enough room for the names of the stations.
Hamburger Menu
Since there aren't many important settings to change in this app, the link to the "Settings" page has been placed under the hamburger menu on the side. This hamburger menu will stay on all pages, except when buying tickets. This allows quick navigation between pages if the user needs it.

Schedule
Lastly, on the "Schedule" page, the schedule automatically updates when you change selections. All times are flush right, which makes it easier to compare times between stations.