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 might we improve the sign-up experience on the NISRA website for users with visual impairments?”

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: Users struggled to interpret the input fields, particularly during the sign-up process.

• 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

After the updates, sign-ups increased by 20% compared to the three months before launch by improving text size, labeling input fields, and enhancing contrast for visually impaired users

1. Discover

To understand the accessibility gaps, I conducted:

• Competitive analysis of similar organizations' websites.
• Contextual inquiries with 10 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 10 participants with visual impairments interacting with NISRA’s website via Zoom, guiding them through tasks like reading program details and signing up to a program.

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

• Text Size: Users couldn’t easily read program info due to small font size.
• Color Contrast: Low contrast made reading difficult for users with low vision.
• Sign-up Form Issues: Users found it difficult to complete the sign-up form because the labels were unclear.

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?”
• Have you tried signing up for a program? What was that experience like?”
• “Do you use assistive technology when browsing? If so, how does it work on this site?”

Key Findings

1. Unclear Form Labels

Users had difficulty completing the sign-up form because fields were missing labels or not screen reader-friendly.

2. Small Text Size

Text throughout the site, including the sign-up page, was too small for many users to read comfortably.

3. Low Color Contrast

Poor contrast between text and background made it hard to read, especially for users with low vision.

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 and pain points of visually impaired users.

User Journey

I mapped the user journey to highlight pain points, particularly frustration with the sign-up form due to unclear labels, small text, and poor contrast.

User Journey Insights:

• Users struggled to read program details because the text was too small.
• Low contrast made it difficult to see form content clearly
• Users couldn’t complete the sign-up form because labels were missing or unclear.

3. Develop

How Might We…

“How might we improve the sign-up experience on the NISRA website for users with visual impairments?

Research-driven Solutions:

From the findings, I identified three key areas to improve:

1. Text Size

Add an option for users to increase font size for better readability during sign-up.

2. Color Contrast

Update colors to meet WCAG 2.0 AA standards, improving visibility of text and form fields.

3. Form Labels

Ensure every sign-up form field has a clear, descriptive label that’s compatible with screen readers.

Prototyping

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

• Added text resizing controls.
• Used WebAIM’s contrast checker to update text and background colors.
• Labeled all input fields in the sign-up form to support assistive tech and reduce confusion.

4. Evaluate

Usability Testing

I conducted moderated usability testing with 5 participants over Zoom to evaluate the updated sign-up experience, focusing on text size, contrast, and form labels.

• Tasks:
• Increase text size using the new resize feature.
• Read a program description with updated contrast.
• Complete the sign-up form.
• Pain Points Identified
• Some users were unsure how to use the text resizing option.
• A few form field labels still needed improvement for screen reader clarity.
• Certain text and background combinations still had low contrast, making reading difficult.
• Recommendations from Testing:
• Add a label to the text-resize button for clarity.
• Adjust color combinations to meet WCAG 2.0 AA contrast ratios.
• Make form validation messages more visible and descriptive.
• Update remaining unclear form labels.

5. Iteration

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

1. Text Resize Button

Added a clear label so users understood how to increase text size.

2. Form Labels

Reworded unclear labels to make each sign-up field easier to understand, especially for screen reader users.

3. Color Contrast

Adjusted text and background colors using

WebAIM’s Contrast Checker

to meet WCAG 2.0 AA standards, improving visibility for users with low vision.

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

Before

• Text was too small, making it hard to read program details and complete sign-ups.
• Low color contrast made text difficult to see, especially for users with low vision.
• Sign-up form fields lacked clear labels, causing confusion and screen reader issues.

After

• Added text resizing option, allowing users to adjust font size for better readability.
• Updated colors to meet WCAG 2.0 AA contrast standards, improving overall legibility.
• All sign-up form fields were clearly labeled, making the process accessible and easier to complete.

Final Impact & Results

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

85% of users reported the site was easier to read and the sign-up process was clearer

• Users with visual impairments felt more confident completing the sign-up form independently.
• The site now meets WCAG 2.0 AA standards for text size, color contrast, and form labeling.

Feedback Highlights:

• “The larger text made it easier to read everything, especially during sign-up.”
• “The contrast update really helped—I don’t have to strain my eyes anymore.”
• “I was able to sign up on my own without needing help.”

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

These updates made the sign-up experience more accessible, helping NISRA reach more users and improving confidence among those with visual impairments.