NISRA

Research Process

Project Overview:

Imagine browsing your favorite website but struggling to read the information. How would that make you feel?

The Northern Illinois Special Recreation Association (NISRA) provides recreation programs for individuals with disabilities. However, their website was not accessible for visually impaired users, leading to low engagement and participation.

To address this, I conducted UX research to improve the website’s accessibility, readability, and usability

Problem Statement:

“How can we improve the accessibility and usability of the NISRA website for visually impaired users?

Challenges:

• Small text size: Difficult to read for users with low vision.
• Poor color contrast: Text blended into the background, failing WCAG standards.
• Forms lacked clear labels:  Screen readers struggled to interpret input fields.

• Using WebAIM’s Contrast Checker, I found that NISRA’s website failed WCAG 2.0 AA standards, significantly reducing readability and accessibility.


WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Programs Page Before

Solution

1. Adjustable text size option for users
2. Ensured all input fields are properly labeled and associated with their corresponding labels
3. Ensured contrast ratio met WCAG standards (4.5:1 for normal text, 3:1 for large text).

Final Result

A 20% increase in new participants was achieved by improving text size, labeling input fields, and enhancing contrast for visually impaired users, compared to three months pre-launch.

1. Discover

To understand the accessibility gaps, I conducted:

• Competitive analysis of similar organizations' websites.
• Contextual inquiries with 7 users (visually impaired + normal vision).
• Interviews with 10 participants (registered & non-registered NISRA participants).

Competitive Analysis

I began by analyzing the current state of NISRA’s website and identifying the most pressing accessibility issues. I compared NISRA with two similar organizations:

• Northwest Special Recreation Association (NWSRA)
• Fox Valley Special Recreation Association (FVSRA)

Key Findings:

• Competitors had better accessibility features (e.g., alt text, screen reader compatibility).
• NISRA’s poor contrast, small text, and unclear forms made it difficult to use.

Contextual Inquiries

I observed 7 participants with visual impairments interacting with NISRA’s website via Zoom, guiding them through tasks like reading program details, finding contact us page and filling out forms.

Key Quotes from Participants:

Participant 1 Quote: "I often felt lost because the text blended into the background, and the forms felt like a guessing game."

Participant 2 Quote: “I struggled to navigate the site because the text was too small and the colors made it hard to read.”

Participant 3 Quote: "Forms feel like a guessing game—I don’t know what to enter.”

Key Findings

• Visibility Issues: Users struggled with small text
• Readability Issues: poor color contrast
• Navigation Issues: Users found it hard to locate program details.

Interview

To gain deeper insights into accessibility challenges, I conducted 10 user interviews via Zoom. Participants included both registered and non-registered users of NISRA, some with visual impairments and others with normal vision to understand their pain points.

Key Interview Questions:

• “What do you find most difficult about using the NISRA website?”
• “Can you describe a time when you couldn’t find the information you were looking for?”
• “How do you currently navigate the site? What tools or strategies do you use?”
• “If you use assistive technology, how well does the website support it?

Key Findings

1. Navigation Difficulty: Users found it hard to locate information on programs and services.
2. Readability Issues:

“The text is so small, and the contrast makes it even harder to read.” – Participant 3

3. Confusion with Forms:

“I wasn’t sure what to enter in the contact form because the labels weren’t clear.” – Participant 5

Affinity Map

These insights confirmed the need for larger text, improved contrast, and clearer form labels,

2. Define

User Personas

Based on research, I developed a user persona to understand the needs of visually impaired users.

User Journey

I mapped the user journey to highlight pain points, such as frustration finding information, difficulty navigating through forms, and confusion due to poor readability.

User Journey Insights:

1. Frustration finding information due to poor readability.
2. Navigation confusion – unclear buttons and links.
3. Difficulty completing forms – lack of proper labeling.

3. Develop

How Might We…

“improve the accessibility and usability of the NISRA website for visually impaired users?

Research-driven Solutions:

Using research insights, I identified three key opportunities for accessibility improvements:

Improved Readability → Adjustable text resizing and higher contrast.

Enhanced Form Usability → Clear input field labels for screen readers.

Prototyping

Based on research insights, I recommended the following solutions to enhance accessibility:

1. Visibility: Implement adjustable text size and ensure the color contrast met WCAG standards.
2. Form Usability: Add proper form labels for screen reader compatibility.
3. Navigation: Adjust button and link placement to improve navigation.

4. Evaluate

Moderated Remote Usability Testing

• Participants:
• Conducted usability testing with 5 participants via Zoom.
• Tasks:
• Adjusting text size (ensuring content remained intact at 200% zoom).
• Reading program details (verifying readability and contrast).
• Filling out forms (testing for proper labeling and error handling).
• Pain Points Identified
• Difficulty locating and filling out contact forms.
• Confusion with text resizing icons.
• Poor color contrast affecting readability
• Recommendations from Testing:
• Added a labeled text-resize button.
• Improved form validation messages for clarity.
• Adjusted color ratios to meet WCAG 2.0 AA standards.

5. Iteration

Based on the usability testing, the following design solution was implemented:

1. Added a labeled text-resize button for clarity.

2. Improved form validation messages to be more user-friendly.

3. Ensured color contrast met WCAG standards using WebAIM’s Contrast Checker.

Ensured the contrast ratio is at least 4.5:1 for normal text and 3:1 for large text.

Before

• Text was too small.
• The form labels were unclear.
• Low contrast between text and background.

After

• Text resizing options were clear and functional.
• Forms had clear labeling and were easier to navigate.
• Contrast ratios met WCAG standards, improving readability for all users.

Final Impact & Results

20% increase in new participants (3 months post-launch)

85% of users reported improved readability and navigation.

• Users with visual impairments felt more confident using the site.

Feedback Highlights:

• “The text size and contrast options make reading much easier.”
• “Forms are now clear, and I can navigate without confusion.”
• “I feel more confident using the site independently.”

Constraints and Challenges

• Testing Sample Size: Limited sample size impacted the depth of insights.
• Budget Constraints: Utilized free accessibility tools (WebAIM, Figma).
• Stakeholder Buy-In: Focused on how accessibility aligns with NISRA’s mission to increase engagement.

What I learned

• User Feedback directly informs design improvements.
• Accessibility improvements significantly boost user engagement.
• Iterative testing is key to achieving successful outcomes.

What would I do differently

• Test with a larger and more diverse user group.
• Include accessibility experts for additional feedback.
• Implement ongoing accessibility testing as part of NISRA’s workflow.

Next steps

• Regularly monitor and maintain WCAG compliance.
• Continue testing and iterating based on user feedback.
• Advocate for greater accessibility awareness across the organization.

Conclusion

The NISRA website accessibility redesign successfully addressed critical usability barriers for visually impaired users, leading to:

• Higher engagement
• More new participants
• Improved user satisfaction

By enhancing accessibility, we not only met WCAG standards but also ensured that all users, regardless of ability, could navigate and engage with NISRA’s offerings.

This project reinforced the importance of inclusive design and the impact of accessibility in digital experiences.