NJ Transit App
Accessibility Redesign
A clear navigation and inclusive features at the forefront, ensuring everyone feels confident using public transit.
.png)
Project Background
As a case study for the accessibility redesign of the NJ Transit app, my team conducted a thorough audit, adhering to WCAG guidelines and considering various impairments like visual, auditory, and cognitive limitations. That informed a comprehensive redesign of the app's UI, prioritizing intuitive navigation and clear information display. Our goal was to ensure everyone felt empowered and confident using public transit, and we believe the revamped NJ Transit app design would be a step towards achieving that vision.
TEAM
Yiran Chi
Ju Eun Jeon
Amogh Gharpure
METHODS
-Lean UX method
-Surveys, Questionnaires
-Observations
-Desk research
DATE
Sept- Oct 2023 (7 weeks)
TOOLS
Figma + Miro, Color Contrast checker
-
I worked on the semantic structure study of the app and identified touchpoints in the workflow to be improved
-
Tested both the iOS and Android platforms in dark and light UI for differences
My Role
Summary
The redesigned UI was shown in a realistic process format with a Talkback function and navigation around the design elements. This gave an understanding of how the app will look in an actual scenario.
NJ Transit designed app: Purchasing Ticket
This is the newly designed interface with an automated Talkback function in an ideal scenario of using the app for ticket purchase
NJ Transit designed app: Departure Status
This is the newly designed interface with an automated Talkback function in an ideal scenario of using the app for checking departure status of the travel.
Process
Stage 1
-Observation
-Desk Research
-Conducting audit using accessiblity tools and guidelines
Stage 2
- Idenifying opportunity areas for improvement
- Focusing on accessibility level to achieve
Stage 3
- Wireframe Design
-Post checking according to standards
Research
The process began with understanding the app workflow thoroughly and making pointers about each screen from visual, cognitive, auditory, and overall semantics. Each flowchart study had multiple screens marked with relevant notes beside them
Flowchart study 1: Onboarding
iOS
Android
Flowchart study 2: Log in/ Create new account
-
User couldn't use the application without creating an account
-
Information icons were not functioning while doing voiceover/talkback
iOS
Android
.png)
Flowchart study 3: Log in/ Create new account
-
Image slides on the home screen were disorienting
Multiple UI icons and images were not labeled or had any Alt text and didn't talk back their functions.
-
The 'Loading screen' animation gesture was not announced on Talkback, thus confusing the user about the page and their phone.
-
Final ticket details were not announced on TalkBack/Voiceover.
-
Some of the icons were not selected during voiceover - star icon (favorite)
iOS
Android
.png)
Flowchart study 4: Departure Vision
-
The overall flow of the departure vision was hard to follow
-
The user had to use a different app to know which station they should go
-
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 on Voiceover / Talkback
iOS
Android
.png)
Color Contrast
The Accessible color contrast tool with ADA compliance was used to test the colors used in the app. Each part was tested with individual elements and combinations. iOS and Android had slightly different variations in colors though being the same app.
iOS
Android
.png)
Designing the style guide
A unified visual system was established with proper takes on contrasts and information hierarchy. The same was checked with the color contrast tools and responsive resizing. AA was the target but AAA was a plus.
Redesigned wireframes
Based on the audit summary, the following missing points were targeted in the redesigned screens: contrast elements, color consistency, multiple modes to convey information, labels on crucial elements, redundant Information, updated descriptions, and consistent layout.
Old
New
Homescreen
-
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 
set of information
Old
New
Accessibility Filters
-
Introducing an 
‘Accessibility Filter’ for 
station selection
-
Multiple choices for the origin station selection
-
Color identification for 
similar set of information
Old
New
Station View
-
Added a ‘Buy ticket’ button to simplify the workflow
-
Revised the Bell icon to have alt text for train alerts
Old
New
Map View
-
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
Old
New
Ticket Purchase
-
Ensured the colors on dark 
and light UI are as per the 
WCAG guidelines
-
Simplified the layout of ticketing 
process with iconography 
and consistent elements
-
Revised the ‘Alt text’ of +/ - 
and rest of the icons to announce 
the number of selected tickets 
or relevant information of 
the tags respectively
Project Learning:
-
From the impact & and user perspective, real needs could be addressed by observing the real environment and not focusing solely on the app interface limitations.
-
The usage of larger buttons or areas of touch acts as an important accessibility point that often gets overlooked.
-
Color selection with the required contrast levels and pairing is a time-consuming process that should be given its due importance in every UI design.
-
Accessibility is not an intuitive thing, it needs to be addressed thoughtfully.
-
The project also helped in realize the value of a good screen reader experience.
-
WCAG guidelines although comprehensive should not considered as the final level to attain accessibility; different conditions might need new principles.
Next Projects
