I led a UI accessibility overhaul for our website to improve usability and user flow.
My roles
UX Researcher
UI Designer
UX Engineer
My tools
Mixed-methods UXR
Figma/AdobeXD/illustrator
HTML/CSS/JavaScript
My impact

I led end-to end UX research and UI design, as well as accessibility engineering and multi-sensory usability verification. I utilized an array of technical tools and languages to design and test UI iterations, resulting in a 7:1 AAA WCAG 2.1 rating and streamlined task flow.
A visualization showing website landing pages on a vertical and horizontal tablet

Design methodology

A design process graph; understand, ideate, research, analyze, design, user testing, and launch; an arrow cycles between user testing and analyze
A design process graph; understand, ideate, research, analyze, design, user testing, and launch; an arrow cycles between user testing and analyze

Project brief

I worked alongside the web development team to improve our flagship site design usability and accessibility. This included smoke-testing (and overhauling) screenreader frontend and backend functionality, color scheme redesign (contrast, ocular magnets, user flow streamlining), and trip planning pain point discovery and remediation.

View the live site here! 

Accessibility/UI overhaul

Interface redesign was guided by the WCAG 2.0 accessibility guidelines - specifically, the 4:5:1 contrast benchmark. This led to high-contrast design decisions that not only met WCAG "AA" ratings, but also "AAA" (7:1) contrast ratios. Color scheme refinements were largely restricted by existing brand recognition and infrastructure, resulting in limited deviation from current color schemes. The only color stipulation was the existing navy blue from the agency logo, so it was simply a matter of determining an optimal contrast option and applying it.

In addition, overhauling frontend HTML code and alt text improved screenreader compatibility and functionality. Minimal work was needed to devise API-screenreader cross-functionality in JavaScript development sprints, allowing for widespread vendor GTFS compatibility.

User testing showed that our design remediations improved task execution times, reduced task abandonment, and improved usability/accessibility metrics across the board.

A visualization showing the color scheme applied to the website; dark blue, a slightly lighter shade of blue, and a tame pink. In addition, the fonts adopted for the website (Hind regular and Helvetica Neue bold)

Research Ideation

Project scoping began by defining target demographics; low-vision users, and first-time users. The former routinely experienced site accessibility difficulties while executing trip planning tasks, while the latter exhibited difficulty hurdling the steep navigation learning curve.

Field research and task execution testing confirmed that these issues largely stemmed from a low-contrast design schema, as well as a flawed information architecture and UI layout. To dig deeper, I decided to explore demographic behavioral tendencies and desires.

Persona Characterization

Uncertainty avoidance (UA) is a measurement of someone's tolerance towards ambiguity and risk. Low-UA individuals are generally more confident and comfortable when presented with uncertainty, while high-UA users tend to exhibit anxiety and apprehension in the face of the unknown. UA is largely driven by societal beliefs and culture, allowing researchers to stratify populations by country, occupation, religion, and even by hobby.

In an interesting parallel, our first-time user demographic strongly overlapped with tourists, who were utilizing our website for daytrip planning. Regular riders (locals) usually accessed our site only once during their customer lifecycle, much like how grocery shoppers really only rely on in-store signage only on the first visit; the majority of our web traffic came from non-locals.

Tourists are characterized as adventurous and comfortable taking risks, and a closer inspection into first-time user metadata found that 80% of foreign tourists accessing our site for trip-planning purposes came from high-UA countries like China and Canada; the domestic tourist population was high-UA as well.

In diametric opposition to the risk-taking tourists, our vision-impaired users exhibited strong low-UA traits, and understandably so. Ethnographic field research uncovered that low-vision users meticulously planned out every aspect of their trip, accounting for all variables and potential unknowns before setting out.

A user persona graph explaining the differences between high UA and low UA personas for target demographic understanding

UI IA Design Logic

Both target demographics indicated behavioral tendencies that clearly conflicted with our existing information architecture strategy. The present understanding of low-vision/screenreader users was that all information should be neatly organized through intricate and detailed search trees, as to effectively organize information for neat searching; however, testing and research showed that the opposite was true, and that usability was severely hindered by this complicated design.

Similarly, first-time users were believed to desire a similarly intricate UI design, as to neatly compartmentalize relevant information in isolated pages and subdirectories. However, rapid interface testing showed that an ambiguous information tree structure with an icon-dependent UI resulted in lower task execution timing, lower task abandonment, and higher target feature acquisition.

Both demographics required an open-ended, free-form search tree, despite updated notions of user behavior and needs. This research paved the way for an updated UI and IA.

A screenreader-accessible transit plan map UI


My Impact

01 - Led end-to-end UX research and UX strategy, collaborating with cross-functional partners across all stages, from research, design, to execution.

02 - Ensured full product accessibility and usability compatibility with screenreaders, low-vision users, and English-secondary users.

03 - Paved the way for full digital-suite design overhauls with design science, remediation justifications, and research findings presentation.