MTA Redesign – Case Study

The Metropolitan Transportation Authority is North America’s largest transportation network, serving a population of 15.3 million people in the 5,000-square-mile area fanning out from New York City through Long Island, Southeastern New York State, and Connecticut. While visiting their website, I wondered why the UI is so complex and overwhelming and decided to some research on the MTA site. This confusion isn’t as prevalent with MTA’s competitor sites such as Hong Kong’s MTR or London’s TFL, meaning most people are probably unfamiliar with its interface, and is easier for testing. Moreover, the traffic of MTA is dropping with a lot of questions on MTA being “why is the design of MTA so bad”.

 

The project tackles and resolves several usability problems with the site. By redesigning the user flow, interface structure, and visuals, I would like to increase user stickiness by presenting relevant content for different users. User interviews were conducted to identify confusing aspects of the app. The research identified several aspects of MTA that could be improved:the search function, layout, typography, and information architecture.

Tool Used: Sketch, Illustrator, Invision, Photoshop, Pen and paper

 

Background

To enhance the user experience of MTA, I needed to know what makes MTA great; what matters the most and how can the users easily find what they want. During the secondary research, I reviewed articles and statistics in order to better understand our problem and create a basis for my primary research. Acording to my research MTA has an average of 368,090 site visitors every day and each visitor spends only 3.39 minutes and browses a maximum of 3 pages within their single visit. Since 70% of MTA users acces the site through their mobile phones, I decided to focus on a mobile first approach.

 

Interview

I went to a public library, Starbucks and local coffee shops to test the current MTA site. Out of 30 people that I interviewed, 12 rarely visited the MTA site before; 5 people only used the app; 18 people are familiar with MTA site interface but found it inconvenient to use. So besides asking the questions, I also discussed with them about what they like or dislike about MTA

Interview Questions

  1. -How do you describe yourself?
  2. -What mode of transportation do you use each week?
  3. -When do you use MTA site or app and why?
  4. -How transit savy are you?
  5. -How do you feel about your commute?
  6. -Which changes would improve your commute?

 

User Journeys

The interview helped me identify the problem that I needed to address. After observing the users in the coffee shops, I created user personas and mapped the users journey according to the data I collected(both from interview and online) and identified pain points in the experience. I realized that the majority of the pain points occurred when the user needed to find what they want.
For my research, I learned that in order to improve the user experience of the MTA site, it needs to present the most interesting content for a single user at a given time. However, the content presented currently is not orginized for each user experience. MTA failed to consider the specific needs of different users.

 

User Flow/Wireframe

Based on the feedback I gained from the analysis, interviews and researches, I brainstormed how to improve the current user flow. There are 4 main improvements – trip planner, maps, purchase tickets and status updates. Basically, I merged schedules and maps into the “Trip Planner” page. I organized the information laid out at the homepage. Also added a purchase online ticket option with a personalized log in page.

 

 

Low-Fidelity MTA Transit App

After sketching the low fidelity prototype I created MTA’s mobile app that features the MTA’s most important functions such as “Trip Planner”, “Status Updates”, and information about tickets and fares. According to the user interviews one of the repeated pain points was the user not being able to purchase their Subway fares online.

I have determined that MTA’s app should allow users to load their MetroCards online instead of shipping it to them each month. Based on this information, I merged My eTix (the mobile ticketing app that lets you purchase and use Long Island Rail Road and Metro-North Railroad tickets directly on your phone) to the MTA transit app and combined it with buy or reload MetroCard online.

 

 

 

 

Style Guide

I started to brainstorm the new visual identity. According to our friends’ impression of MTA, “Calm”, “serious” and “profound” were the keywords of the MTA brand. Therefore, I would like to keep those words as a guideline, also, “modern” was a new word I added to the existing branding guideline. All of the patterns were created while considering Google’s Material Design guidelines.

I also created a new pattern library specificly for the MTA site. This single underlying system allows for a unified experience across platforms and device sizes.

 

User Interface

I combined the maps and trip planner into one tap interface. By default, when the user opens the site the first thing they see will be the “Trip Planner” because most of users are going to MTA to plan their journey. On the other hand, if they would like to view “Service Status” or “Fares and Payment”, they would see the information right below the hero image with ease. It becomes clear to the user if they would like to plan their journey or simply access information about their current or upcoming journey. Moreover, I de-emphasize the construction news and MTA’s coorporative information on the main screen because it is not searched by the user as much.

I made sure that the navigation is predictable for all users. Added breadcrumbs to every page, highlighted important destinations. I also improved the UI of text fields, tooltips and created clear layouts with visible elements, hierarchy and high contrast.

 

 

Date

February 6, 2018

Category

Product

Tags

Case Study, MTA, NYC, subway, UX/UI

3