How might we understand and improve accessibility for users with visual and fine motor disabilities on our investing platform?
Accessibility
@ John Hancock
User Research
Role
User Researcher
Team
Independent, managed by design manager
Research Categories
Evaluative, Generative
Timeline
10 weeks
My design solutions increased NPS by 50% and completion rate by 11% for locating documents.
Data is benchmarked from December 12, 2023, to July 16, 2024, and compared with the same period the prior year.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
TL:DR
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Solution:
-
description here description heredescription heredescription heredescription heredescription heredescription heredescription.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Project Overview
Project Overview
John Hancock’s personal investing portal supports users in planning their financial future. With vision loss greatly affecting those over 50—and average user age of 54—accessible UX isn’t just important; it’s urgent.
Problem
Our users aren’t getting younger, and to capture both their trust and their capital, accessibility must become a core value. Right now, it's buried in the design system, focused on the bare minimum like font sizes. We needed to gain a deeper understanding of the experiences users with disabilities go through.
Research Goals
Using autoethnography, user interviews, usability testing, and a feature-based competitive analysis, I sought to...
-
Uncover the behaviors, pain points, and moments of ease for users with visual or fine motor disabilities navigating our investing platform.
-
Identify key areas to improve digital accessibility and preserve user loyalty.
-
Define this unheard user group as a core John Hancock audience that shape future design decisions.
-
Engage stakeholders in expanding accessibility as a pillar that is explorative, generative, and human, rather than merely “compliant”.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Research Methodology
Auto-ethnography
I began with auto-ethnography, using a screen reader to navigate our site. It was a solid starting point, helpful for identifying technical accessibility issues and sparking conversations with the team. But it couldn’t replace the depth of understanding that comes from hearing directly from real users.
Semi-structured User Interviews
I started by speaking to eleven users, ranging from those with fine motor to visual disabilities, to hear about their experiences using financial platforms with assistive tech. These conversations helped me understand not just the physical challenges, but also the emotional weight that comes with inaccessible design.
Usability Testing
Then, I put John Hancock’s portal to the test through moderated usability testing. I asked participants to complete tasks using our platform so I could observe how they actually behaved, what worked, where they got stuck, and how they feel.
Competitive Analysis
When users brought up other platforms they’d used,what worked, what didn’t, I realized I needed to look outward, not just inward. So I conducted a feature-based competitive analysis to see where John Hancock was falling short in the market, and where we could do better.
Research Process
Meet Our Users
Based on user insights from my research, I created personas that humanize and represent users with disabilities for John Hancock teams to reference and use for future product decisions.
Click images to expand
View user flow
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Deliverables
Based on user insights from my research, I created personas that humanize and represent users with visual and fine motor disabilities for John Hancock teams to reference and use for future product decisions.
1. Accessibility Audit
Evaluating each page of our current platform against WCAG AAA standards, assessing screen reader compatibility and key navigation—going beyond basic font size and color contrast checks.
2. Research Report
Think like a detective—you don’t know what you don’t know! Collaborating with the call center manager revealed a hidden part of the user journey to me: they flock to customer service after using our platform.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Desk Research
Desk Research
Setting the Stage
I chose desk research as the first approach to gain an overview of digital accessibility, narrow focus areas and ensure a more targeted, informed user research approach.
User Insights
-
Web Content Accessibility Guidelines (WCAG), Level AAA standards go beyond legal requirements and are a higher standard for reinforcing digital accessibility.
Takeaways
Visitors are new or rare
There is significant unfamiliarity with the site that contributes to navigation challenges.
Business impact
Improving the Account Documents flow could not only increase NPS, but result in significant cost savings.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Phase 1: Evaluative
I audited the platform for WCAG AAA compliance using automated tools and hands-on testing with a screen reader and keyboard-only navigation to present to our software engineers to improve accessibility.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Auto-ethnography
Auto-ethnography
Empathy Exercises: Stepping into the User's Experience
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
View other problems I found
What do screen readers users navigate through first?
According to a WebAIM survey, when trying to find information on a lengthy web page, most screen reader users indicated they first navigate through the headings on the page.

Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Using a screen reader to simulate a user with a visual impairment.
A blind user can’t rely on visual hierarchy to understand the structure of a page. So, I taught myself to use a screen reader (Mac’s VoiceOver), though this alone does not complete user research.
What I found was a chaotic mumbo jumbo—headings out of order, unclear link labels, and no real structure.
Problem Example:
Screen reader users rely on properly ordered headings to understand a page’s structure and navigate efficiently. Our portal pages had unordered headings, making it difficult to form a clear mental image of the content.

View other problems I found

Solution:
I’ve labeled all headings across our pages to guide developers in structuring them by content hierarchy, not design. Ordering them sequentially (top-down) ensures smooth navigation for screen reader users.
WCAG Criteria: 2.4.6 (AA), 1.3.1 (A), 3.2.3 (AA)
View other problems I found


Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Using keyboard-only navigation to simulate a user with a fine motor impairment
Using just a keyboard is one way that users with fine motor impairments may navigate our portal. So, I navigated our entire portal using only a keyboard, and recorded the corners that were inconvenient to get to or unaccessible at worst. For users with fine motor impairments, the platform required unecessary clicks and pressure on the joints.
Problem Example:

There was no way to skip the navigation on each page to get to the main content of the page, such as their account balance.
View other problems I found
Solution:
View other problems I found

Add a “skip to main content” button on all pages (WCAG reference).

Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
My Challenge
In my efforts to catch all screen reader failures (first-level concepts), I lost connection with noting my emotional experience (second-level concepts). Balancing both would have helped me gain insights for more empathetic interview questions.
User Insights
Insight 1/3
Disability is a spectrum affecting all senses. For our digital portal, I’ll focus on those impacting touch and sight.
Insight 2/3
Users with disabilities often rely on assistive tools like screen readers and adaptive keyboards (Keys).
Insight 3/3
Web Content Accessibility Guidelines (WCAG), Level AAA standards go beyond legal requirements and are a higher standard for reinforcing digital accessibility.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Output 1: Accessibility Audit
Output 1: Accessibility Audit
“Quick-wins” and Best Practices
I organized the Audit by “quick-wins” and best practices and presented to our developers to efficiently employ to our current pages, and to consider for future additions, from basic color contrast to adding alternative text on graphs.
View a glimpse of it below. View full presentation here.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Phase 2: Explorative
Re-introducing accessibility as a pillar that is generative, and human. I complimented my evaluation of our platform for WCAG compliance with user research that seeks to understand the UX experiences of eleven users with disabilities.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
User Research Plan
User Research Plan
Setting the Stage
Objective
Understand the pain points users with visual and motor disabilities experience navigating financial platforms, and our platform specifically.
Goal
Turn user insights into actionable improvements for the accessibility of our platform
Session Approach
30 min.
Semi-structured User Interviews
Participants discuss firsthand experiences and pain points with navigating financial platforms with their assistive technology
30 min.
Moderated Usability Tests
Participants complete user tasks in John Hancock’s portal (with their relative assistive technology, if applicable), while we note navigation challenges, and accessibility gaps.
5 min.
Post-Session Evaluation
Participants reflected and evaluated on their experience with JH’s portal through the System Usability Scale (SUS).
Session Approach
30 min.
Semi-structured User Interviews
Participants discuss firsthand experiences and pain points with navigating financial platforms with their assistive technology
30 min.
Moderated Usability Tests
Participants complete user tasks in John Hancock’s portal (with their relative assistive technology, if applicable), while we note navigation challenges, and accessibility gaps.
5 min.
Post-Session Evaluation
Participants reflected and evaluated on their experience with JH’s portal through the System Usability Scale (SUS).
START
END
Conducted in two groups:
Users with visual disabilities
Users with motor disabilities
Usability Tasks:
-
Perform a transaction
-
Add a beneficiary
-
View a specific statement
-
Update contact information
About
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
User Interviews
User Interviews
Adding Depth to Interviews
To understand the human side of the experience, I conducted user interviews to hear directly from those impacted.
Focus Areas
-
Explore formal tools and informal hacks users rely on to accommodate their disability
-
Identify user pain points in navigating investment platforms
-
Gather verbal and nonverbal feedback user experience and future improvements
Sampling
-
Recruited participants via a survey created on UserTesting.com.
-
Two surveys: One for vision and one for fine motor impairments, survey ensured participants:
Own an IRA investment account (and logged on more than once in the past six months)
Experience "some difficulty" or more in seeing or using their hands
Use assistive technology (AT)
Confirm their willingness to use AT during the study
Using autoethnography, user interviews, usability testing, and a feature-based competitive analysis, I sought to...
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Output 2: Research Report
Output 2: Research Report
Turning Research into Synthesized Findings
After a collaborative session of affinity mapping with a Product Designer and my Design Manager, I put together a research wall that identifies and summarizes themes in user needs.
Drag and zoom into this imbedded Figma file!
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Key Takeaways
Key Takeaways
Interview Themes Identified
After a collaborative session of affinity mapping with a Product Designer and my Design Manager, I put together a research wall that identifies and summarizes themes in user needs.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Visual Disability
-
When users navigate their portal, so they use tools that changes font size, weight, and colors, to customize their UX to their visual needs, to avoid eye strain and headaches.
-
Users prefer less content-heavy sections to reduce strain on their eyes: "In general, content heavy stuff is not going to agree with my optic neuritis (visual condition)."
-
Users think John Hancock's portal text too small to read, especially when inputting crucial information or reading fine print, leading them to zoom in to prevent errors.
-
Users struggle when information is only visual and not described accurately through a screen reader (such as graphs or tables).
Fine Motor Disability
-
Users want to minimize manual typing, relying on external voice-to-text tools (e.g., Google Docs and ChatGPT) to generate text and paste it back into the portal.
-
When users are forced to use their hands to navigate, they use hacks like keyboard shortcuts, arrow keys, tabbing, and even pens to reduce joint strain.
-
Users struggle with small and tightly spaced CTAs, finding them difficult to press.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Cognitive Load
-
Users log into their investing platform infrequently, so they become frustrated having to relearn navigation with each visit, especially after layout updates: "If it's a problem getting into it, then I just stay away."
-
Users prefer simplicity in design: "The tools that are doing less, like keeping it simple, make it easier for old and tired eyes." (Visual Disability User)
-
Users rely on external tools like bookmarks and favorites, or built-in features like "starring" pages, "Recently visited," or a search bar to efficiently locate common tasks and information.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Design Recommendations
Design Recommendations
Design Recommendations
I collaborated with a product designer and my design manager to ideate design opportunities. Then, I connected with a full-stack engineer to identify and rank solutions of high impact and lower effort.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Visual Disability
Quick Wins
-
Break information down into actionable items, rather than rely on text-heavy pages.
-
High-contrast design helps users with vision impairments navigate without visual overload.
Long-term solutions
-
Customizable interfaces with adjustable font sizes and contrast settings enhance readability for users with vision impairments.
-
Voice controls, such as an AI chatbot, allows users to navigate and interact with the interface without relying on visual cues.
Fine Motor Disability
Quick Wins
-
Reduce manual input fields by incorporating automation and autofill where possible, such as in length fields and forms.
-
Ensure ample space for users to interact with buttons or input fields: "Make it like you were making it for a kindergartener who has fat thumbs."
Long-term solutions
-
Implement voice controls, such as a speech-to-text or Siri-like chatbot user can “talk” to, without the difficulty of using keyboards and a mouse.
-
Implement gesture-based controls to reduce the need for precise physical movement, such as using single taps or keyboard shortcuts
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Competitive Analysis
Competitive Analysis
Competitive Analysis
During interviews, users frequently referenced competitor products and their features they find useful, prompting me to conduct a competitive analysis. This highlights feature gaps and opportunities, creating a compelling visual to drive stakeholder urgency.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Impact
Impact
Impact: Creating Space for Accessibility in Design
My accessibility research helped improve...
-
Company culture: a deeper understanding of accessibility, making it an approachable and important value within the team culture to discuss and integrate into their approach.
-
Research foundation: a digestible and scalable user research foundation for future designers and stakeholders to build on or reference for other projects.
-
Business profit: equips stakeholders with research insights that inform their product decisions and ensure we reach all users.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
My Challenge
My Challenge
An Unexpected Case of Cerebral Palsy
One of my "Fine Motor" participants had Cerebral Palsy. Due to my limited experience with this condition, I struggled to understand him. Toward the end of the interview, he exhibited non-verbal cues in his tone that suggested discomfort, possibly from having to repeat himself. Prioritizing his well-being over sticking rigidly to the plan, I chose to end the session early.
Next time...
For participants with unique conditions that don't align with a standard research plan, we should explore tailored accommodations—such as bringing in a personal translator—to foster a more comfortable, inclusive environment. This not only respects the participant's experience but also enhances the quality of insights we gather.

Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Lessons
Lessons
Building Trust and Accessibility in Design
1. Programming Considerations in Design
When designing for accessibility, it goes beyond the visual UI. As a designer, I’ve learned to consider how the features are built, whether it’s labeling headings or images, and to note these details during the developer hand-off. For financial platforms, this means making tables and graphs readable."
2. Inclusive Language
When talking about disability, using respectful terms—like saying "person with a disability" instead of "disabled person"—helps build trust and shows that we see the person first, not just their disability. When participants feel respected, they’re more likely to share honest, meaningful insights
2. Inclusive Language
When talking about disability, using respectful terms—like saying "person with a disability" instead of "disabled person"—helps build trust and shows that we see the person first, not just their disability. When participants feel respected, they’re more likely to share honest, meaningful insights
3. Pilot testing
I learned the importance of walking through usability testing script and tasks with myself first or with team members if to fine-tune the plan before conducting tests with real users.
Takeaways
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
Design Process
description here description heredescription heredescription heredescription heredescription heredescription heredescription here
User Insights
Next Steps
Next Steps
Building Trust and Accessibility in Design
1. Beta Testing
Conduct in-person user research to better capture non-verbal cues like facial expressions and body language, and receive a deeper understanding of how users their assistive technology with our portal.
2. Inclusive Language
Run pilot usability tests within the team (auto-ethnography) before user sessions to catch any unintended mistakes.
