top of page

NJ Transit App Redesign

2023
#UI/UX Design 
#Accessibility Design

Role:
UI/UX Designer

Duration:

5 Weeks

23.png

NJ Transit's mobile app offers information and tools for users of their train, bus, and light rail services. Designed to enhance the user experience, the app includes features like mobile ticketing and real-time trip planning. This project tackles accessibility issues within the app, aiming to analyze current barriers and suggest improvements that ensure a seamless experience for all users, regardless of their needs.

TalkBack and Voiceover

  • Several UI elements, including icons, images, and functions, lack labels or alt text, making them inaccessible to users relying on screen readers like TalkBack or VoiceOver.

​

  1. The 'Loading screen' animation gesture

  2. Final ticket details are not selectable

  3. Bell icon (Notification), read it as an “unidentified icon”

  4. The Star icon (favorite) is not selectable

  5. Map, couldn't read on Voiceover

User Flow and User Interface

  • Finding the most accessible station requires users to switch between multiple apps, creating a fragmented and inconvenient experience.

  • Certain key placements may be challenging for users relying on screen readers like VoiceOver to navigate.

  • The departure vision requires improved flow for better user comprehension.

Miss Consistent and Low 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 the name of the area.

  • Adjusted the spacing between elements for better navigation and clickability.

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

32.jpg

  • Ensured the colors on dark 
and light UI were 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

  • The overall flow was hard to follow.

  • The user had to use another app to locate the destination 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.

  • 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 the 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