NJ Transit Mobile App Redesign — Jacqueline O'Connor

OVERVIEW
Reimagining the NJ Transit Mobile App Experience

NJ Transit is the nation's largest statewide public transportation system that provides more than 944,000 weekday trips through bus routes, light rail, and rail lines. Based on reviews from the app store, the NJ Transit app (version 2013-2019) had a 2.1 star rating out of 5 with a range of complaints.

In response to this problem, a friend and I redesigned the mobile app using research and insights that we collected from surveys and several rounds of user testing. Through surveys, we discovered which features to prioritize, how the app was used, and what frustrated users the most. Our goal was to simplify the ticket booking process and to prioritize the features that transit users value the most.

TEAM 

Jacqueline O'Connor,  Sara Passafiume
  
MY ROLE

Co-Designer &  Co-Researcher

THE PROBLEM
The 2013-2019 version of the NJ Transit app is outdated and unorganized, leaving many of its users frustrated.

THE SOLUTION
A simplified mobile ticket booking process for NJ Transit passengers. My team and I redesigned the mobile app using research and insights collected from surveys and user testing.

PLANNING

Setting design goals
  
 The NJ Transit mobile app has poor visual hierarchy. It's also confusing to navigate and offers very few options for users to personalize account settings. My teammate  and I decided to recreate the experience. We set three main goals, in efforts to prioritize the most important features.

1.

Improve (and simplify) the ticket search/checkout process.

2.
Give riders a personalized experience.

3.

Allow offline access, giving users the ability to download/share schedules and tickets.

STRATEGY

Our approach

1. Break down the current experience: In this phase, we analyzed the current version of the NJ Transit app. We explored the app to get a feel for the user flow and identify potential areas for improvement.

2. Research: In this phase, we conducted research which helped us to identify users and their pain points towards the current experience.

3. Brainstorm: Using findings from our research, we began sketching solutions that addressed the frustrations that users have while using the app.

4. Prototype and test: We created several versions of low and mid-fidelity prototypes and tested often to reach the best possible solution.

5. UI and Visuals: In this phase, we focused on making the visuals consistent and intentional throughout the app.

Getting familiar with the interface
  
We began our process by going through all the user interactions within the existing version of the NJ Transit app to get a better understanding of the experience. Below are a few of the most commonly used screens in the app. Listed below the screens are the UX/UI concerns and proposals that I had.

DESIGN CHALLENGES

Challenge 1: At first glance, we noticed that the home screen has a lot going on, lacking information hierarchy. Certain things like "Departure Vision" are unclear to first time users.

Challenge 2: The hamburger menu in the top left corner felt clunky and out of place. When you tap on the menu, you're greeted with much of the same information that's found on the home screen. For first-time users, Departure Vision, Trip Planner, and Train Schedules can all seem a bit overwhelming.

Challenge 3: The banner at the top of the screen with the oversized NJ Transit icon serves no real purpose from a UX standpoint.

Challenge 4: The interactive carousel at the bottom of the homepage is cluttered and overwhelming.

Challenge 5: "Enter Station Name" should not be the only search option on the Departure Vision screen. Some users might not know the name of their station.

Challenge 6: The "Previous Tickets" button on the Buy Ticket screen is awkwardly floating by itself. There is no clear call to action on this screen.

DESIGN OPPORTUNITIES

Opportunity 1: "Favorite Stations / Stops" has potential, especially for frequent users of the app, but the placement of this feature needs to be reconsidered.

Opportunity 2: Simplify the content found in the hamburger menu and redesign the icons to better communicate their purpose. A bottom navigation could work also work if the information is condensed into appropriate categories.

Opportunity 3: Redesign the "Purchased Ticket(s) Screen and give users the ability to download/save the ticket to their camera roll and share with family/friends.

Opportunity 4: Use the NJ Transit colors to categorize and highlight important information throughout the app.

Opportunity 5: Remove the "Previous Tickets" button from the "Buy Ticket" screen. Replace with a collapsible menu that displays the users activity and previous ticket purchases/ticket history.

Understanding user motivations

USER SURVEYS

We used Survey Monkey to create two questionnaires, which would help inform our design decisions. They included questions about demographics, commuter behavior, and app usage. Both questionnaires were shared with friends, family members, and groups on Facebook.

REVIEWS

In order to understand the experience from our customer's perspective, we spoke to students who are familiar with the NJ Transit app. We also used gathered customer reviews from Reddit and through the App Store.

DESIGN OPPORTUNITIES

1. Notify users on the status of their train. When trains are experiencing issues such as delays or cancellations, users will receive updates.

2. Build a homepage with navigation that consists of clear and straightforward icons.

3. Give users the option to save purchased ticket(s) to their camera roll. In the event that the app is down, users will be able to access their ticket(s) through their camera roll.

4. Create additional layers of customization. Give users suggestions for transportation routes based on their started and ending locations.

Target audience

Our research findings led us to identify two types of user groups that are especially important to keep in mind when redesigning the app experience. The first being an occasional NJ Transit customer and the second being a frequent NJ Transit customer.

IDEATION AND WIREFRAMING

Proposed design solutions
  
Using insights from our research, we began brainstorming different ways to address the complaints that users have with the existing version of the NJ Transit mobile app. An initial low-fidelity prototype of two major user journeys was created.

What we learned from the paper prototyping sessions:

1. Just using a phone number to sign in/create an account is not enough.

2. Users wanted to see onboarding screens. They also suggested we work in some illustrations.

3. Users also mentioned how they would like to have the option to set up a profile and customize their payment settings.

Wireframing
  
Following the paper prototyping sessions, we began wireframing in Figma. We were careful to keep in mind the feedback that we had received during the paper prototyping sessions and continued seeking feedback while structuring the new layout.

Screen interactions

Animations by Sara Passafiume

Outcome

Key takeaways from the NJ Transit mobile app redesign:

The response we got from our users was that it was much easier and more intuitive to search for, and purchase train tickets in our redesigned experience. The visuals really helped to clear confusion that users had from the original version of the NJ Transit app.

Going forward, we plan to further our research and conduct additional rounds of testing to see how we can take our redesign to the next level.

PREVIOUS CASE STUDY

This case study focuses on the creation of a 360-degree video that takes users on a journey through the former home and studio of the world renowned architect, Michael Graves.

NEXT CASE STUDY

This case study focuses on the research and design of a mobile app that uses AR (Augmented Reality) to create interactive experiences based on content from the book Never Built New York.

NanoSprout – Smart media use in the digital age

MGC Sync