I use the NJ transit train and bus for my daily commute to college. I use NJ transit app quite frequently to check schedules, re-purchase pass every month, and check bus schedules. I need to check same thing every day because of my travel at different times of the day depending on my class timings. 

The User Experience of the app, is quite frustrating for a new user as well as a regular one like me. In this case study I have identified the flaws in the app design for the android app. I have also re-designed the user flow for checking schedules for the train. 

Design Process

1. User Research 
2. Evaluated the Current Design
3. Selected a use case and a Scenario
4. Created low fidelity wire-frames

User Research 

 I talked to some people at the train station about their experience with app, asking them about how they use the app and what do they like and dislike about it.
I also did some research about it by studying the reviews on google play.
Following are some reviews from users on google play which clearly show a need to improve.​​​​​​​

Evaluating  the Current Design 

The NJ Transit app home page has a bunch of Call To Action buttons. These buttons actually increase an extra click for a regular user.

Upper area contains any alert messages and the bottom area contains favorite bus route updates which look like an excel sheet columns which is not a good design.

The scheduling for bus is not directly visible on the home screen, user can select that by navigating through the navigation drawer, which is the primary way of navigating to various screens in the app.

The overall look and feel of the does not look like a native android app as material design guidelines have not been followed.
This is the typical user flow for checking train schedule in the app. It involves around four steps. If a user wants to check the schedule for current time, it doesn’t quickly lead to the result.

The Trip Results page actually has 3 action buttons including switching the route, favorite it, and buy ticket. But the former two ones don’t look like buttons, first time user may not recognize them.

My Design Solution for checking Train Schedules

I have created a Bottom Navigation Menu which is very common in mobile apps. The bottom navigation provides a quick way for going over different pages without the need for going to home page again or opening the drawer for frequently used options.

The home page is the schedules page, which is good for any user who wants to buy a ticket or simply check schedules. 

Following the material design guidelines for android, I have used Tabs for train and bus.

User flow of checking train schedules on the app.

Simplified the process, and created design in accordance with android apps, giving a sense of familiarity to the new user. 
The ability to see the map, number of stations in between and approximate time to reach creates a better user experience for travelers.​​​​​​​

 Showing the functionality of saving schedule timings and a quick view on home screen. 

The My Tickets/Pass Nav item shows the "My Tix" ticket bought online, this is one of the most liked feature by the users as it allows passengers to buy ticket online and show it. People like it because they can even buy the tickets on the train if in a haste. The issue in the current app was it involved signing in every time until the user saves the credentials , so the ticket was not quickly accessible.

Final Thoughts

I have created only the the wire-frames and still need to work on the final designs. There are some flaws my design too, in the subsequent iterations i will be addressing those.

You may also like

Back to Top