Improving the mobile commuting experience

User Research | Interaction Design | Prototyping | Visual Design
5 min read
Client
NJ Transit
My Role
Lead Research & Design
Device
Mobile / iOS
Duration
8 Weeks
Overview
NJ Transit is New Jersey’s public transportation corporation. It is the nation’s third-largest provider of bus, rail, and light rail transit and provides nearly 223 million passenger trips each year.

Everyday, commuters rely on NJ Transit's app to buy tickets, view schedules, and add convenience to their daily routine, but found the experience to be frustrating.
The Problem
Customers complained that the app was difficult to navigate and lacked critical information to assist with their real-world commuting experience.
The Mission
Reposition NJ Transit's information to reduce customer friction and simplify common task flows and encourage daily use.
My Role
Working independently, I led the research and design of this concept for an iOS mobile app.

UX Analysis

I oriented to this product by mapping out the user task flows and making notes of potential points of friction.

Key Insights

  • The Home screen created anxiety by immediately asking customers to select from a list of unclear navigational terms.
  • A secondary navigation listed 12 options - eight were used for ticketing or scheduling.

User Interviews

I conducted interviews with eight NJ Transit commuters to learn their frustrations and identify areas for opportunity.

Participants had various commute times, travel methods and experience using NJ Transit’s app.

Key Insights

Commuters want better visibility of the status of their rides

Garrett
Hoboken, NJ
"There are no alerts in the app. I’ve tried using their Twitter feed, I’ve even tweeted them before and they never responded."
Vanessa
Hawthorne, NJ
"I don’t like how I won’t know if there’s a change in service. There was a massive crash in Hoboken, and there was no information about it in the app. I had to check the mobile site."

"The home screen just shows a menu. Why can’t it accommodate me? Why doesn’t it know the bus I use every day?"

– Erika, Rutherford, NJ

Immersion

I purchased train tickets from New York Penn to the Meadowlands. This route has only two stops, but requires a transfer.

I experienced waiting for the off-schedule train and commuting experience as a customer.

Key Insights

Commuters want better visibility of the status of their rides

  • Purchasing tickets required a lot of steps and was confusing to pull it back up.
  • After boarding, the app didn’t add much to improve my commuting experience.
MetLife Stadium from NJ Transit station

Meet Erika

The Power User
23
UX Designer
Glen Rock > NYC
icon of a bus and car
Train
Erika commutes daily from Glen Rock to NYC for work. She rides the express train into the city and uses the app to check its status when she's waiting at her stop. Even though it's 2 minutes away Erika knows that's more of an estimate than an exact update.
She checks her Instagram, emails, and messages to pass the time – suddenly, the train arrives and Erika panics to find her ticket, but she's happy it's only 6 minutes late today.
Although Erika finds the app helpful, she thinks getting to the information she uses most takes too many steps.
Frustrations
  • inexact status information causes Erika anxiety
  • Poor UX makes it difficult to quickly access her ticket
Needs
  • Visibility on the location of her upcoming train
  • Easier access to her tickets

Meet Alanna

The Planner
40
Sr. Media Buyer
Clifton > NYC
icon of a bus and car
Train
Alanna makes the daily commute from Clifton to NYC for work. She always commutes by train but alternates between two lines at two different stations — depending on which train is arriving sooner.
Alanna relies heavily on the app for its ability to view train schedules, but during rain and snowstorms, she notes that the app doesn't provide updates about changes in service. She checks the mobile site and twitter for information, and sees an advisory but it isn't informative enough to help her decide which line to take.
Frustrations
  • Digging through other apps for travel advisories
  • Advisory information doesn’t help her decide how to commute
Needs
  • Easier access to travel advisories
  • More status visibility to help her make informed commuting decisions

Meet Rob

The Novice
34
Revenue Manager
Waldwick > NYC
icon of a bus and car
Bus
Rob commutes daily from Waldwick to NYC using a paper monthly pass that his employer mails him each month as a benefit.
He recently downloaded the NJ Transit app and uses it to check bus schedules, but wishes he could buy and store his pass on his phone instead of carrying it around in his wallet, not realizing that he can!
Although Rob uses some functionality for its intended purpose, his inability to navigate the interface and understand its features limits his use of the app.
Frustrations
  • UI clutter conceals useful ticketing functions
  • It's unclear how to purchase digital tickets
Needs
  • Clearly stated ticketing options
  • An intuitive way to buy tickets in-app

Fixing the Navigation

First I needed to solve the navigation issue. I took inventory of the app and cut the navigation down from 16 items to 5.

Outcome

A 5-tab bottom navigation bar that focused on utility was added for clarity and accessibility.

Solutions for Erika

Erika needs quick access to the tools she uses every day, such as viewing the status and location of her train and easy access to her ticket in case her train is approaching.

Outcome

The home screen menu was replaced with a dashboard, so Erika could easily see the status of her saved routes and coach detail screens with GPS location, upcoming stops, directions for transfer and ETA to help anticipate arrival time.

Solutions for Alanna

Alanna was frustrated she didn't receive alerts for changes in service and transit advisories weren't easily accessible to help her decide how to plan her travel.

Outcome

A page for Alerts was added to help Alanna easily access the change-of-service information relevant to her travel.

Solutions for Rob

Rob always carried his paper monthly bus pass because he wasn't sure how to buy or use digital tickets using his NJ Transit mobile app.

Outcome

Ticketing functions were simplified into a single page for Rob to purchase tickets and access his monthly pass.

Lo-Fi Prototyping

I built a low fidelity prototype to get a feel for the task flows and receive internal feedback.

Outcome

  • Feedback on the navigation and layout was positive.
  • Questions about how the map view worked came up
  • Headers were confusing
Open Prototype

Hi-Fi Mockups

I increased the fidelity of the wireframes to more accurately reflect the look, feel and features.

Hi-Fi Prototyping

A Hi-Fi prototype was made to validate:

Outcome

  • Map views were clear and informative in communicating the train’s status and location.
  • Navigation controls and iconography were clear and effective.
  • Task flow times for accessing tickets and alerts was reduced.
Open Prototype

Testing

I conducted a moderated study with 5 participants and sentiment was positive!

Outcome

  • Participants loved the train pins on the map, showing its location in real time.
  • All were able to easily navigate the app to find tickets and alerts!
  • But some participants couldn’t tell which direction the train was going from the pin.

Final Designs

I added a label to the Train Pin to make it easier to correspond with the train’s list view.

I also cleaned up some UI elements for a more consistent visual experience.

Validation

I found further validation in NJ Transit's app redesign, which was released in September 2017. Some of the new features that NJ Transit rolled out included:

  • A new home screen dashboard that displays live service schedules
  • In-app change of service alerts
  • New content and information architecture to improve visibility and conversion of ticket purchases.

Check out some other projects

SiriusXM Alexa case study
Adding Pandora Stations to SiriusXM's Alexa Skill
Recipe Page Enhancements 🔒
Andrew Gatto © 2025. All rights reserved