This project is 2 weeks redesign exercise at Intrepid Pursuit.
I decided to improve MTA TripPlanner+, which is an iOS app provided by MTA.
The app is mainly for setting up the trip plan ahead of time, getting route information and train schedule.
My Role
UX/UI Design
Problem Statement
TripPlanner+ tries to provide MTA riders with faster, safer and more comfortable travel experience,
but it does not satisfy the user's needs to optimize the commute in different situations
and does not deliver information in a way that is legible and clear.
​​​​​​Original Screens
First one is Home page(Custom Planner), you can set from/to location, time and accessibility option.
Second one is Route Detail, which is a result for direction search on home screen,
Third one is Schedule of train service, 
Last one is Service in Area, which is about working train service near my location.

There are lots of useful information for users, but it’s not well organized and presented in a clear way. 
It provides NYC map too, but it doesn’t work properly and doesn’t show the updated info. 
So for this project, I tired to combine some features and screens, and also suggest new feature for users to have better experience. 

​​​​​​​     ●  Goals

          - To make her commute efficient, predictable
            and manageable
          - To find accessible stations near her

     ●  Frustrations

          - Too many texts with no hierarchy
          - No interactive map
          - Lack of live update on the service
          - Difficult to find accessible stations near her
I set up the persona for understanding more about the user.
The lady here is mother of two children, and works at Manhattan commutes by subway from home.
Her goal is to make her commute efficient, predictable, and manageable.
And to find accessible stations near her when she brings her children. 
But as all New Yorkers may know, it’s often frustrating. Especially when she uses this app.
There are too many texts, No interactive map, Lack of live update on the service, and difficult to find accessible stations near her.
App Flow
To solve the problem, I re organized the features and screens. 
Top three screens are about searching the route and getting route result, 
Bottom two screens are new features I suggest, which are metro card management and travel tips for selected route.
I chose these screens based on our persona’s frustration.
I visualized text information by adding map to screen, 
and figured out what information is important for users to make their trip efficient.
Style Guide
I created the style guide based on their existing brand guidelines.
I picked two colors, blue and yellow, as a primary palette
and kept the secondary palette as is, since each color represents the subway line.
Helvetica became a symbol of MTA over time, I thought it make sense to keep this font to extend a branding experience.
Final Design
Before, it didn’t have any map, all you can see was text and boxes. But now it has a map with MTA service information.
I tried to find out how I can make this app MTA specific. Because most of third party apps like google map, apple map
have a map in the landing page, which makes it easy to be similar to them. 
Information on the map
In more detail, the things I considered was 
     - Stations near me & Suggested route
     - When next train comes 
     - Subway lines on the map
Also, in case internet is not connected, you can access to the static MTA map in the hamburger menu. 

MetroCard button
     - Users can check balance at home screen

​​​​​​​Suggested route from your location
     - Because main target user is subway commuters in NYC,
        this app suggest the destination based on where users’ location.
        When you’re at home, it will show you the route to work, and when you’re at work, it will show you the route to home. 
     - I placed suggested route in thumb zone to make it easy to approach.
     - Add favorite destination for quick access, also recently searched destinations. 
Iteration of route summary box
For route summary box, I had to think about the edge cases. 
ex 1) what if I need to transfer 3 or more times?
ex 2) If there’s a lot of info, how I can put those in small box?
In this page, you can get detailed information about the route you chose. 
Represent accessibility option - I know it’s not for most of the NYC commuters but I thought I need to consider minorities too. 
Like the persona’s case, it is not only for the people with mobility issues but also for the people with the baby strollers or heavy luggage. 
Also, in other apps, it’s hard to know which station has an elevator.
The persona is a working mom and wants to find a way to get her children to daycare. 
And it’s hard for her to use stairs, she turned on accessibility option.
Then it shows her where the elevator is at the near station, and how to get there. 
And it also shows her detailed route information.
For Route Summary box, I tried to visualize travel length.
The rounded box shape for each transportation and line at the center represents subway and the rail
and the line between boxes means waiting time for train.
According to user research, users want information specifically related to current travel, something might affect their travel experience.
So I added train service status, detailed tips for transfer/exit and information about events outside.
I interviewed with some friends in NY to know what should be included in this page. 
There were many great ideas, but I decided to focus on circumstance that the user is in;
What user needs when he/she arrives at the station or in the train.
I think the most useful one here is Tips for transfer/exit. 
It tells users which section of train is the best for transfer or exit,
which side of train door will be opened, direction for transfer and which line and direction of the train users should take next.

Event outside section is for the case there’s big event that will affect the train service or travel experience.
Last one is metro card management page.
Before screen is grayed out since there’s no such thing in current app.
I suggested this new feature because I assumed our persona is too busy to care about her metro card balance,
so she occasionally has to wait in a long line for charging it.
Because of the reason above, I thought it would be great to add managing balance feature to the app.
Users can add money/time in the app, and it will let users know how many rides they can make with the balance.
Users can also add their registered card to apple wallet so that they can use it with NFC machine. 
I suggested this feature for the future, since MTA is installing new machine called OMNY at the entrance.
It will be installed at all subway stations until 2023. 

In Transaction History section, users can check how much money they spent this month and history of the payment.
​​​​​​​Original Screens
Redesigned Screens
What I learned through this project are
     - Defining clearly what the problem is
     - Practice for making the app an unique experience compare to competitors
     - Designing and suggesting the features don’t exist yet

Back to Top