NYC METROCARD SYSTEM: UI/UX CASE STUDY

The NYC metrocard system has remained unchanged for decades. The cost of the metrocard machine infrastructure, the lost time of waiting in line to buy a metrocard, touching a dirty machine to do it, the potential of losing the metrocard, and the ease of gaming the system by swiping your card for others has cost the city millions of dollars and leaves much to be desired from the user experience.

This was the brief from the UXmas design challenge. The challenge was to design a new system that allows a daily user who uses the metro daily or an-out-of-town visitor who will use the metro just once to get access to the metro, on time, without having a physical NYC metrocard on hand.

My solution is called METROCARD. It allows users to pay metro tickets and manage their metrocard account, stay updated on schedules in real time of various transport services the user rides, also a map of the city showing the various transport line in the city and provide alternative routes if they missed their ride

THE OPPORTUNITY

This challenge was a big opportunity for me to learn the way transportation worked in New York, since New York has always captivated me in terms of its infrastructure and bright billboards. When it came to designing a metrocard system that would allow users get a card, make payment and also keep updated with the schedules of the various transport the metro offered. The usergroup comprised of 6 million New yorkers that use the metro daily. This group included students, senior citizens, tourist, workers e.t.c. Majority of metro users complained heavily on cancellation of transport without any form of notice, overcharge on their fees and hectic process of refunding, card cancellation and others. Also there is an alarming rise in the number of people that make use of the metro.

Shocking stats on the effects of the delays on workers who use the metro on NY daily news blog.

To keep the major problems of our users in mind so that I don’t give attention to irrelevant problems, I made use of the HOW MIGHT WE? Statements. Presented below;

HOW MIGHT WE?

• help users carry out transactions using the metrocard and manage their accounts.
• let users know the schedule of their transit.
• enable the purchase of a metrocard.
• help tourist and visitors access the metro with little or no fore knowledge about it.

THE PROCESS

I had no fore knowledge of how the metro operated because I don’t reside in the U.S. I had to use the internet to conduct my research with google and Wikipedia aiding me through out the process. I needed to have an understanding of how the metro system worked, I discovered that the metro was managed by MTA (Metropolitan Transportation Authority) and New York metro had 3 system of transportation which included the subway, rail and bus. They had special cards for Seniors, Students and Emergency residents. I did a search on google playstore to check if there was any mobile application that enabled metro users access the metro from their smartphones. We found some that were endorsed by the MTA. Although the MTA (the body that manages the NYC metro system) had a web platform that provided information on schedules and transit prices, I decided to collect user complaints from the already existing platform available on google playstore and come up with solutions to solve them. Some of the user complaint;

Based on the data I gathered, I created two user groups which included tourists/visitors and residents. I used a user POV (point of view) and created their needs based on the problems they faced and provided insights to them.

This way, we covered about 4 million metro users in New York.

With all the data I gathered, I created a solution called METROCARD.

Wireframes

Wireframes of the mobile based solution Metrocard

During wireframing, I came up with solutions that would helped users conduct transactions, keep up with schedules and get suggestions based on their locations. With this in mind, I chose the tab navigation system. The app contained 4 tab which are cards (enabled the user to manage transactions when using their metrocard), route (kept users in the loop with schedules in real time), explore (tourist and residents could experience their city in a new way) and profile (manage activities on the app). But because of time, I focused on only 3 tabs excluding profile. These tabs were created based on the problems our users faced and prioritize and categorize them based on their use.

After hours of wireframing and iterating, I moved on to prototyping my solution. My images were gotten from pexels.com and icons from fontawesome.com, which has a vast volume of icons.

OUTCOME

Linear view of the high-fidelity mockup

After hours of prototyping, the solution was looking really good and I was really proud of what my wireframes were becoming. The high-fidelity mockup of the solutions are arranged according to their tabs. First up is card;

Card;

This tab contained the transactions that occurred using the metrocard and issued cards based on 5 user categories:- Regular (for workers and adults), Students, Senior (for elderly), Visitor (since they would not stay long in the city, this card enables its user to conduct one time transactions or a time based transactions) and Emergency (for emergency service personnel). The cards carried different colors to signify the category the card holder belonged to.

The various cards created designed in different colors.

Some other factors I considered while designing included an empty state for users that are just using the platform for the first time, it included a brief explanation of what a metrocard is about and purchasing one, this is captured in the first screen. The second screen contains activity of the user, his card type and the balance in his account.

Route

This included time schedules and a search card where you could check the arrival and departure time of your transport. Also due to the high misinformation in terms of ride cancellation and not carrying the user along, we introduced an alert feature that notified the user if a ride was cancelled or would be arriving late and also a map of the transport lines in the city.

Explore

I adopted the google feed design for this section. Like the name implied it enables the user (new yorkers and visitors) experience their city in new ways and also it notified them suggestions, when it notices they are behind on a task or schedules they have set on their calendar, suggesting available rides departing soon. It also gives the weather update.

IN RETROSPECT

This case study is my first and it introduced me to conducting in-depth user research, finding users pain point and outlining solutions that would help users in conducting their transactions while having a better user experience and more intuitive use for first timers. I also learnt a lot of facts about the metro system in NY.

All my prototype were done in figma, you can take a look here or use the link below;

Want to say a big thank you to UXmas for the challenge. Would love to hear your feedback in the comments.

Thanks for reading.