Web Accessibility

Dissertation by Practice

6 months
Group
Neurodiverse Workers Network logo
Tools
Adobe XD
Contribution
Project Manager | User interviews | Empathy maps | Context scenarios | Competitor audit | Ideation | Sitemap | Information architecture | Wireframes | High-fidelity prototype
My Role
Project Manager | UX/UI Designer | Content Creator
Neurodiverse Workers Network logo
View Content
Overview

Neurodiverse Workers Network is a website supporting neurodivergent employees and their employers. It provides research-based resources to meet workplace needs and helps employers create more inclusive environments.

Challenges
  1. Amount of topics to be published
  2. Delicate approach towards audience
  3. UI accessible to different user needs
  4. Penetrate in the market and company's culture
Research
Academic
  • Bias perceiving neurodiverse people as "impaired" still exist.
  • Workplace struggles for neurodiverse adults is connected to a lack of training available for teachers at secondary and post secondary level.
Surveys
  • Surveyed 30 neurodiverse adults and 22 neurotypical adults.
  • The first survey shaped preferred content, social media, and accessibility features.
  • The second focused on neurotypical experiences with neurodiverse colleagues in the workplace.
Interviews
  • Conducted 6 separate interviews.
  • Interests included: interview tips, communication, stress management, professional help, training, and testimonials.
  • Preferred media: articles, videos, and audio.
  • Accessibility needs: homepage summary, clear navigation, text-to-speech, contrast options, and bullet points.
  • Consulted subject specialists for expert insights.
User's pain-points
  • Excessive text and unclear content sections.
  • Challenges with reading and cognition.
  • Insufficient workplace training on neurodiversity.
Meet the users
Personas
Persona 1 Persona 2
Empathy Map
Empathy Map 1 Empathy Map 2
Scenarios
Scenario 1 Scenario 2
Problem

Though awareness of neurodivergence is growing, public resources remain limited.

How can we create a website that provides inclusive workplace resources for both neurotypical and neurodiverse individuals?

Solution
  • Create a website that offers accessible information for the neurodiverse community and the wider neurotypical workforce, supporting a more inclusive work environment.
Competitor audit
  • Research found no direct competitors offering free, accessible advice for neurodiverse working adults in Ireland.
  • Listed companies are indirect competitors, focusing on specific neurodiverse conditions.
Competitor audit research 1 Competitor audit research 2
Style guide
Colours
  • An analogous color palette was selected to minimize overstimulation for neurodiverse users.
  • Design guidelines include using 50%-80% opacity for dark graphics or text on colored backgrounds to enhance readability.
Primary colours
#04427b
#00ae34
Neutral colours
#000000
#ffffff
Secondary colours
#005324
#99ff42
#0e9bff
#71ead2
  • All of the original colours on the colour palette passed visual contrast checks on the website colourcontrast.cc, for use with black or white coloured fonts.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Accessibility Features
  • Use of accessible WordPress themes and plugins to meet WCAG 2.1 guidelines.
  • Plugins for adjustable text sizes, fonts, and colour contrasts.
  • Theme and content are compatible with screen readers.
Typography
  • Verdana, a simple and easy-to-read sans-serif font, was chosen for body text and headings.
  • As per research, it helps reduce mental fatigue and improve information retention.
  • Its clear lowercase 'b' and 'p' enhance visual accessibility both on screen and in print.
Verdana Bold for use in headings, subheadings and pull out quotes
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
Verdana Regular for use in body copy
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
Wireframes
  • Completed UI sketches and low-fidelity wireframes, then developed an interactive prototype.
  • Made improvements based on testing feedback.
Low-fidelity wireframes Interactive prototype screens
Testing
  • Two users, a neurodiverse and a neurotypical participant, completed tasks remotely via phone and Instagram video chat.
  • Both flagged confusion with the 'registration' button linking to a popup, unsure why registration was needed to access content.
Takeaways
  • We used a user-centered design approach, conducting surveys and interviews to create empathy maps, personas, and scenarios.
  • After defining the problem, we audited competitors and sketched ideas.
  • We developed sitemaps, wireframes, and an interactive prototype.
  • Ongoing research and testing guided continuous improvements.