MTA Access-A-Ride
Customer Profile
Redesigning the paratransit Customer Personal Information Page for NYC's MTA — 100% WCAG 2.1 AA compliance across three visual modes (Standard, Light, Dark), delivered solo in 10 working days.
Achieved 100% WCAG 2.1 AA compliance across all visual modes, enabling MTA to better support users with visual, motor, and cognitive disabilities. Stakeholders praised the improved clarity and navigation.
From dense legacy to accessible clarity
The legacy interface was a single long page with no visual hierarchy, poor contrast, dense data entry fields, and zero customisation options. The redesign introduced clear section grouping, collapsible panels, accessible typography, and a user-controlled theme switcher.
Standard · Light · Dark — User-Controlled
Each mode was rigorously tested for contrast, keyboard navigation, and readability. Users can switch between modes directly from the navigation bar to suit their visual preferences or accessibility needs.
Personal info, address, password, emergency contact
The Account Information tab organises complex data into clearly labelled, collapsible sections — Personal Information, Address, Password, Emergency Contact, and Equipment & Support — each with inline Edit controls for fast updates.
Fully responsive across all three visual modes
The mobile layout was designed mobile-first — stacked sections with clear labels, touch-friendly tap targets, and all three visual modes fully validated on small screens.
Dark vs Light — same content, different visual contexts
Both mobile modes display the same information architecture and interaction patterns. The visual system adapts colour tokens automatically — no redesign needed when switching modes.
10 working days · Solo designer · Full delivery
| Phase | Key Activities | Focus |
|---|---|---|
| Audit & Research | Heuristic evaluation; accessibility gap report; WCAG 2.1 checklist review | Define failure points & success criteria |
| Wireframing | Mobile-first low-fidelity wireframes; information architecture; keyboard flow mapping | Structural hierarchy & navigation |
| Hi-Fi Execution | Three visual modes in Figma; accessible design tokens; contrast checks per mode | All 3 modes WCAG 2.1 AA verified |
| Testing & Handoff | Contrast ratio analysis; keyboard navigation testing; annotated developer specs | Validation & developer delivery |
All views — desktop & mobile across all modes