Web Accessibility

Dissertation by practice

Duration

April 2024 (20 weeks)

Tools

Adobe XD

Adobe Photoshop

Adobe Illustrator

Adobe InDesign

Contribution

User interviews

Context scenarios

Ideation

Wireframes

High-fidelity prototype

My Role

UX/UI Designer

Empathy maps

Competitor audit

Sitemap

Content creation

Information architecture

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

Amount of topics to be published

1.

Delicate approach towards audience

2.

UI accessible to different user needs

3.

Penetrate in the market and company’s culture

4.

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

Empathy Map

Scenarios

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?

?

Problem

Solution

  • Create a website that offers accessible information for the neurodiverse community and the wider neurotypical workforce, supporting a more inclusive future.

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.

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.

Typography

Primary colours

#04427b

#00ae34

Secondary colours

#005324

#99ff42

Neutral colours

#000000
#ffffff

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

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

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.

Wireframes & Prototype

  • Completed UI sketches and low-fidelity wireframes, then developed an interactive prototype.

  • Made improvements based on testing feedback.

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.