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 used the most, only complicates my journey.

There are some basic principles that should be relatively considered to understand the way the app was designed. So I decided to take the app apart, implement the principles of user experience learned in class, and redesign it for my final project.

PROBLEMS

01.User wants the fastest, most reliable way to get from A to B.

02.Poor design and complicated to navigate.

03.Routes, Bus Stops and Origin & Destination are sorted numerically which makes hard to understand it.

04.Time estimates are skewed since they don't include more details about bus reliability.

SOLUTIONS

01. Prioritize route options by dedicated search bar which affords searching for an origin location and destination, instead of separating them by list of numbers. 

02. Have algorithm include geolocation real time data.

03. Offer an easy mode to buy and view tickets.

04. Include a route mode preference section which will assist users tracking their bus.

Before I started any sketch, I looked at Transit App, City Map and Uber for some inspiration, and I took particular features which I think are essential to make a Transit App functional such as geolocation map, route details, payment method and transit line colors.

USER FLOW 

The user’s goal is to find out 3 easy steps when they want to dislocate from A to B.

01. The best and fastest route to complete your trip.

02. The nearest bus stop accordingly to your current location and route.

03. More information about bus schedule, time arriving and trip details.

 

Based on this information I could accomplish the following features of the home screen.

 

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

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

04. Bus tracking system which allows user to track bus location accordingly their preferences.

05. Detailed information about favorite route peeking from the bottom.

Here is my updated concept of the home screen:

BUYING TICKETS 

Here are some of the issues which get users disappointed while buying a new ticket. 
01. Popping up a screen asking login and password.

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

03. Adding the credit card code for every purchase.

 

Little details which makes the process more difficult for daily uses.

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

 

Here are some changes which I made for new screens.

 

01. The App calculates automatically your interstate zone according location and destination chosen.

02. Once your add your credit card information, you will be able to save it for next purchases.

03. Adding promotional tickets packages for daily commuters. 

ACTIVATING TICKETS 

For "My tickets section", I realized how confused is to identify each route ticket on the list. Sometimes you can active the wrong ticket route when you're late or on a rush.

 

I thought it would make more sense in terms of identification to include colors to transit routes. When the user goes through tickets section, he/she can have an accurate perception of each route as well as how much tickets they have left.

The Screens would look something like this:

When the user taps on the ticket to active 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 concept created for transit line routes.

 

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