DBYEA homescreen on various devices

Designing nonprofit website for accessibility and usability

Client: DeafBlind Youth Engagement and Advocacy (DB YEA!), nonprofit based in Austin, Texas connecting DeafBlind (DB) youths with DB mentors

Methods

  • Research: Desk Research, SME interview, QA
  • UX/UI Design: Archetype, Sitemap, Information Architecture, Wireframes

Team

Stephanie Lin (Product Designer), 1 other designer/PM, 1 front end developer, 1 back end developer

Timeline

Q4 2023 - September to November

The competition:

A WCAG 2.1 accessible redesign in 2 months

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.

Desired high level outcomes

Solution

A design co-created with our client, providing the framework to build upon for years to come.

Desktop and mobile redesign of DB YEA

Image 1. Redesigned landing page of DB YEA!

Inclusive Design Approach

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.

Designing with Community

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.

Infographic depicting the types of users who benefit from closed captions: hard of hearing, people in loud places, children learning to read

Image 2. Example from Microsoft's Inclusive Design Guidebook, closed captions originally created for the hard of hearing community Benefits many others

""

Discover: Identifying Opportunities for Improvement

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.

existing landing page

Image 3. Current landing page

  • Navigation is a little bit unclear for first-time visitors. Where would one go to find more information about the organization... or the program?
  • Landing page is a missed opportunity to share snippets and value proposition. Sometimes less is not more.
Current Program Page "Austin"

Image 4. Current program page "Austin!"

  • Information about the program unexpectedly lives under "Austin!" (see Image 4).
  • It's unclear how to sign up. There's no information about registration process and requirements.
  • There's no main CTA to sign up.
Current Contact page

Image 5. Current Contact page "Contact Us"

  • Contact page is another missed opportunity. There is a list of FAQs without answers! *gasp*
  • There is no event registration form and this is all currently handled by the administrative director.
""

Discover: Understanding our users and the information they need

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.

DB Youths

  • program benefits (from participants' perspective)
  • types of learning and mentorship they might receive
  • generally visits websites after parents have reviewed first

DB Mentors

  • value of the organization
  • level of commitment
  • benefits of their participation

Parents

  • ensure safety of their child
  • feel comfort and confidence in DB YEA!
  • decision makers as to whether their child will join the program
  • might be "grieving that their child is deafblind (doesn't matter how mild the hearing and vision levels may be)"

Texas Workforce Commission (TWC) staff

  • understand program and program details
  • evaluate whether they (TWC) are willing to pay for the program for its youth
Ideate icon

Design: Laying Down the Building Blocks

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.

Before

Original Navigation with Unclear UX Writing

existing navigation with obscure page titles "family day 2023, austin!, etc"

Image 6a. Original Navigation: Home, Meet your Mentors!, Family Day 2023!, Austin!, Preparation Retreat!, Contact Us

  • No page containing information about the organization, history, mission statement, etc.
  • Unclear what some pages are without clicking into them (Family Day, Austin, Preparation Retreat)

After

Updated Navigation with Transparent UX Writing

finalized navigation with familiar page titles "events, program, etc."

Image 6b. Updated Navigation: Home, Who We Serve, DB YEA! Program, Events, Our Team, FAQ, Contact Us

  • Added "Who We Serve", a page dedicated to an overview of the organization, history, mission statement, population served, etc.
  • Changed "Austin!" to "DB YEA! Program" to reflect a more general yet descriptive term for first-time visitors (parents, potential mentors/mentees, government staff)
  • Added a FAQ page: improving UX and SEO and also saves business time for responding to common inquiries

Collaborating with my developers: Finding the most accessible mobile table layout

wireframe sketches of mobile table layouts

Image 6a. Exploring multiple table options with my developers: Horizontal Swipe, Sticky, Transformed

  • Listed pros and cons from design perspective
  • Wanted to know what was most feasible
  • Iterated based off of dev feedback

Other Notable Highlights

Final design highlights and iterations for DB YEA

Image 7. Final design Highlights of DB YEA!

View Design
Ideate icon

Testing: Assessing Accessibility

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.

Internal Testing Showed...

Small Touch Target with Overlap

Annotated image of website in stage for overlap of buttons

Image 8. Website in staging environment: overlap of CTAs

  • Difficult to tap on correct CTA, contained small touch target with no padding on the right --> increased touch target of interactive buttons and links to minimum of 44px x 44px, and added padding to the right to prevent overlap between close and vertical scroll
  • Font sizes too small --> increased font size to match rest of body copy

External and Internal Testing Showed...

Confusing flow of information for screenreader users

Annotated image of section on website with icons and list items

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:

  • No header - so nothing is announced to the user after the link, and it skips straight to the 3 listed items --> added descriptive header
  • Listed items in paragraph tags - so items were not annotated for dev, and were placed in semantic paragraph tags rather than semantic list items --> placed in appropriate tags
  • No alt tags on icons; because the icons are decorative and not informational, they contained no alt text which added to the confusion
""

The results...

We won first place and our client approved our final designs! Currently, the website is in development.

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.

Quote reads "The original and edits are such an update. Your talents are real. I appreciate this! You are helping make this unknown population real to everyone else. It just validates what we have known all along."

Image 5. Happy client quote