Real-time location to simplify your commute.
ETA is a UX student project that focuses on the MTA public transit system—the bane of existence for most New York City commuters. This project was completed before MTA's own SubwayTime app and site were launched.
the challenge
For NYC subway commuters, 2017 was a nightmare. Constant delays, fires, and malfunctioning trains haunted the subways. Unfortunately, fixing the system is impossible, but the correct app could help make the ride more bearable.
For NYC subway commuters, 2017 was a nightmare. Constant delays, fires, and malfunctioning trains haunted the subways. Unfortunately, fixing the system is impossible, but the correct app could help make the ride more bearable.
Commuters need a way to track real-time locations of trains and to be informed of issues that may affect their commute so they can travel efficiently.
"I would think that I was lucky that day if my commute ran smoothly, not that the MTA was actually doing something right." —Pearly
the competition
Many apps pertaining to the MTA already exist. I tested tools that came up often in user interviews or were officially released, promoted, or sponsored by the MTA at the time of this project.
Many apps pertaining to the MTA already exist. I tested tools that came up often in user interviews or were officially released, promoted, or sponsored by the MTA at the time of this project.
To differentiate ETA from existing apps, I excluded the ability to plan routes. I felt it was safe to exclude since my interviewees always circled back to Google Maps to plan commute routes.
While doing comparisons, I found that most apps were overlooking the ability to check locations of en-route trains and excluding social media features. Social media seems irrelevant to commuting, but through interviews, I learned that some commuters resorted to platforms like Twitter and Reddit for what they consider more reliable and relevant information. During 2017, "#WeTheCommuters" was a trending hashtag for commuters to share or read up on MTA problems.
While working on this project, the MTA was in the midst of installing countdown clocks and creating their own native app/website for tracking subway times. Since their app (SubwayTime) was completed after I completed this project, it didn't make it into my competitive analysis.
"Delays are inevitable. There's no point in planning ahead." —Nari
The insights
research goal
Learn about the problems commuters experience when commuting via the MTA subway system. Find out what are the positives and negatives, what the common issues are, and learn how commute schedules and habits may affect travel plans.
research goal
Learn about the problems commuters experience when commuting via the MTA subway system. Find out what are the positives and negatives, what the common issues are, and learn how commute schedules and habits may affect travel plans.
Affinity Map
I organized my research findings into an affinity map broken down into common themes that interviewees spoke about.
I organized my research findings into an affinity map broken down into common themes that interviewees spoke about.
research highlights
• A number of commuters have multiple start/end points due to varying schedules
• Service changes (planned or not) are often communicated poorly and difficult to understand
• Crowds and delays go hand in hand
•Commuters compare the effort vs. the reward when considering things like transfers and re-routing due to construction etc.
• A number of commuters have multiple start/end points due to varying schedules
• Service changes (planned or not) are often communicated poorly and difficult to understand
• Crowds and delays go hand in hand
•Commuters compare the effort vs. the reward when considering things like transfers and re-routing due to construction etc.
The persona
I choose to focus on a specific audience since I eliminated certain features from the ETA app. An obvious persona would be a frequent commuter with a routine and set schedule. Instead, I created a persona that embodied the common issues but also addressed an issue found in my interviews, this persona commutes between multiple boroughs with an unstable work schedule.
I choose to focus on a specific audience since I eliminated certain features from the ETA app. An obvious persona would be a frequent commuter with a routine and set schedule. Instead, I created a persona that embodied the common issues but also addressed an issue found in my interviews, this persona commutes between multiple boroughs with an unstable work schedule.
The process
feature prioritizationTo create an app that had the ability to solve the proposed problem, these were the key features that I deemed necessary to include:
• Geolocation
• Arrival times
• Real-time location
• Status updates
• User reports
• Search
• Custom notifications
User flow
Here is a user flow of basic actions that can be carried out when using the ETA app. Users can search, check arrival times, service changes and commuter issues. While conducting user testing, I discovered a shortcut existed to check on service changes from the main screen by simply transforming graphics I already had into tappable buttons.
Here is a user flow of basic actions that can be carried out when using the ETA app. Users can search, check arrival times, service changes and commuter issues. While conducting user testing, I discovered a shortcut existed to check on service changes from the main screen by simply transforming graphics I already had into tappable buttons.
As seen below, the green path is the original path the user would take to find the service changes screen while the blue path is the shortcut which is one tap less than the original one.
Sketches
From the start, my sketches remained mostly unchanged. I found a clean format that worked well in presenting the information and stuck with it. The biggest challenge during the sketching stage was to create a user-friendly screen that had many forms.
From the start, my sketches remained mostly unchanged. I found a clean format that worked well in presenting the information and stuck with it. The biggest challenge during the sketching stage was to create a user-friendly screen that had many forms.
wireframes
While there weren't many changes when I did sketches for the screens, I ended up creating multiple iterations when I started wire framing. I went back and forth on the navigation menu and user flow as I conducted user testing with the medium-fidelity prototype. Some wireframes below show menu bars that links to screens that were cut from the final version.
While there weren't many changes when I did sketches for the screens, I ended up creating multiple iterations when I started wire framing. I went back and forth on the navigation menu and user flow as I conducted user testing with the medium-fidelity prototype. Some wireframes below show menu bars that links to screens that were cut from the final version.
User testing
While I gained some useful feedback from user testing with a medium-fidelity prototype, the MTA system is so rooted in color coding that a high-fidelity prototype with the inclusion of color drew better feedback.
While I gained some useful feedback from user testing with a medium-fidelity prototype, the MTA system is so rooted in color coding that a high-fidelity prototype with the inclusion of color drew better feedback.
The common issues that came up during testing centered around non-interactive vs. active elements, requests for a more visual representation of information and confusion due to wording choices.
There was also great feedback on how the user flow doesn't quite work as expected based on the bottom menu but I found that in order to incorporate that change the whole structure would need to be reworked and that the app would become significantly different and more complicated.
"We shouldn’t be experiencing this in 2017 when we have so much technological advancements around us. The MTA system is so far behind other countries—being the oldest system in the world isn’t an excuse." —Alice
The vision
Visual Design
For the visual elements, I stayed true to the MTA style that is clean and minimal. Their original elements are already so iconic that it only makes sense to carry it through the ETA app so users can clearly make the correlation between what they are viewing on the app and what they are experiencing while commuting.
For the visual elements, I stayed true to the MTA style that is clean and minimal. Their original elements are already so iconic that it only makes sense to carry it through the ETA app so users can clearly make the correlation between what they are viewing on the app and what they are experiencing while commuting.
prototype
Below is a walk-through of the ETA app prototype. A live version is also available at: https://invis.io/DEEGYDV5S
Below is a walk-through of the ETA app prototype. A live version is also available at: https://invis.io/DEEGYDV5S