MYmta Redesign
In this project, I redesigned and rebranded the MYmta app experience.
I focused on how I might create a frictionless user journey for looking up train departures.
My secondary goal was to make transit a safer experience.
User Research
I scraped all of the MYmta iOS app reviews from the top of 2022.
Common themes included:
- Inconsistent or incorrect data
- Train delays/alerts aren’t communicated clearly or at all
- Data loading issues, data disappearing, blank pages
- Confusion between transit direction (uptown v. downtown)
- Favorite stops are not persisted, shows errors
- Limited access to future train departures
- Weekend data is not accurate
- Ticket access
- Price of trips unknown
- Ability to purchase tickets not available
- Service advisories
- Link to webpage outside of the app or force quits
- Real-time map data not available
- Static map access requires internet connection
- Difficult to understand
- Navigation is complicated
- Copy quality is insufficient
Brainstorm
Elements of redesign to improve the user experience:
Surface brief and extended views of transit timetables
Expose OMNY information in-app (moving away from physical tickets)
Simplify navigation with floating “toast” UI
Make alerts easily accessible in-app & allow reporting
Show full stretch of a transit line with all stops in both directions
Indicate on-time and delayed trains
Market Research
I took inspiration from Citymapper and Transit App.
Although these apps organize their transit data differently, they both are clear and easily readable compared to MYmta.
They also surface nearby transit data immediately on app startup via a map or table view.
The first step was to decide the primary tasks a user would perform and synthesize these into user flows.
Solution
This is a complete overhaul of MYmta.
I restructured the UI to show immediate transit data, included more visual cues so the user understands how to navigate the app, and highlighted train departures and alerts.
The transit data is cleanly conveyed and easily readable.
The information that the user needs to access is provided for with minimal interaction.
I included a feature that allows users to report an issue to the MTA.
This crowdsourced data, once verified, can be used to immediately update users on active delays and situations.
MYmta 2.0 Prototype
Brief Summary:
- Tap “Where To?” to expose the trip planner flow
- Tap to auto-fill trip information
- Tap a trip to see it expanded
- Swipe the UI up to hide the map and view all directions
- Toggle the arrow to expand the train stops
- Tap the checkmark to begin trip
- Tap the flag to report an issue while on your trip
- Drag the UI upward to see nearby train stations and departures
- Click a station to see an expanded view
- Click a train line to see an expanded view of your nearby stop, all stops, and departures
- Tap the arrow icon to flip the direction of the train
- Tap the alert pill to show current alerts for that line
- Tap the menu icon to expose the menu
- Tap OMNY to navigate to omny.info (soon to be an app)
- Figma Prototype Link
While redesigning this app, I also refreshed the MTA brand identity.
The final logo uses Oswald as its typeface. This gives the brand a bold, grand, Gotham-like feel.
The surrounding arc and use of negative space represent a subway tunnel.
It has a modified slant to suggest the waning perspective of a train traveling through a tunnel.
The End
Final takeaways:
- The MYmta app experience is somewhat functional, despite data and loading issues
- This results in the app feeling choppy, inconsistent, and unclear
- By revamping the UI with clear call-to-actions, data visibility, and navigation elements, the app feels more approachable and reliable
- Adding in MTA-branded elements natively help make the app feel legit (instead of linking to MTA pages outside of the app)
- UI/UX has to work in tandem with data accuracy and software resiliency for a complete app experience
