A new user-friendly interface for the MTA LIRR.
MTA LIRR
Background
The MTA Long Island Rail Road TrainTime App is the official source of information for LIRR customers and provides LIRR trip search and fares, station information, service status, social media links and MTA accessibility.
ROLE
Designer and Researcher
DURATION
2 months
SKILLS
Sketch
Invision
Adobe Creative Suite
Usability testing
Competitive Analysis
Information Architecture
Journey Mapping
User Interviews
Process
Current experience
For the past four years, I have been commuting from Long Island to Manhattan. As a regular commuter, I frequently use the MTA LIRR Train Time application to check train times arriving to and departing from Manhattan. From the time I first downloaded the app in 2014, there has not been any updates or improvements.
I have voiced (along with many other exhausted commuters) how I wish there was a way we could improve this service. Then it clicked. Why not improve the MTA LIRR app and create new features that could resolve the issues?
Selecting a train time
Ordering a ticket
User Research
As an avid user of the MTA LIRR Train Time app, I noticed that the design is outdated and the interactions within the app are confusing to new users. To come up with solutions for these issues, I decided to research what made the app successful and what it was lacking for users.
First, I conducted a full-site audit, going through the app page by page as well as read reviews of the app to get insight on the more users. Next, I went through the navigation, laying out all of the categories to see what patterns, themes, and insights could be improved.
Using the data I collected, I conducted individual interviews to confirm if these were the issues I should be focusing on.
Interviewed 10 people
ages (25-54)
Task: Order a ticket and select train times
Synthesize findings and identify pain points
Insights
I took note of their suggestions and the features they wished to see in the new design. This data helped me expand on existing ideas as well as confirm the 3 main pain points that was discussed:
Iteration 1
My first idea was to create a log-in page where all your information would be stored. This would include credit-card information (for ticket purchases), the train lines you take, and so on. This could be customized to your liking.
However, as I started to conduct interviews and reviews on this design, most users didn't like having a log in. They were worried they would get logged out and would not be able to get the train times immediately. Most wanted immediate information as they open the app and thought logging in was an unnecessary step.
Log in
Iteration 2
After the feedback on the login page, I went back to create a main page that was informative, but not too overwhelming. The initial idea was to have an interactive map where you could select each station you want to depart from and arrive to. There would also be specific buttons to direct you to other pages and further information.
This design was successful for the younger audience and had a high user engagement rate, but ages over 45 had a hard time navigating through the app. The older audience had preferred being able to type in the information - they struggled when it was too interactive.
Since this app is being used for all ages, I decided to combine the feedback from the last two iterations to create the final design
Interactive main page
Final sketches
Along with my hypothesis, I took this opportunity to revisit the IA of the content within the app. Specifically focusing on the layout of the icons, visual display of the times and the hierarchy of information. I noticed in my research that a majority of users had a hard time finding a solution to the tasks given. When I asked the users why they had a hard time finding these solutions most felt that the language and structure of the app made them feel overwhelmed.
By gathering all the data from the interviews, user personas, wireframes, and sketches these were the design solutions I thought could help anyone get through the MTA LIRR system with ease with these solutions:
Information Architecture
Cleaner Userface
I re-arranged the layout to make it easier to decipher the specific tracks, time of arrivals and additional information you would need to know in a short amount of time.
Interactive Map
The new map feature is designed to help people locate the closest train station. As soon as you open the app it will indicate where you are and calculate your distance to the closest station.
Alert Buttons
You can easily find alert buttons on the tabs of the Train lines or you can click it on your interactive map! The alerts will create a push notification of that train station and inform you of delays and other updates.
Live Stream
A new feature that was considered helpful was to add a live stream of the train. If you are at the station, it will tell you the train's location in real time - including how many stops away and when it is expected to arrive.
The first/last stops on this line are Babylon and Penn Station. This page will appear to users when they want to know the train times going to and from Massapequa Park (before entering their end destination). You can toggle between the tabs only if you are interested in trains going to Penn Station or trains going to Babylon.
Depart/Arrival Navigation
One of the major issues that people discussed during interviews was the Select Date/Time page - the buttons on the page weren't clear to users.
7 out of 10 clicked the “now” button once they were finished placing their date and time, BUT this action resets the time to the current time. Most people had interpreted this as the final step after they put their time in; this is frustrating for the user since they will have to input their time once again, delaying the process.
I wanted to design an easy way for people to interpret how to put in the times they desire. I created a simple Complete button at the bottom with the date and time you select below. It will be highlighted in blue to show the final date and time selected.
E Ticket Merge
A new feature that the MTA has created in the last year is MTA e-tickets. This is on a separate app that you must download. Since the current MTA LIRR Train Time app is not updated, it is very difficult to find this new app unless you knew about it beforehand. I wanted to incorporate a way to connect to the e-ticket app so people could directly buy their tickets with the time they want.
With the new interface, I have highlighted a one-way ticket price with a button to indicate if you want to buy the ticket for that time. People will simply have to swipe on the bottom, which would re-direct them to the app and connect them to where they can buy the tickets.
Design goal
Visual treatment
-
Add visuals to build user trust and reduce cognitive overload
-
Bring content to the forefront and eliminate unnecessary steps
-
Change language of the application to help users understand tasks better
Once we finalized the flow, we researched existing travel applications to get a sense of current design trends. We made sure that our redesign was created with the most recent iOS UI conventions in mind.
Outcome
I started this project as a frustrated commuter wanting to improve upon the MTA LIRR service. My goal was to create design solutions for the app in hopes that it could fix those issues. However, after interviewing and finding different design solutions to these problems, I found myself wanting to incorporate more changes. There are so many ways to enhance this application to help make it easier and more enjoyable for users.
Having traveled to over 20 countries, I've used all modes of transportation and countless apps to go along with it. Every time I return back to New York, I question why we haven't adapted to these new trends and ideas - especially when this is one of the most popular cities in the world. I want to expand more on this app with the hope of helping people travel on the LIRR with ease.