MTA Digital Product Design
ux/ui design project
Project Overview
The MTA is the number one resource for public transportation in New York City, with millions of New Yorkers relying on it everyday to get them where they need to go. The MTA digital products are designed to enhance the commuter experience as well as optimize MTA service.
Team
Mimi Bancod Buan
Miguel Gaspar
Gianelle Leger
Sophie Tatarchuk
Tools
Figma
After Effects
Duration
4-5 months
My Role
UI Designer
Motion Designer
Challenges
The MTA currently provides way too few services to aid riders on their commutes, thus leaving them to fend for themselves on public transport. Riders who take multiple services provided by the MTA have to deal with numerous apps that separate content. Navigation also becomes a challenge when the MTA themselves don’t provide enough options to passengers whenever an issue occurs during their commute. It becomes overwhelming overall during the whole trip experience.
Objectives
A simple taskflow that will make trip planning easy for users.Constant updates from MTA themselves to keep interaction with riders consistent.
.webp)
.webp)
.webp)
.webp)
Solution
- A consolidated mobile app that combines all content into one location, making trip planning more efficient.
- Account feature that allows riders to personalize their experience.
- Digital ticket wallet to allow for quick access and convenience.
- Live chat support feature to provide real time guidance and aid for any passenger concerns.
Personas
- Multiple MTA Apps
- Navigation Confusion
- Overwhelming Experience
- Simpler Trip Planning
- Constant Updates
- Unified MTA App
- Train Inconsistencies
- Misinformation
- Lack of Updates
- Convenient Route Options
- More Travel Guidance
- Explore More of NYC
- Lack of Accessibility Points
- Bilateral Hearing Loss
- Miscommuni-cation
- Straightforward Directions
- Easy-Access Points
- Avid Assistance
- Lack of Structure & Control
- Abrupt Service Delays
- Health & Safety Concerns
- Consistent Communication
- Transparent Schedules
- Stress-Free Commutes
Journey Map for Lucas
Problem Statement
Our design objective is meant to optimize the process of receiving information on MTA service, schedules, routes, and news. We are dedicated to providing a more conscious experience as we strive to expand our role in the lives of commuters.
Opportunity Statement
• We plan to eliminate service uncertainties and alleviate the stress of trip planning.
• We intend to quickly resolve on-site confusion when commuters are faced with service changes or lost.
• We aim to ensure the comfort and loyalty of commuters during long waiting periods and delays.
MTA Riders — The Mobile App
.gif)
Login / Landing / Account Profile
Users can create their own MTA account on the Riders app to keep up with their commutes. Users can personalize their experience by saving their recent trips that they can refer back to, and the app will learn and remember your most frequently taken buses, trains, etc.
Map Feature
.gif)
Ticket Wallet
Users can directly purchase a digital ticket for either the Metro-North or LIRR from the app, allowing for quick access and convenience. They will be able to save these tickets in a digital ticket wallet. Users also have access to a virtual Metrocard for contactless swipes through subway turnstiles.
MTA Support
Whenever users are in need of assistance, they can easily chat with an MTA representative through the support feature. A real MTA representative will chat with users and provide guidance and solutions for any passenger concerns.
Service Status & News
.gif)
Electronic Kiosk
Starting Screen
Announcements
Page
.gif)
Live Map
The digital kiosk provides several map features including a live map and a navigation system. The live map allows users to see in real time how far away incoming trains are from the station.
.gif)
Navigation
With the navigation system, the kiosk will give users directions on how to get to certain station from their current station if they are confused.
.gif)
Resources — FAQ
The information tab allows new passengers to obtain information about the MTA easily. The FAQ section allows users to see answers to frequently asked questions.
Resources — Transferring
The transferring section gives information about transferring to other MTA lines.
.gif)
Resources — Other Services
The other services section provides other methods of contacting the MTA.
Resources — Ask
Lastly, Ask for assistance calls an MTA employee to you if you need further assistance.
Digital Bus Hub & Pole
Starting Screen
.gif)
Updates & Bus Tracking
Bus Tracking offers more information and insight to bus routes through live GPS displays and consistent updates of schedules, traffic, and bus locations.
MetroCard
.gif)
Mini Kiosk
.gif)
.gif)
Tools & Utilities
Focusing on the mental and physical comfort of commuters, utilities will transform bus hubs into safe, reliable spaces for waiting and receiving easy-access essential information.
Design System
Primary
Colors
The main brand colors.
Secondary
Colors
Supportive colors used for signals.
Tertiary
Colors
Supportive colors used for signals.
Helvetica Neue
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890
!@#$%^&*()
Roboto
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
1234567890
!@#$%^&*()
Design by: Mimi Bancod Buan, Miguel Gaspar, Gianelle Leger, Sophie Tatarchuk
Course: CT 304 Design Systems for UX and UI
Professor: Christie Shin
Disclaimer - Please note: This classroom project was created for the course “CT 304 Design Systems for UX and UI.” This is purely for educational purposes and I do not claim any textual information and/or photos.
