DiverseLink

Enhancing experiences on the web for neurodivergent individuals.

This project was completed as part of the course Accessible and Inclusive Design (INFO 609) at Drexel University.

Project Overview

Neurodivergent individuals face unique challenges when accessing and navigating online content due to insufficient accessibility options in web browsers. Through in-depth research and user-centric design, we have created DiverseLink, a browser extension offering customizable features and settings to tailor layouts, font sizes and styles, color schemes, noise reduction, distraction minimization, and more.

01 / Empathize

Understanding user needs through research and exploration. 

Section
Overview

Literature Review

We began our project with a literature review on Designing Technology for Individuals with Autism Spectrum Disorder. Our primary findings consisted of the following:

• There is no single, unified set of accessibility guidelines.

• There is a significant lack of guidance for employing participatory design (PD) in projects.

• Accessibility needs are often overlooked entirely.

• Neurodivergent individuals are empowered when technology addresses their unique needs.

Survey

Next, we conducted a 16-question survey through Qualtrics to gather insights into existing experiences when using web browsers as a neurodivergent individual. We received 16 responses in total. The following is a summary of our findings:

• The most frequently reported neurodivergent condition was Anxiety Disorder (27.78%).

• The most frequently reported platform for browser use was smartphones (43.7%) and the most frequently reported browser was Google Chrome (52%).

• When asked what browser features stand out most, respondents stated they value shortcuts and autocomplete functions that streamline their experience.

• Only 37% of respondents stated that they currently use browser extensions. The most frequently reported extensions include Grammarly, Fakespot, Simply Copilot, and uBlock.

• Most respondents (62%) indicated they would be interested in a browser extension specifically designed to address neurodivergent needs.

• The most frequently requested extension features include time management, a customizable user interface (UI), and text-to-speech functionality.

Journey Map

We created a journey map to visualize our users’ experiences across varying touchpoints during their time online to identify potential points of friction and delight. This aided in our understanding of the users’ needs and pain points.

02 / Define

Establishing user needs and key pain points.

Section
Overview

User Persona

To humanize our target audience and further enhance our understanding of the users’ needs and pain points, we created a user persona. Our persona embodies the challenges and motivations expressed by survey respondents during our initial research.

Problem Statements

Our primary problem statement is as follows: Existing web browsers lack sufficient customization options to accommodate the unique needs of neurodivergent users.

To narrow our scope and address the problems most relevant and meaningful to users, we developed a series of “How Might We” statements:

• How might we make the web browsing experience more intuitive and adaptable for neurodivergent individuals?

• How might we create a customizable UI that adapts to various sensory sensitivities (e.g., color schemes, font sizes, contrast levels)?

• How might we help neurodivergent individuals maintain focus and minimize distractions?

03 / Ideate

Exploring ideas, establishing a framework.

Section
Overview

Conceptual Sketches

We designed conceptual sketches for our browser extension to address the most integral user needs and pain points identified during our initial research. The model consists of three main modes: Text-to-Speech (screen reader), Time Management (pomodoro timer), and Productivity (Focus Mode, customizable UI).

Wireframes

We then created wireframes overlayed onto Google Chrome to demonstrate DiverseLink’s use as a browser extension and identify areas of improvement. Our initial designs drew inspiration from browser extensions, such as Grammarly and Honey, which have simple interfaces and seamlessly integrate with the user’s workflow.

04 / Prototype

Bringing the project to life.

Section
Overview

Low-Fidelity Prototype

Our low-fidelity prototype brought our wireframes to life, allowing us to experiment with various methods of functionality and interactions. We conducted a brief usability study with a small handful of users to gauge the performance of our low-fidelity prototype before moving on to our high-fidelity prototype.

High-Fidelity Prototype

Our high-fidelity prototype improved upon our wireframes, addressing key drawbacks, such as a cluttered interface and information density, identified during our initial phase of testing. We selected a dark theme for the extension’s UI, reflecting user preference reported in our survey, and chose blue as our primary accent color to represent Autism Awareness.

05 / Test

Testing the prototype with real users.

Section
Overview

Usability Study

We conducted an unmoderated and fairly informal usability study where users navigated our high-fidelity prototype on Figma. Feedback was positive, and users expressed satisfaction with the more simplified design of our high-fidelity prototype compared to our low-fidelity prototype. The most frequently requested feature was the ability to minimize widgets while in use to declutter the screen further and decrease potential distractions.

Final Design

Our final design includes the functionality to minimize widgets alongside all of DiverseLink’s existing features. We also included a proper logo for DiverseLink, present in our high-fidelity screenshots and prototype file.

Next Steps

DiverseLink was designed to enhance the web browsing experience for neurodivergent individuals. To this end, we sought to address the most frequently reported pain points in our design. However, many neurodivergent individuals have unique needs that DiverseLink does not yet address. Future iterations of DiverseLink could incorporate additional accessibility and customization features to further enhance the web browsing experience.