BC Blind Sports Accessibility

Prologue: I pitched the redesign project when I just started learning web design 12 years ago but forgo for the project management scope because I was a beginner. Self-aware of where I am now, plus my past interaction with the non-profit, I took responsibility to design for ethical design.

BC Blind Sports & Recreation Association (BCBSRA) is a provincial chapter of Alliance for Equality of Blind Canadians (AEBC). They offer programs and sports to those who are blind or partially sighted. BCBSRA’s online website needs to be refreshed and reflect the needs of the website’s users.

Problem:

Accessible inclusive design is not fully met without the proper usability test with the end-users.

The scope was large as it tackled the idea of accessibility and inclusion for ethical design.. It was a challenge finding the right group of individuals to test the website, so simulated testing was completed. Also, I was unfamiliar with simulating remote user testing. Specifically, under a low vision environment, with or without assistive technology.

Research Definition

There weren’t many candidates at hand during the COVID-19 shutdown. This resulted in focusing on my secondary goal of determining ways to increase membership enrollment, volunteering, and donations. The third goal was to get the general public interested in the paralympic sport, goalball.

I did one-on-one interviews and tried to categorize their experience under three key topics:

1. Vision problem
2. Physical activity (e.g., individual or team sports)
3. Volunteering

Solution Planning

When I was planning the solution, I did a lot of secondary research for accessibility, such as choosing the right typography and spacing. Also, I thought the brand logo redesign needed to use the human running shape, similar to Canadian Blind Sports or Olympic sporting logos. I discovered similar associations used braille in their wordmarks on the web and wondered if that is a standard I should aim for.

Solution Execution

Tell the story that any vision problem is just black, white, or shades of grey. The strategy of maxi typography with an imperfect asymmetrical blown off-grid demonstrate the imperfections about the topic of the website. This was a deliberate art direction to show sighted people design under a magnified view.

For the membership and donation forms, Google Material Design's VUI for form accessibility. I designed structure and content of the website without CSS, as well as visualizing the HTML semantics while I designed for the content order. Then came the biggest challenge to execute, the usability testing (Medium post coming soon).

I came up with the gear to test for low vision and even colour blindness but all it took to get the results was to get my users to take off their glasses and dim their screens less than 25% screen brightness with no glasses was ideal. For demo purposes of functionality, the disabled UI shows what buttons and form fields don’t exist in the interface once the filterable buttons are clicked. It will not affect the accessibility standard I set for the website as a whole.

Outcomes and Lessons

The "devil's advocate" design seems to communicate the rawness in ethical design. From the usability testing, the third goal of getting people interested in goalball was harder sell. The lesson I learned from this project was open communication will result in achieving a responsive and accessible website from all parties in the team.

Furthermore, I need to be careful with the content microcopy as I saw F-patterned eye-tracking was important to the 2 column magazine layout where the form fields were. While self-reflecting on the project as a whole, I see that my overthinking and worry about the subject did not help solve the lack of inclusion or accessibility. After I stepped back from the project, the results just miraculously came through.

I recommend another roadmap feature at the top of the banner notifying users of the built-in tools. It would say, for example, "Hey, do you know we have built-in browser features to help you navigate the web better." I became frustrated when using the screen reader on my Android phone as it required a lot of double-tapping, it locked my viewport and it prevented vertical scrolling on web pages. Plus, having to unlock my phone under voice assistant mode was a nightmare.

Check-in of how it's going: BCBSRA has updated their website for accessibility in 2021 and I'm so glad. Even though I didn't design it, I am glad I took a chance to apply my learnings of inclusive and accessible design in 2020. ♥

Related Projects

KANS E-commerce

VFS Digital Design Collection

← SHOEME PWA - Short Writeup Airbnb Reviews - Short Writeup →