NJ Transit App: A UX Annotation and Conceptual Redesign
Transportation applications have dramatically changed the way we get from A to B. As a commuter, I often use my cellphone to assist me on my trips; I can almost guarantee that without my phone, I would be hopeless in navigating anywhere.
Ironically, NJ Transit’s app only further complicates my journey.
Now, in NJ Transit’s defense, I am not a New Jersey native, and therefore that might make things a smidge more difficult. But that being said, there are basic principles and things that should be relatively simple to understand that frankly make no sense to me in this app. So, I took it upon myself to take the app apart and try to reassemble it.
My User Flow
I first noticed the app’s poor functionality back in the Spring, when I was preparing for my new commute. The goal was to find out when the bus arrives to my bus stop, and to purchase a monthly bus pass. I opened the app and was greeted to a screen filled with grids and colors and things that didn’t quite feel right.
There’s a lot going on on this home screen. There doesn’t seem to be any hierarchy in what information is given and the possible interactions don’t seem to have much rhyme or reason as to why they’re front and center. The favorites section has some potential, given that I’d appreciate a more customized experience, but once favorited it becomes a purple, orange and yellow excel sheet of small text and numbers that I don’t care much about. I wasn’t too shocked by this less-than-appealing interface though - as a former Philly commuter I had grown used to sub-par transportation apps and websites (looking at you SEPTA). However, the more I tried to use NJ Transit’s app, the more bewildered and confused I became.
“A quick tap over to the hamburger menu might help clarify some things” I thought to myself. Once opened, I was greeted by almost the exact same content which appeared on the home screen. I then started questioning what all these different buttons meant: what’s the difference between Departure Vision, Trip Planner, and Train Schedules? Why would I need to differentiate between these? I continued to think about this as I began searching for my bus schedule (which is another separate button).
I started by navigating to the “MyBus” section. There, I came across a list of bus routes, sorted numerically, with a search bar on top and a tab for route number, stop number (why would someone know this information off the top of their head?), and favorites. Seemed simple enough, despite there being a lot of steps involved. I selected my bus and proceeded.
Next was to select a bus stop. Hmmmm. I didn’t know this information at the time. There’s no way to find the closest bus stop from this screen for some reason, so I have to go back. It was at this point that using this app went to a mild annoyance to next level frustration, as I was greeted to a usability nightmare: a back button, on the bottom of the page, NEXT TO AN AD.
First, why on earth is the back button on the bottom? It should be in the top left corner, like every other app I’ve used. But even worse, why is it smack on top of an ad?! Do you know how easy it is to accidentally “enjoy books in a whole new way”? I don’t want to learn more about Audible, I want to find out what time my bus comes!
After a quick search in google maps, I found the closest bus stop, went back to the app and found out what time the bus gets there. Ok. Now that I have this information, I want to order a ticket. Hmmm, doesn’t seem like I can on this screen, bummer. Why didn’t they include that option?
Back to the home screen, but this time I selected “Buy”, because for some reason they couldn’t just put all these features into one flow. I begrudgingly made an account, and selected “Bus” from the three modes of transportation. Once selected, I was given the choice to search by Route & Zone, or Origin & Destination. This was the beginning of a long descent into a hopeless abyss.
I started with Route & Zone, since I figured I already knew some of that information earlier. This time, however, the route numbers didn’t seem to be ordered the same way. Also every single route had a large unfilled star next to its number — I get what they were trying to do but it came off as intrusive and unnecessary — Why would I want to favorite/unfavorite bus routes from this screen? Star tangents aside, I came to the realization that these were not the same numbers I saw before, when I was scrolling through bus routes. Where did these new route numbers come from? I attempted a search for my bus route, and was greeted to a “no matching items page”. I went back to the MyBus section to double check if I had misremembered any information, and tried again. No dice.
Alrighty. This time I tried searching by origin and destination. Surely this would work right? I know where I’m coming from and I know where I want to go. Should be a piece of cake. This was more like a piece of broccoli (the opposite of cake). I faced a list of stations, and made the assumption that they just put a list of literally every NJ Transit bus station into one list, because at this point anything could happen with this app. I began to search for my bus stop, because thankfully almost every screen of this app has a specific search bar for that one certain task that doesn’t search for anything else but that one thing. Again, no results.
Am I just an idiot? Am I totally using this app the wrong way and everyone else just gets it? I’ve seen other people with their bus ticket on their phone, so I know there are at least a few people out there who somehow figured it out through their magic user sorcery and higher intelligence. But as a UI/UX designer, I’ve come to learn the number one rule of human computer interaction:
It’s never the user’s fault.
Anyway I spent the next two hours searching online and trying to figure out how to use this unusable app. Eventually I gave up and called it a night. TO THIS DAY I have not figured out how to purchase a bus ticket on my phone.
The Redesign
When redesigning the app, I wanted to focus on two user flows: browsing content, and viewing my trips/opening my bus ticket; pretty much what I went through when I first tried to use the app (except for the bus ticket part).
I started this process by looking at other transportation apps and seeing what works and what I enjoyed. I looked at Google Maps, Transit App, and Uber for inspiration, and I noticed a couple of key features they have in common:
All three apps at one point or another have the following:
1. A dedicated search bar which affords searching for a location. NJ Transit has searching for a location hidden away in various parts of the app, and each iteration is searching for a specific kind of location, like a station or a city.
2. A large map that spans the entire page. This should be a no-brainer for transportation apps, and is quite literally using design mapping to show the user where he/she is and where things are in relation to his/her location. I don’t recall seeing any map whatsoever in NJ Transit’s app.
3. Detailed information peeking in from the bottom, which most of the time relates to what the user currently sees on the map. When the user scrolls up, said content expands revealing more information and CTAs (a call to action, for example “get directions” or “view schedule”).
These three features resonated a lot with what I wanted to accomplish with the home page. Recall the the current NJT home page is just a grid of buttons, with an excel-like sheet of schedule information on the bottom should you decide to create an account and favorite a location. Here is my updated version of the home screen:
As you can see, I took those three features I mentioned earlier and applied it to my own design. The map is essential to the entire app, and really makes no sense to not have one in a transportation application. The map sprawls across most of the screen, making location the prime focus, and the whole interface feel less cramped.
The content on the map also provides a sense of familiarity. The dropped bus pins are bus stops nearby, and pins with an alert on them signify that there is a delay or a change in schedule with an upcoming bus heading to that stop. I also thought it would be a nice feature to include nearby buses on the map as well. Very much like Uber’s app, these buses would move in respect to their actual location. And they’re so cute!
On the bottom is a list of stations nearby, including the ones presented on the map, as well as My Trips— trips I have purchased a ticket for, and stations that I have favorited. The stations in the Nearby list are in order of closeness, therefore the further down the user scrolls, the further away the stops become. Each listed stop includes the name, distance from the user, and which buses stop at it (as well as an alert if applicable). NJT offers more than bus transportation, so in order to address that I added a filter button to show only certain types of transportation. In practice, these other modes of transportation would also be represented on the map, but for the sake of this project I only focused on bus transportation.
For the My Trips section, in addition to showing my favorite stops and my purchased tickets, I thought it would make sense in terms of discoverability to include a “purchase ticket” CTA as well. When the user taps on the ticket icon for one of his/her trips, the bus ticket appears for that trip. That interaction would look something like this:
Selecting a bus stop from the home screen (whether from the map or the list) would take the user to a detailed view of his/her selection. Content on this screen is a list ordered by ETA of all upcoming buses to the selected bus stop. This content can also be filtered to show specific bus types via the filter icon right above the list, and the bus stop itself can be favorited via the star icon right above that.
On occasion, there will be some sort of event or holdup that causes severe traffic on the way home, which results in hundreds of impatient and annoyed people in single file lines at the bus terminal due to delayed buses. To address these sorts of situations, I used a system of alerts. If a bus is delayed, an orange triangle appears in various places within the app — on a bus stop (both on the pin inside the map and in the list underneath it) and in the list of upcoming buses inside a selected stop. Selecting an upcoming bus will expand to show alerts (if any), the current location of the bus, and, again, a “purchase ticket” CTA, or a “view ticket” CTA if the user has already purchased one. Here’s what the flow would look like:
Final Thoughts
I gave myself this challenge because of a real life problem I had faced, and I wanted to use it as an opportunity to better myself as a UI/UX designer. My goal was to zero in on the pre-design part of creating interfaces, and I think I came out of this having a better understanding of how to prepare for a new project, including UX auditing and performing UX research.
Obviously I missed a lot of things in NJ Transit’s app that still need to be improved: there’s two other modes of transportation that I haven’t addressed, the act of actually purchasing a ticket is still a mystery to me, and the “Police” section could use some work. My designs aren’t perfect, and looking back now I can already point out a couple holes.
If I were to take this project a step further (If you’re reading this NJ Transit, take notes), I’d sit down and interview other commuters/people who use NJ Transit on a daily basis, and see what the average user is like. I’d also interview current app users and ask them what they mainly use it for, and then have them do some basic tasks within the app (like purchasing a bus ticket or checking the bus schedule) and see how well they perform. From that data, I’d see where people slipped up, pair it with what people most use the app for, and develop a proper solution. And if I wanted to go all out, I’d take the new app and test it again asking the same questions and see if the results improved. Lather rinse repeat.
If you want to play around with the prototype, you can check it out on Framer.
And that’s it! Thanks for reading! How’d I do? I’d love to hear what you think. Hit me up on LinkedIn if you wanna chat 😋
Programs used for this project: Sketch App, Principle, Framer, Adobe Photoshop
