NJ Transit App Has Finally Updated & It Still Hasn’t Solved Their Old Problems
For people who live in the NJ/NY area. We are all familiar with New Jersey Transit. Recently, (On Mothers Day) they FINALLY, updated their app. Personally, I was somewhat disappointed with this because I spent the last two months redesigning their poorly designed app as a way to enhance the user experience because of its MANY problems.
For those of you who don’t ride New Jersey Transit the most common way to purchase a ticket is through a kiosk on a platform or through the app. There are other ways to buy a ticket such as going to a teller window at any station or buying it on board with a surcharge fee from the conductor. When it comes to using the app there are (were? Don’t know as of yet) several pain points that frustrate users (such as myself). The most common is a disappearing ticket. After purchasing a ticket, you are given the option to activate it. Once this button is pushed, that is it–the clock counts down for 2 1/2 hours. During this countdown time, you have to patiently wait to see if the conductor will come around so you may show him your phone. This can be from anywhere of 5–40 minute, or not at all. When he or she gets near, you proceed to unlock your phone, but all of a sudden there is a spinning loading wheel of death. You start to panic because you know you bought the ticket and if they don’t see it, you could end up paying for another ticket on the spot. As they get closer and closer, the phone is still loading because it’s relying on an internet connectivity to show the ticket (Worst UX mistake you can make). It finally loads, in a moment of relief you show your ticket to them so they can punch a card to indicate your stop. It is one of many tragedies when it comes to the app. Another was just the visuals itself.
Upon playing around with the new update, I’ve come to find they only put a mere band-aid on it. When you first open it, you are welcomed with a newly designed screen. You have, Buy button, My Tickets, Quick buy, Schedule, and Trip Planner. Departure vision and my bus are also located at the bottom of the screen, somewhat out of place. However, nothing with the current UX best practices is being put into the design. As an example using the Butterfly effect (See Below) as mentioned in an Article by Samantha Ingram.
It looks as if the app was just designed to fix an eyesore of a problem from a visual point of view (See Below).
The Menu button is still the same, big clunky and out of place. In today’s UX market apps and designs are now shifting to the bottom menu style. This would make more sense from a UX point of view as the user’s thumb can quickly reach the main important, touching points. Just like Instagram with five icons at the bottom menu, NJ Transit should do the same.
They also place a large logo at the header of the screen which serves no user experience purpose but to say “Hey I’m a big F@cking logo.” There seems to be a dot below the logo to indicate you can swipe to another screen, but this is counter-intuitive since there are no other screens to swipe to–it shouldn’t be there.
Some people are visual people, not everyone processes information the same. What NJ Transit should have done is add a map as an opening screen. This will help the user see where a station is and from there can purchase their tickets.
In my wireframe below you’ll see I opened the app with a map and give the user the ability to search for a station. Once that station has been found and selected the user can see the times the train will leave and proceed to purchase a ticket. This eliminates the need to have a Train Schedule Button, or Trip Planner, it’s all done by search.Even in the search bar, I added two small icons to indicate switching between bus and Transit.
I focused on the bottom menu (Still in progress) the four main points as you would see on their original and updated app. I added a My Ticket icon, Map, Search for Stations/Trip Planner, and More. All these are within thumb’s reach. I felt these were the most important elements when using the app as all other aspects with either combined or eliminated.
After a user proceeds to purchase a ticket, they are taken to a payment screen. One of the biggest problems of the original application (and still happens now) you have to log in to access your payment information.
What happens if a credit card has expired? You have to fumble around to Re-Enter information? Why not use Apple Pay? Integrate the technology we have at our fingertips. Avoid using the login feature unless it’s gear towards Daily, Weekly, or Monthly Commuters.
One a ticket has been purchased a user should have the ability to see information regarding that purchase. Important information such as a Transaction ID number, A Confirmation, and the transit info regarding what you’ve purchased. If you activate a ticket, you should be warned to do so in a cleaner visual way.
The ticket itself was always a problem. Visually, it didn’t look appealing and made no sense. As stated earlier it would disappear and rely on service to return. What needs to happen for it to be successful and to eliminate panic among riders is for it to be opened in Apple wallet and animate the flashing color for the day or have it show up on your lock notification screen, that way, it’s accessible and easy to pull up. As you see below, I created a ticket that can be shown in the app, but I also have a mock up that you can see it in a lock screen (will be uploaded soon).
The Menu itself has been given a good clean up. It’s broken down properly and users can find what they need, however all of the other secondary information can be put under a “More” Menu.
All though this is a wire frame sample of what I am currently working on, I still feel the app needs a major redesign. I will be writing an in-depth article soon about the redesign of the app entirely from my perspective. I will also be uploading a link to an Invision prototype of this wireframe.
Please Note: The current wireframes you see are only a small portion of a transit app mock. They are still in progress of being designed & researched.
