NJ Transit
NJ TRANSIT is dedicated to offer safe, dependable, and user-friendly transit services. Our app redesign enhances convenience for users.
01 | Overview 📝
This project has significantly contributed to my knowledge in conducting comprehensive research on competing applications, and in devising user-centric design strategies that enhance app functionality and improve the overall user experience.
Tools
Figma
Roles
UX/UI Design
Duration
6 Months
Things to note:
After going over the project in 2023, I decided to update the research aspect of the project to provide more accurate data and because of this, I decided to use UX, UI and research from 2017 and see what was improved and what could be improved from the updated NJ Transit app (2023)
02 | Problem ❌
2017
To address the problem methodically and develop effective solutions, I initiated the process by meticulously gathering and documenting a comprehensive list of issues. Following this initial step, I undertook a careful analysis and prioritization, eventually identifying two central problems that demanded our concentrated efforts for resolution. This structured approach allowed us to allocate resources efficiently and tackle the most critical aspects of the challenge at hand.
1. A long list and no hierarchy can confuse and intimidate users
2. The other services are hard to understand for first-time users
(ex. buying tickets)
Target Audience
We wanted to focus on the users that are experiencing the app for the first time who travel in and out of the city, as well as users who frequent the app during rush hour.
03 | Research 🔍
We employed a comprehensive research approach, including competitive analysis, user interviews, affinity mapping, and the creation of user personas, to craft solutions that specifically met the needs and preferences of our users, ultimately leading to a successful outcome.
Qualitative Research - Competitive Research
Identifying, analyzing, and using other methods like SWOT, was used to find out the competitors’ strengths and weaknesses.
Identifying the Competition
Simply typing in the search engine, “best transit apps for ny”, it revealed the different transit apps and within those, I chose the apps that were geared more towards the target audience and what they tend to use the most, which were: Moovit, Transit, Metro North (TrainTime - 2023)
MOOVIT
Key Points:
Used to view all the local transit options which include: buses, trains, subway, bikes, scooters, Uber, Lyft, and more.
UPDATED (2023): App now includes Arrival Time Accuracy that provides users color coded ETA. Has collaborated with different rail services across the USA.
TRANSIT
Key Points:
Accurate departure times for buses, bikes, metro and subways
UPDATED (2023): A fun feature that tells users the amount of rats ono their stop. Another noted feature is the ability to use the app underground in subways even in spotty reception
2017 Version
MTA TrainTime
Key Points:
Used for railroad lines that go from north of Manhattan (New Haven, Dutchess and Orange County) all the way to deep Long Island (Montauk, Greenport)
UPDATED (2023): The app is now changed to ‘TrainTime’ which only shows the railroad services. UI has improved and decluttered only providing the railroad services.
Analyzing the Competition [2017]
Moovit
Pros:
App has a very simple UI with only three nav options on display
Cons:
Not a lot of features
Only for railroad use
Transit
Pros:
Clean user-friendly designs
Not congested nor difficult to use
Cons:
The UI’s simplicity can take a first-time user a bit of time to be familiar with
TrainTime
Pros:
Clean user-friendly designs
Friendly micro-interactions
Cons:
The abundant features can be difficult for first-time users
Insights:
When I first started this project, it was more geared towards UI design, so not much research was performed. As I experienced firsthand on UI design and how it comes into creation, the research portion is just as important and even more to create a foundation for a user-friendly design.
Analyzing the Competition
[Research updated in 2023]
To pinpoint competitors and grasp their offerings, I extensively searched the web within the product or service category. I analyzed online sources to gain a perspective on the competitive landscape, examining products, services, strategies, features, and unique selling propositions. Following analysis, I employed various methodologies such as competitive analysis, and gap identification. This comprehensive approach revealed insights into areas where enhancements could be made to improve the NJ Transit app.
Moovit
-
The app has friendly micro-interactions
App has ads
On display, the app provides pop-up guides to help first-time users
UI for this app provides a simple nav on the bottom: Directions, Stops, and Lines.
Simple search bar to destination, again providing pop-up guides for first-time users
User flow is a bit complicated and could be overwhelming for users when using the different features
-
Compared to the NJ Transit App, Moovit displays the nearest station as soon as you open the app. The convenience of this feature is overlooked as users tend to prefer to have it within the first few seconds when interacting with the app.
Moovit also has the search bar on the home screen, where as the NJ Transit app does not. They only display different sections on the home screen. This does not include the bottom nav.
A big inconvenient and recurring things in Moovit is the display of ads and pop-up ads, which NJ Transit does not have. Most users were said that this was a big negative considering that they typically use the app in a rush.
Overall the features that are displayed on the home screen for Moovit is more accessible than NJ Transit app for first-time users. But the organization of the features of the app is more clear in the NJ Transit app. Though there is no easy ‘search destination’ bar, home screen provides clear menus directing users to each feature e.g. Buy ticket, DepartureVision, MyBus, Light Rail, Schedules, etc.
Transit
-
App has friendly microinteractions
The app is free, but to gain more features, you must purchase a subscription
On display, app automatically asks permission to use the user’s location and once allowed, the app provides the nearest transportation services.
Lines are all color-coded
As you move around the app, the location gives real time updates and gives users options near where you moved.
User flow is very simple and doesn’t require users to go through multiple pages
-
Just as Moovit, the Transit App displays the nearest station as soon as you open the app. But the UI presenting the nearest stations are easier to understand because of the different color coded lines. They also show the transportation number clearly, the eta, as well as where the destination is.
Unfortunately, for users who want to have access to lines farther away, they must subscribe to the app. NJ Transit, on the other hand, does not have a subscription feature.
The Transit app has all the features within the line provided. For an example, for rail times on a specific line, you can automatically check real-time updates and the app will track departed in real-time. Within that line, you can also see the percentage of ‘if the train will come on time’, the stops that that train will take, and more departure times. For the NJ Transit app, all the features are separated so users need to go back and forth within the app to use the different features.
Overall, Transit is concise and simple, while NJ Transit needs to improve of organizing the data.
TrainTime
-
As soon as users open the app, train times are on display and users can easily search ‘from’ and ‘to’
Saved trips are easily accessible
UI is very user-friendly for first time users, providing clear nav options
Shows which track to take as well as the ETA
Also provides ‘Nearby Trains’ as one of the features
App also shows users how many cars are on the train and which are full vs. empty
All train lines are color coded
-
Unlike Moovit and Transit, TrainTime does not show the nearest station just like NJ Transit, but it does show the train schedule from your last searched destination.
The simplistic bottom navigation delivers easy access to the necessary features that users might need: Train, Tickers, Search, Status and More. Compared to NJ Transit which has: Favorites, My Tickets, Home, Rider Tools, and More. In the NJ Transit app, the ‘Home’ nav has all the features displayed, while TrainTime has all of it included when you select a train, just like the Transit app. TimeTrain also shows track number, the number of carts and how busy it will be. When navigating through the NJ Transit app, users have a high tendency to get lost within the app just to get the real-time train status.
Overall, though TrainTime lacks in the transportation methods compared to the other apps, the UI and user flow is much easier to understand than the other competitors. If the challenge of this project was comparing the display of different transportation methods, it would lack, but since the target audience is only commuters who use the train, the results are very different.
SWOL Analysis
[Research updated in 2023]
Utilizing the SWOL research method, I conducted a comparative analysis of the app's old and recent updates, identifying notable strengths. Additionally, I applied the SWOL method to assess the current version of the app, aiming to pinpoint areas for further improvement.
Journey Mapping
[Research updated in 2023]
Leveraging comprehensive research findings, I synthesized the information into a journey map, illustrating the typical user experience during the initial app purchase amidst rush hour.
User Flow
In an effort to enhance user understanding of the product, I aimed to design a user flow with fewer than 5 steps for purchasing tickets. While simplicity is crucial for user comprehension, it's equally important to strike a balance, ensuring that simplicity doesn't lead to misunderstandings within the product.
The journey starts from the 'Home' section, guiding users through a streamlined process to effortlessly purchase tickets. This approach was driven by the goal of presenting a user-friendly pathway for commuters. Notably, I focused on optimizing the experience around a frequently used feature, MYBus, allowing users to track buses in real-time for added convenience.
03 | UI & What to improve 🖌️
While the initial UI developed for the project showcased strong points and provided clear solutions to the problem at hand, it's essential to acknowledge that there is continuous room for improvement. This acknowledgment stems from the ongoing accumulation of research insights and a deepening understanding of both the user experience (UX) and user interface (UI) aspects involved in the project.
Purchasing a Ticket
Home
During the app redesign process, I was mindful not to compromise the essence of the home page. Recognizing that a radical shift in UI can disrupt the experience for regular commuters, I opted for a path of gradual and simple changes to ensure a smoother transition.
Things to note:
I aimed to create distinctions in the services, particularly with accessibility in mind. Upon careful consideration, I found that implementing icons might be more beneficial. This choice was influenced by the awareness that excessive use of color could potentially confuse users and lead to an overestimation of their understanding of the user flow.
Adjustments I would make:
After analyzing the research, having a map on display with transportation services nearby would create another way for users to purchase tickets without going through multiple screens. Only through A/B testing can we be sure if utilizing the map on the home screen could benefit commuters.
Choosing Travel
To enhance user convenience, the ability to modify their origin and destination is simplified—users can achieve this by tapping on the current station, eliminating the need to navigate back and forth through pages. Furthermore, ticket categories are intuitively organized using tabs, ensuring a user-friendly and efficient experience.
Things to note:
On a personal level, I would consider redesigning the layout of destinations. Despite the simplicity of the UI, I'd enhance the spacing and touch-points, increasing them to the standard size of 44px. This adjustment is geared towards providing a more accessible UI, particularly beneficial for commuters who prefer or require a design that prioritizes ease of use.
Adjustments I would make:
In the updated version, incorporating the user's location to identify their current or nearby station could enhance speed and convenience. Additionally, introducing a 'favorite' section would be beneficial for long-time users, allowing them to save their regular commute. This feature aims to expedite the ticket-purchasing process for users who frequently follow the same route.
Purchase
The initial step in enhancing the user experience would be to increase touch-points, accompanied by the utilization of distinct buttons for adding and reducing the quantity of tickets. To offer users a clear overview of their selections, incorporating a preview at the bottom, and showcasing the tickets they have added, would facilitate better tracking of their purchases.
Adjustments I would make:
Things to note:
Purchasing the ticket has two UIs to show the flow.
I designed the system to accommodate last-minute adjustments, ensuring that users can make changes easily and promptly if needed.
Purchase
Expanding the size of both typefaces and buttons has the potential to enhance user interaction, making it more accessible and user-friendly.
Adjustments I would make:
This is the second part of purchasing the ticket.
The ticket displays the specific line the user is taking, as demonstrated in this example with 'Secaucus'. The notch on the ticket serves as a visual indicator representing the type of transportation the user has selected. This design choice aims to enhance differentiation among tickets for each service, contributing to a more user-friendly experience.
Things to note:
Purchase - Activated
Expanding the size of both typefaces and buttons has the potential to enhance user interaction, making it more accessible and user-friendly.
Adjustments I would make:
This UI provides a preview of the activated ticket, offering a visual representation of how it would appear once activated.
Things to note:
MyBus
Ticket
The notches shown on the ticket wallet, serve as a visual indicator representing the type of transportation the user has selected. This design choice aims to enhance differentiation among tickets for each service, contributing to a more user-friendly experience. The chosen colors serve as a means to distinguish between different types of transportation services. The color palette is derived from NJ Transit's colors, providing a visual cue that aligns with the established brand identity. This approach aids in clear and intuitive differentiation for users.
Things to note:
Adjustments I would make:
I would modify how the ticket wallet displays the number of tickets, opting to increase the size and adjust the placement for better visibility. Additionally, incorporating an arrow would signal users that they can explore the wallet for a more intuitive experience.
Choosing Ticket
The notches are also used for tickets. By pressing the 'list plus' button, users can select multiple tickets conveniently. Furthermore, users have the option to add their tickets to Apple Wallet, providing a seamless and hassle-free way to use tickets without having to open the app. The feature MyBus is added to the ticket wallet for convenience so users don’t need to leave to check their bus arrival time.
Things to note:
Retaining only the ticket design, I would opt for a comprehensive overhaul of everything else in the UI. The current design is perceived as dull and challenging to grasp due to a deficiency in information. Vital ticket details such as origin, destination, bus number, and more need to be incorporated for a clearer and more user-friendly experience.
Adjustments I would make:
Choosing the Bus
I integrated the location feature to simplify the process of users finding the bus they need to take. Upon clicking on a specific bus line, each line is visually distinguished by its respective colors. Users are provided with the flexibility to view both the map and list formats for a more comprehensive understanding of the available options.
Things to note:
If I were to redesign this section again, my goal is to revamp this page with a cleaner UI. To achieve this, I plan to increase the size of the map and list buttons for enhanced visibility and accessibility. Additionally, I aim to improve the organization of 'origin' and 'destination' elements to make the user experience more intuitive and user-friendly.
Adjustments I would make:
Reflection
SIMPLE IS NOT EVERYTHING
While simplicity is crucial for achieving a cleaner design, it's essential to strike a balance, as a lack of information within the UI can result in numerous misunderstandings. Reflecting on this project, I've come to understand the importance of maintaining an equilibrium between simplicity and providing sufficient information to ensure a more user-friendly experience.
RESEARCH IS THE FOUNDATION OF A GOOD DESIGN
Drawing on experience and a deeper comprehension of user needs, I've come to realize the pivotal role of earnest research in advancing any project. The insight gained from my own project emphasized the importance of effective communication within the UI, underlining the significance of thorough research to bridge the gap between the product and the user.
THERE IS ALWAYS ROOM FOR CHANGE
Upon reflection on the project, it's evident that there is perpetual room for improvement, regardless of the perceived quality of the initial work. With an evolving understanding of user psychology, there's an ongoing opportunity to revisit and refine the product, continuously enhancing the overall user experience.