top of page

NJ Transit App Redesign

UX Design 
Accessibility Design
UX Designer

The project is about identifying and analyzing accessibility issues within the NJ Transit app and improvements to cater to the diverse needs of user groups.

Previous App's Color Contrast

  • The color combinations with orange, light blue, and green failed at the contrast and size ratio standards of WCAG.

  • The selected elements had inconsistency in color shade at various instances in the app.

  • The usage of white text especially with lighter tones was not visible

  • The color choices for buttons were not consistent

  • Highlighted elements were difficult to track owing to missing color hierarchy


New Style Guide

Updated the color so that it passes color contrast test in more various design occasions.


1. Previous - Homescreen

Redundant banner slides on the home screen with misleading VoiceOver.


Redesign - Homepage

  • Decluttered the page
and made it intuitive

  • Modified the orientation
of the tabs to be more spaced out for low-vision users and 
those with hand dexterity

  • Added color groups for quick identification of similar
sets of information


2. Previous-Purchasing Train Ticket

  • Multiple UI icons and images were not labeled or had Alt text, with the lack of function explanation.

  • Final ticket details were not announced

  • The state of the icons was not highlighted - Favorite (star), reduce (-) and add (+) icon

  • The 'Loading screen' animation gesture was not announced on Talkback, thus confusing the user about the page and their phone


Redesign - Purchasing Ticket

  • Introducing an 
‘Accessibility Filter’ for 
station selection

  • Multiple choices for the
origin station selection

  • Color identification for
a similar set of information

  • An elastic search option with an inbuilt feature to display the nearest station to the user

  • Users can search a station by its name or name of the area

  • Adjusted the spacing between elements for better navigation and click ability

  • Station names are made into Title case than an entire Uppercase for readability

  • Ensured the colors on dark 
and light UI are as per the 
WCAG guidelines

  • Simplified the layout of the ticketing process with iconography 
and consistent elements

  • Revised the ‘Alt text’ of +/ - 
and the rest of the icons to announce 
the number of selected tickets 
or relevant information of 
the tags respectively


3. Departure Vision

  • Overall flow was hard to follow

  • The user had to use another app to locate the destined station

  • Bell icon (Notification) - in voiceover, it was not selectable, and in TalkBack it read it out as an “unidentified icon”

  • The map was hard to navigate

  • Quite a lot of elements were not tagged or read aloud


Redesign - Departure Vision

  • Renamed as Departure Status from Departure Vision to ensure the correct meaning of the tab

  • Can search the station for desired path/ route in the same app

  • Similar flow to ‘Purchasing ticket’

  • Revised the Favorite (Star icon) to have a relevant Alt-text being a utility tool

  • Added a ‘Buy ticket’ button to simplify the workflow

  • Added a voice feature to the Map that announces the train status on clicking on the Map

  • Reduced redundant info and replaced by icons

  • Revised the Bell icon to have alt text for train alerts


Purchase Ticket

Vision Departure Status


  • Introduction of an 'Accessibility Filter' for station selection.

  • Ensured compliance with WCAG guidelines for colors on both dark and light UI.

User Experience improvement

  • Elastic search feature for user convenience.

  • Simplified layout of the ticketing process.

  • Enhanced navigation through adjusted spacing between elements.

Redundancy Reduction

Removed redundant information and replaced it with icons to declutter the interface.

Alt-text revisions and workflow modifications

  • Renamed 'Departure Vision' to 'Departure Status' for tab clarity.

  • Provided relevant Alt-text for utility icons like the Favorite (Star icon).

  • Added a 'Buy ticket' button for simplified user workflows.

  • Implemented an Alt-text for the Bell icon to provide train alerts.

bottom of page