Client: DeafBlind Youth Engagement and Advocacy (DB YEA!), nonprofit based in Austin, Texas connecting DeafBlind (DB) youths with DB mentors
Stephanie Lin (Product Designer), 1 other designer/PM, 1 front end developer, 1 back end developer
Q4 2023 - September to November
Knowbility partners with nonprofits every year to host Accessibility Internet Rally (AIR), a practical hands-on competition to learn the ins and outs of web accessibility while designing and building a website.
A design co-created with our client, providing the framework to build upon for years to come.
Image 1. Redesigned landing page of DB YEA!
The DeafBlind community is often forgotten by able-bodied folks. Accessible websites and software are an afterthought for many businesses. In 2023, 95% of homepages still have WCAG 2 accessibility issues.
DB YEA! is the only program of its kind in Texas. Their work follows the DeafBlind way: their journey, their experiences, their choices.
While this website can be a resource for anyone, it’s primarily for the DeafBlind community and continues to be designed with the DeafBlind community.
To do this, we had to understand the purpose of the website and our primary users of the website. This understanding was used to inform our design direction.
Image 2. Example from Microsoft's Inclusive Design Guidebook, closed captions originally created for the hard of hearing community Benefits many others
A quick audit of the existing website showed issues with information architecture and transparency. The website was accessible from a screenreader, keyboard, and text contrast perspective, but lacked information about the organization and its programs.
Image 3. Current landing page
Image 4. Current program page "Austin!"
Image 5. Current Contact page "Contact Us"
Our deaf client, the administrative director, guided the direction of this project. We clarified questions we had regarding the program, and identified our primary users and the types of information they might need.
Using the information we gathered from our client and existing website, I created an updated site map and low-fidelity wireframes to help us improve the information architecture. After the design direction was finalized, I created the final mobile screens to visualize the breakpoints for my team.
Image 6a. Original Navigation: Home, Meet your Mentors!, Family Day 2023!, Austin!, Preparation Retreat!, Contact Us
Image 6b. Updated Navigation: Home, Who We Serve, DB YEA! Program, Events, Our Team, FAQ, Contact Us
Image 6a. Exploring multiple table options with my developers: Horizontal Swipe, Sticky, Transformed
Once interactive elements of the websites was live in the staging area, we performed quality assurance internally and with a screenreader user. For internal auditing, I used Google Chrome and IOS's built in accessibility settings for VoiceOver and Zoom.
Image 8. Website in staging environment: overlap of CTAs
Image 9. Website in staging environment: Confusing flow of information for Screenreader Users
Screen readers read from top to down unless otherwise specified for certain attributes. In this case, when it's read in chronological order there is an odd transition between the link "Explore events" and visually, the icons with accompanying text. The issues included:
Websites were scored on 32 accessibility-related criteria, including appropriateness for audience and accessibility for images, audio, video, and tables. Features that were inaccessible resulted in penalty. In total, we scored 409 out of 479 and placed first amongst 19 teams.
Image 5. Happy client quote
