Overview
Public transportation, a staple of urban life, often provokes mixed responses due to its convenience, cost-efficiency, and environmental friendliness juxtaposed with outdated ticketing systems. Recognizing these challenges, I sought to revitalize the New York Metropolitan Transportation Authority's traditional subway pass system, aiming to bring it into the digital era. This case study offers an in-depth look at my design process, shedding light on how I identify issues, propose solutions, and execute a vision. My goal was to build, test, and iterate on prototypes that meet the needs of public transportation customers and the New York Metropolitan Transportation Authority. Join me as we explore this journey of transforming NYC's public transport card to be in sync with our tech-driven world.
Tools
Adobe XD
Methods
User Research / UX Design / Interaction Design
Duration
3 weeks
Role & Responsibilities
As a UX/UI Designer for this project, my primary tasks revolved around understanding user needs and translating these insights into tangible design solutions. My responsibilities were twofold: first, conducting comprehensive user research to gain a clear understanding of the user's pain points and needs when it comes to public transit ticketing. Second, I employed these insights to create high-fidelity prototypes that mirrored an intuitive, efficient, and user-friendly mobile ticketing experience.
Field Research
To immerse myself in the user experience and better understand the challenges, I undertook several subway rides, focusing on the ticket-purchasing process. Two main problems emerged from these observations:
The Inefficiency of Physical Tickets
Imagine you're in a hurry, with a train due in two minutes. As you approach the terminal, uncertainty sets in – you can't recall if your unlimited plan card has expired or the amount spent on one-time OMNY purchases. An attempt to scan reveals "Insufficient Funds". At this point, you're forced to separate from your group and join a line at an MTA machine to top up your card. But what if the machine doesn't accept credit cards?
Then my solution must seek to provide real-time balance updates and auto-refill options for digital cards, ensuring riders are never caught unprepared.
Limited Functionality of OMNY
OMNY offers the convenience of using Apple Pay or Google Pay, yet it has its limitations. You can only pay full fare for a single ride, with no access to the discounted 30-day unlimited rides. Commuter benefit cards are also not accepted. MTA SmartPay will rectify these issues by offering the full suite of fare options and accepting all payment types. Plus, it organizes all transactions in a single place for easy export, streamlining the expense tracking process.
Competitive Research
I then got online and researched subway ticketing in other states and read through what riders were saying about their experience.
To no surprise, my findings revealed that mobile payment systems make for a holistic solution that can be much better optimized for accessibility.
User Interviews
To get a better understanding of the problem space from the eyes of other end users, I spoke with 4 subway riders around New York.
I encapsulated my findings by creating the following user personas
Information Architecture
In designing the information architecture for the app, my aim was to prioritize simplicity and user-friendliness. The application was structured into three key categories: Dashboard, Main Menu, and Alerts. The majority of functionalities were nested within the second level, providing users with a straightforward navigation experience, reducing cognitive load, and facilitating efficient task completion.
User Flow
The user flow was designed with efficiency and intuitiveness at the forefront. Upon opening the app, users land on the 'Dashboard,' a central hub that provides a snapshot of their account, including their current balance, travel history, and access to settings.
Style Guide
The style guide for this project is characterized by its audacious visual language. The primary color theme consists of vibrant orange and varying shades of grey, while accents of blue are strategically employed to bring focus and contrast. This balance of warm and cool colors creates a visually engaging and user-friendly interface. Helvetica, the chosen typeface, reinforces the modern aesthetic while enhancing readability across the application. Together, these elements form a cohesive style guide that not only defines the app's identity but also fosters a user-centric experience.
Sketches & Wireframes
The low-fidelity sketches and wireframes served as the initial step in visualizing the user interface, allowing me to explore and compare different UI approaches rapidly. This iterative process was essential in determining the most user-friendly and efficient design layout before moving to more detailed and high-fidelity prototypes.
Create an Account & Verify the Identity
Creating an account on the platform has been streamlined for user convenience. The app provides an option to integrate with Google, allowing for a swift sign-up process. If users prefer to set up a new account independently, the process remains simple and secure. All that is required is an email address, password, and phone number. To ensure security, a two-step authentication procedure is implemented, reinforcing account safety while maintaining an effortless user experience.
Purchasing a MetroCard
Acquiring a MetroCard through the application has been streamlined for simplicity and user convenience. Within the app, users can opt for an unlimited ride pass, buy a discounted bundle of multiple tickets, or purchase a single pass. Upon selection, the app presents the various offers associated with the chosen category. Following this, users are prompted to register their preferred payment method. This process is designed to be smooth and quick, helping users effortlessly manage their transit requirements right from their mobile devices.
Manage your ride and ride pass
In an effort to bridge the gap between physical and digital experiences, MTA SmartPay allows users to scan their physical passes, integrating them into the application. This unique feature ensures a seamless transition to a digital-first approach without the need to discard existing physical passes. Moreover, the app provides a comprehensive history of the user's commuting habits. This feature serves as a valuable tool for users to review and manage their travel patterns, further enhancing their control over their transit experiences.
