top of page
FINAL PROJECT
UX DESIGN COURSE - NJ TRANSIT APP

 

Transportation apps have dramatically changed the way people get from A to B. I always use my phone to assist me on my trips, as a commuter or even as a tourist. Ironically, NJ Transit’s app, which I use the most, only complicates my life as a commuter. So I decided to take the app apart, implement the principles of user experience learned in class, and redesign it for my final project.

PROBLEM STATEMENT
Everyone knows taking public transportation could be most of the time a stressful and frustrating task depending on the time of the day and weather conditions.

Some of the transit apps offer different types of features. However, none of them are 100% accurate, and tasks like planning trips, checking time schedules, and purchasing tickets are poorly implemented or spread across multiple screens which wastes so much time and energy.

Here is the main statement:

“Commuters need an app which helps them to plan and organize their commuting in an easy and reliable way.” 

Problem-statment.png

PROJECT DESCRIPTION

Design a transit app that helps commuters choose the best route based on accurate data; avoiding delays, crowds, and other common disruptions and taking time—and stress—out of daily commutes.

MAIN FEATURES

SPEND LESS TIME WAITING

Check live tracking bus and train arrivals, so you know if you have time to get a coffee.

BEST ROUTE OPTIONS

The app will help users determine the best route with live status, delay alerts and real-time updates.

EASY PAYMENT METHOD
 

You can buy bus tickets and refill metro cards on the same platform using your credit card or Apple Pay.

DESIGN PROCESS

We ran 3 weeks of design sprints based on the design thinking methodology, which includes 4 stages: 
Empathize, Define, Ideate, Prototype.

MY ROLE

I've conducted all steps from user research to final prototypes.

Interview-01.png

USER INTERVIEWS

I interviewed people from ages 24 to 32 who use apps such as NJ Transit, Google Maps, City Mapper, NY MTA to commute from NJ to NY.

KEY QUESTIONS
Here are some of the relevant questions asked during the interview that helped me to have a better understanding of the user needs and pain points.

 

- When you are on your trip, are there any challenges you face accessing public transportation?

- What are your goals and needs using the app?

- What do you dislike about the app? Why?

- What kind of improvements could be made to make the app easier or better for you?

PAIN POINTS
List of the user pain points in priority order:
- Inaccurate data
- Lack of route options
- Poor design and usability
- Payment method

INSIGHTS
Users expect that bus schedules, time, and alerts will be accurate so they can plan better their commute during any time and weather conditions. In addition, they also expect to have a friendly transit app platform that allows them to complete basic daily tasks easily.

Insight.png

USER PERSONAS
Two personas were created to understand their experiences, behaviours and goals.

Persona-Lauren.jpg
Persona-Justin.jpg
TransitApp_IA+UserFlow-2-01-01.jpg

INFORMATION ARCHITECTURE

USER FLOWS

TASK ONE
Creating an account

TransitApp_IA+UserFlow-2-02-02.jpg

TASK TWO
Planing a trip

TransitApp_IA+UserFlow-2-04-04.jpg

TASK THREE
Buying tickets

TransitApp_IA+UserFlow-2-03-03.jpg

WIREFRAMES + TESTING PHASE
I started creating wireframes through Marvel to map out the app functionalities and validate user flows.

wireframes.jpg

PROTOTYPE DESIGN

MAIN SCREEN + FINDING A ROUTE
Here are some of the features that were applied to the prototypes. 

01. A dedicated search bar that affords searching routes by location/destination.

02. A large map that spans the entire page showing the bus stops close by.

03. Bus tracking system which allows users to track bus location according to their preferences.

04. Detailed information about your favorite route peeking from the bottom.

Group 2.png
Group 2 Copy.png
Group 2 Copy 2.png

BUYING TICKETS 

Here are some of the issues that users were having while trying to buy tickets. 
01. Popping up a screen asking for login and password.

02. Selecting Interstate Zone in order to proceed with ticket purchase.

03. Adding the credit card code for every purchase.

Having these problems in mind, I redesigned those steps making them as easy and clear as possible for users concluding their ticket purchase. 

 

Here are some improvements that I made to the new screens.

01. The App calculates the user's interstate zone according to the location and destination chosen.

02. Once the credit card information, the user will be able to save it for the next purchases.

03. Adding promotional ticket packages for daily commuters. 

Group 2 Copy 3.png
Group 2 Copy 4.png
Group 2 Copy 9.png

ACTIVATING TICKETS  

For the "My tickets' section", I realized how confusing it was to identify each route ticket on the list. Sometimes you can activate the wrong ticket route when you're late or in a rush. I thought it would make more sense in terms of identification to include colors in transit routes. When the user goes through the tickets section, he/she can have s better visual perception of each route as well as how many tickets they still have left.

The screens would look something like this:

Group 2 Copy 6.png
Group 2 Copy 7.png
Group 2 Copy 8.png

TICKETS ACTIVATED  

When the user taps on the ticket to activate one of his/her trips, the bus ticket will expand to a new screen which will have to be checked by the bus driver. For the bus ticket screen, I focused more on the design using the same color palette created for transit line routes.

 

As a result, we have a better visual design making it easier for users and bus drivers to identify each bus route ticket.

Group 2 Copy 5.png
Group 2 Copy 10.png
Group 2 Copy 11.png

LEARNING OUTCOMES

Working on this project, I learned how important is to make and conduct user interviews in order to have a better understanding of the user pain points and your experiences. Also, how important is to have multiple feedbacks in the testing phase to give more clarity when I was trying to improve the functionalities of the app.
 

I would invest more time going deeper on wireframes and testing phase until getting different types of scenarios validated and then move forward to final prototype designs.

bottom of page