NISRA

Research Process

Project Overview:

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

Northern Illinois Special Recreation Association (NISRA) is a non-profit organization that provides year-round recreation activities for people with disabilities. However, NISRA’s website was not accessible for users with visual impairments, making it difficult to read information and navigate. This resulted in low engagement and fewer new participants. I led a research-driven approach to improve accessibility, readability, and usability for visually impaired users.

Problem Statement:

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

Challenges:

1. Small text size made it difficult to read.
2. Lack of proper form labeling created barriers for screen reader users.
3. Insufficient color contrast between text and background reduced readability.

• I used WebAIM to test the color contrast of the NISRA website, and it failed WCAG standards for 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:

• NISRA’s website was outdated and cluttered.
• Competitors had stronger accessibility features, such as alt text and screen reader compatibility.
• NISRA’s website failed basic accessibility standards, including poor contrast and small text size.

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: "The layout was overwhelming. It took too long to find what I needed.”

Key Findings

✅ Visibility Issues: Users struggled with small text

✅ Readability Issues: poor color contrast

✅ Form Usability: Lack of clear labeling and association in form fields

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.

How Might We…

"Improve the website’s accessibility to accommodate visually impaired users?”

Research-driven Solutions:

Based on findings, I recommended the following:

1. Improved Visibility:
• Larger text size and higher contrast for better readability.
2. Enhanced Form Usability:
• Clear form labeling for screen reader compatibility.
3. Navigation & Accessibility:
• Adjustments to buttons and links to improve navigation.

3. Develop

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.

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.