CHALLENGE

The MTA would like to incorporate a new feature that optimizes the way subway passengers can pay for their MetroCard fare within existing digital platforms.

solution

I added a feature that will allow users to refill and manage their MetroCards on the current MTA site without using vending machines or going to physical stores.

role

UX/UI: Comparative Research | Interviews | User Personas | Empathy Maps | Sitemap | User Flows | Sketch | Wireframes | Mid / High-fidelity Prototypes | Usability Testing | Affinity Maps | Prioritized Revisions

tools used

Adobe XD | Illustrator | Photoshop

I started this challenge with research. My goal was to find possible features by studying successful subway systems around the world. After studying these systems, I found that digital technology played an important part in making them work effectively. By analyzing how they optimize fare payment features, I also found that they all had rechargeable, electronic, contactless smart cards that help users to manage their payments easily.

If New York City subway passengers could refill and manage their MetroCard online within current digital platforms, the quality of their rides would improve and the infrastructure costs would be reduced as well. Learning from the best subway systems around the world, it’s easy to conclude that people expect subways to be both an efficient and easy mode of transportation. This new feature would add value to the site and leave more payment options for customers.

After this analysis, I conducted contextual observations to find issues through passenger behaviors. I found that having a smooth ride was important for them since they were on the go. Then, I talked to six subway passengers including commuters and visitors to understand their frustrations and needs. During the conversation, I found that people liked the idea of smart cards because of their convenience and ease of management.

Between the MTA's official site and their downloadable app, the website–which is both responsive and doesn't need to be downloaded–would be the correct option for incorporating the new feature, since some interviewees didn’t want to keep apps on their phones unless they were sure they’d use them frequently. After the interviews, I gained more confidence in knowing what a new fare-optimizing feature would need and how it would improve the interviewees’ subway rides.

After researching, I created personas to define more specific subway passengers. For this new feature, I decided to focus on the refill and managing functions purchased MetroCards have. The first persona would be a commuter who uses the subway at least twice a day to go to work on weekdays, and also uses it for socializing on the weekends. This person would typically purchase a 30 Day-Unlimited MetroCard and needs to refill it by adding time after it runs out. The second persona would be an occasional rider who only uses the subway for a few times a week for either business or socializing.

Their working style would be flexible–for example, they work remotely or freelance–and they would purchase MetroCard by value and need to refill it in the same way. After defining personas, I created empathy maps to figure out their daily schedules and how they would go through the subway rides. This process helped me make sure that the new feature could solve their problems and meet their needs.

After defining specific subway passengers for the new feature, I needed to choose its platform and how users would interact with it to achieve their tasks. Since I learned that no interviewees used the MTA’s new app, MYmta, and some people didn’t want to install an app unless they were sure they’d use it frequently, the mobile site was the appropriate platform. MTA.info is a huge website and understanding its structure was a crucial process.

As a first step, I sketched out the current site to find the most suitable location for the new feature. I also needed to remember the flow of the current vending machine screens and use their wording because users might find them familiar. Visualizing these processes helped me greatly in creating a site map and the user flow, and ensuring that this new function benefited the user.

After clarifying how the new features functions within the current website, I created wireframes based on some initial sketches. The main function of the feature would be refilling the cards by adding time or values, and other functions including saving payment methods and tracking the transaction and trip history were added for user’s convenience. The feature would allow them to refill either through a registered account or refilling as guest according to their needs.

Also, considering this feature would be used on the go, simple and intuitive usability was essential. To test the functionality and see how well this new feature could be visually incorporated into the current site, I created a high-fidelity prototype by applying UI designs based on the MTA’s branding system. The visual cohesiveness of the feature would support user experience.

After creating the high-fidelity prototype, I conducted usability testing with four participants. Methods of testing include testing in-person and testing remotely with screen shares. To make the user’s environment as real as possible and observe how they interact with the new feature, I saved the prototype on my phone and tested in-person. Testing by sharing screens also helped me to find out how well users interact with the feature. Tasks included refilling the MetroCard through an account, refilling it as a guest user, and signing up for an account.

Overall, the testing went well and all users completed the tasks smoothly. From the results, I found the feature was effective and well-incorporated into the current system. Some participants gave me useful comments and suggestions for clearer navigation. I collected all the findings and documented them for prioritized revisions. Creating an affinity map also helped me to identify potential solutions to further improve the feature.

During the early stages of the project, there was uncertainty whether passengers would want this new feature. One-on-one interviews with them helped me to gain their sights and discover their frustrations regarding the MetroCard purchasing experience. I focused on creating easy and intuitive navigation to support passengers to complete their tasks on the go. Usability testing also gave me an opportunity to find issues and improve them. Further iterations and testing would be needed to finalize the feature to meet the expectations of a larger audience.

This new feature would help subway passengers refill and manage their MetroCards any time they want without using physical vending machines. By 2023, the MTA will phase out MetroCards for the new tap-and-go technology (OMNY). While its modernization has progressed, this optimizing fare payment feature would help users have more fare payment options by using current MetroCards, ultimately improving the overall ride experience.