top of page

NJ Transit App Redesign

2023
UX Design 
Accessibility Design
Role:
UX Designer
23.png

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

color.jpg

New Style Guide

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

26.jpg
27.jpg

1. Previous - Homescreen

Redundant banner slides on the home screen with misleading VoiceOver.

29.jpg

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

28.jpg

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

30.jpg

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

31.jpg
  • 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

32.jpg
  • 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

33.jpg

3. Departure Vision

  • Overall flow was hard to follow

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

36.jpg
  • 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

38.jpg

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

39.jpg
  • 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

41.jpg
17-2.jpg

Purchase Ticket

Vision Departure Status

Accessibility

  • 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