Design Process

Project Overview:

Imagine browsing you’re favorite website and can’t 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, the organization's website is not user-friendly and accessible for users with vision impairment, making it challenging to read information. This caused a low number of new participants and low user satisfaction rate.

To help solve this, I conducted a research to help improve the assessibility for NISRA’s website

Problem Statement:

How can we redesign the NISRA website to be accessible and user-friendly for people with visual impairments?

Challenges:

1. The text size on the website is too small
2. Lack proper labeling and association with input fields
3. Insufficient color contrast between the text and background

• 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.

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

20%

increase in participation was measured by comparing registration numbers three months pre-and post-launch.

After

1. Discover

Competitive Analysis

I conducted a competitive analysis comparing Northwest Special Recreation Association (NWSRA) and the Fox Valley Special Recreation Association (FVSRA).

Analysis

• NISRA's website design appears basic and outdated
• The information on NISRA's website is cluttered
• NWSRA and FVSRA offers many accessibility features such as alt text, screen readers etc

Contextual Inquiries

• I conducted contextual Inquiries with 7 participants who are visually impaired and have normal vision interacte with the current website while being observed remotely
• Each session lasted for 30 minutes via Zoom
• Participants were asked to perform specific tasks such as filling out the Contact Us, reading programs, and navigating through the website

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

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

Participant 3 Quote: "The website felt overwhelming because the layout was cluttered, and it took too long to find what I was looking for.

Key Findings

1. Visibility and Readability Issues: Users struggled with small text sizes and poor color contrast
2. Form Usability: Lack of clear labeling and association in form fields led to confusion and errors while filling out the Contact us
3. Feedback Expressions: Participants expressed frustration, particularly when encountering inaccessible content or confusing navigation paths.

Interview

I conducted interviews with 10 participants via Zoom. The participants were registered and non-registered participants of NISRA.

Findings

• Many users found navigating the website difficult and locating the information they needed.
• Some users with visual impairments found the website's text too small and difficult to read.
• Participants with vision impairment reported difficulty identifying links, form fields, and buttons on the website.
• The color contrast between the text and background is not sufficient.

Affinity Map

2. Define

User Personas

To better understand and address the needs of our users, I developed a user persona and user journey

User Journey

3. Develop

How might we…

improve the website's accessibility features to accommodate users with vision impairment?

Possible solutions

1. Improved Readability

Adjustable text size option for users

2. Enhanced Color Contrast

Ensured contrast ratio met WCAG standards (4.5:1 for normal text, 3:1 for large text).

3. Proper Labeling and Association

Ensured all input fields are properly labeled and associated with their corresponding labels

Prototyping

I created a prototype using Figma to visualize and test the design of our project.

4. Evaluate

Usability Testing

• Participants:
• Conducted usability testing with 5 participants.
• Tasks:
• Adjusting text size to see if it can be increased by up to 200% without loss of content or functionality.
• Reading the content of the program page.
• Completing forms to check for proper labeling and error handling.
• Findings:
• "Users reported text blending into the background due to poor contrast."
• "Users felt confused by unlabeled forms."
• Pain Points Identified
• Difficulty locating and filling out contact forms.
• Confusion with text resizing icons.
• Poor color contrast affecting readability

5. Iteration

Based on the usability testing, the following design solution was implemented to improve the accessibility and usability of the NISRA website:

1. Added text resize label and icon for clarity

2. Made form validation messages clearer and more user-friendly.
• Solution: "Added ARIA labels to all form fields to improve usability for screen readers."

3. Enhanced color contrast for better readability
• Solution: "Updated the color scheme using WebAIM's contrast checker to meet WCAG 2.0 AA standards."

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

Before

After

Evaluation

Three months after launching, I created a survey about users' overall experience. Here are the results: 20 users answered the survey.

This resulted in a 20% increase in new participants

• What this means:
• More individuals with disabilities were able to access and register for NISRA’s programs easily.
• This translated into improved program outreach and engagement, aligning with NISRA's mission of inclusivity.

85% user satisfaction

Feedback Highlights:

• Users appreciated the adjustable text size and improved readability.
• Participants with visual impairments felt the website better supported their needs, making it easier to find information and complete forms

WCAG Compliance Achieved

• The website now meets WCAG 2.0 AA standards, ensuring contrast ratios of at least 4.5:1 for normal text and 3:1 for large text.
• Why this matters:
• This improved the readability and accessibility of key content for users with low vision or color blindness.
• The updates were verified through tools like WebAIM and manual testing.

Constraints and Challenges

1. Limited Time for Iterative Testing:
• A larger sample size would have provided deeper insights into diverse user needs.
2. Resource Constraints:
• As this was a non-profit organization, budget constraints meant limited access to advanced accessibility testing tools. I addressed this by leveraging free tools like WebAIM
3. Stakeholder Buy-In:
• Convincing stakeholders to prioritize accessibility was initially challenging due to a lack of awareness about its importance. To overcome this, I created a presentation highlighting how improved accessibility could lead to increased participation and satisfaction, aligning with their goals.

What I learned

• Deepened understanding of WCAG and its role in inclusive design.
• Improved time management and prioritization for meeting deadlines.
• Realized the value of active listening and team feedback for better outcomes.

What would I do differently

• Instead of testing with 5 participants, I would increase the number to 10-15 for broader insights.
• Involve accessibility experts in reviewing design decisions.
• Adopt a more iterative design process for continuous improvement.

Next steps

• Regularly monitor and adjust the website to maintain WCAG compliance.
• Conduct ongoing testing to ensure accessibility for visually impaired users.
• Educate stakeholders on the importance of web accessibility.