NEURODIVERSITY UNIVERSITY
Expert connection tool and resource hub for neurodiverse individuals, their caretakers and their partners.
ROLE: Lead UX Designer & Researcher
PROJECT DURATION: 4 months
TOOLS USED: Figma, Miro, OptimalWorkshop, UsabilityHub
THE CHALLENGE
Design a responsive web application that allows users to connect with neurodiversity experts, in a simple, intuitive way.
PROJECT BRIEF:
Who: Neurodiverse individuals, their caretakers, and their partners
What: A responsive web application connecting users to neurodiversity experts - both traditional and non-traditional
When & Where: Anywhere, anytime, using mobile devices, tablets, or desktops to access the application
Why: To provide information and resources around neurodiversity to those that need it, in real time.
THE FINE PRINT:
The app must contain:
​
-
An onboarding page
-
Sign up and log in
-
A home screen or dashboard
-
A menu
-
A method for browsing for an expert and posing a question to them
-
A means of paying for an expert's time
SO WHAT IS NEURODIVERSITY?
Neurodiversity includes diagnoses such as ADHD/ADD, the autism spectrum and Asperger’s Syndrome, dyslexia, dyspraxia, dyscalculia, and Tourette’s Syndrome.
WHY THIS TOPIC?
​
Between 30% and 40% of the US population are thought to be neurodiverse. Studies show that the prevalence of neural processing differences such as these is likely even greater, due to misdiagnosis or missed diagnosis. Through this lens, access to expert advice and information for neurodiverse individuals, their caretakers, and their partners becomes a need that is likely to affect the majority of people at some point in their lives.
THE PROJECT:
​
Neurodiversity University is an expert advice and resource hub, where the right answers for unique questions and situations can be found, right at a user’s fingertips. With a focus on accessible interface design, customizable features, and highly organized task flows, my app seeks to create the most user-friendly experience for those needing information and support related to neurodiversity in all its presentations.
THE PROCESS
Using the design-thinking model, create a beautiful, user-centered application
UNDERSTAND
-
Defining the problem
-
Determining existing resources
-
Empathizing with the user
DEFINING THE PROBLEM
Researching user needs, creating a problem statement and possible solution, designing and conducting user surveys and interviews, analyzing data and affinity mapping
RESEARCH
I am more connected to neurodiversity than I ever would have imagined before embarking on this project.
-
Four of my six cousins are either parents to or partners of neurodiverse individuals (encompassing processing differences ranging from moderate-severe autism to Tourette's syndrome.)
-
My closest college friend is a stay-at-home-mom, homeschooling her daughter who has autism
-
My former roommate is a preschool teacher who has seen dyslexia testing become mandated in her state's public school system for all students by or before age five due to prevalence and missed diagnosis, and to maximize efficacy of early intervention. She also suspects she has been living with undiagnosed ADHD.
-
My former employer was diagnosed at age 37 with ADHD.
-
An extended family member is a lobbyist for a state developmental disabilities rights and advocacy organization.
Observing and listening to them speak about their challenges finding expert advice and resources formed the preliminary basis for the scope of this project.
There is a lack of quality resources/expert advice currently available online. It is difficult to find the right help, right away. Having an all-in-one app that connects to a large umbrella of unique resources would fill a gap in the market.
The nature of the neurodiversity spectrum necessitates a range of information that is easily navigated, filterable, highly organized, and very user friendly.
Neurodiverse individuals and their caretakers may require expert advice in the moment. Medical appointments and therapeutic interventions are often hard to schedule/have a waitlist, are limited by geographic location, and may not be tailored to the specific need.
Using the results of my preliminary research, I formed the following problem statement and potential solution.
PROBLEM STATEMENT
Neurodiverse individuals, their caretakers, and their partners, need a way to access expert advice on topics relating to neurodiversity because these populations have specific needs for resources and support and often face barriers to access.
We will know this to be true when we see that users are able to find and connect with the right expert, locate necessary information/resources in our library, and build community with others successfully through use of our app.
POSSIBLE SOLUTION:
An app that is easily navigated, filterable for specific needs, highly organized, and connects users with answers in real time. It will provide a range of tailored informational resources relating to neurodiversity in one user-friendly application. The interface will be simple and focused on connecting the right expert advice with the people who need it.
USER SURVEYS & INTERVIEWS:
Next I created both a survey and interview script and recruited participants to tell me about their experiences with seeking expert resources related to neurodiversity. Survey and interview questions were specifically designed to identify competitors in the market who currently offer resources to my target audience, highlight user needs/successes/ pain points, and gauge importance of certain features prior to making design decisions about my app.
I received six completed surveys and conducted eight user interviews. Participants ranged in age from 28 to 38, and represented the perspectives of neurodiverse individuals, their caretakers, and their partners. I also spoke with two educators and a developmental disabilities rights lobbyist. Surveys were emailed to participants, and interviews were conducted by telephone allowing user perspectives from across the US. (California, Oregon, Texas, and Pennsylvania) I transcribed the interviews in real-time, and both surveys and user interview responses generated an abundance of data!
DATA ANALYSIS:
I began synthesizing the data by creating the user needs map above. These were the themes that would influence the general design of the app, especially in terms of features and informational needs of users.
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
User Needs Map
The next step of my analysis involved directly transferring the information collected in the survey and interview processes onto individual notecards in preparation for affinity mapping. I needed to pull out “informative quotes, facts, opinions, and more" creating a notecard for each piece of information. With three target audience groups reflected among the 14 survey and interview participants, there was a LOT of data! This portion of the exercise spanned two days and took approximately ten hours to complete.
​
​
​
​
​
​
​
​
​
​
​
​
​
I then sorted my note cards into an affinity map (which covered the entirety of the square footage of my dining room). The "logical" groupings included the following categories:
​
-
User Definitions of "neurodiversity"
-
Personal connection to/experience with neurodiversity
-
Barriers to access relating to cost & procuring diagnosis
-
Wishlist
-
Pain points
-
Resources that were "game changers"
-
Miscellaneous experiences/perspectives
-
Attitudes and perceptions relative to various resources/mediums
​
Affinity Map
Insights:
In addition to the aims of the survey and interview scripting, several themes echoed across participant responses. These insights included:
-
The lack of resources for adult populations, especially for those who received a diagnosis “late” in life. Many web-based resources are aimed at caretakers of young children and leaves a large population underrepresented.
-
Gender bias and a necessity for female-specific resources. The diagnosis for many types of neurodiversity is based upon (outdated) behavioral models of adolescent boys. There is evidence of marked differences in presentation of neurodivergence between males and females. This is directly correlated to missed diagnosis and misdiagnosis of neurodiversity in females of all ages.
-
The importance of accessibility and inclusive design, especially when considering the mediums that should be offered for resource/information presentation within the app. (Video and audio content as well as traditional written materials, for example.)
-
The overall prevalence of neurodiversity – it is shockingly common - and yet a lot of stigma and misinformation still exists for neurodivergent individuals and “their people”. These negative attitudes can limit opportunities for open discussion, education, and support around the topic.
DETERMINING EXISTING RESOURCES
Competitor Analysis & Content Audits
COMPETITOR ANALYSES:
I completed a competitor analysis on two websites which each offer a component of what I envisioned for Neurodiversity University: www.autism-help.org, a resource hub for information relating to neurodiversity, and www.psychologytoday.com's therapist search tool. Beyond overall summarization of site objectives and strategies, my analyses also examined marketing advantages, a SWOT profile, and a UX analysis for each site. Highlights of the analyses are below.
-
Wealth of peer reviewed, free information, with a wide-range of subject matter covered.
-
No "Contact Us" option or ability to connect with an expert for specific user questions.
-
Top 10 Google search result listing with lots of site traffic.
-
Non-responsive website with text-heavy, busy layout. Font is nearly illegible and interacting with hyperlinks is difficult due to size. Not inviting.
-
A+ in functionality and flow. Inviting and user-friendly navigation patterns and UI details.
-
Top search result when seeking a therapist with any specialization.
-
Filter options allow a user to sort therapists by focus area, gender, type/modality of therapy offered, and more!
-
Only offers directory of providers - no in-app options to connect.
CONTENT AUDIT
I conducted a content audit - a screen by screen analysis of all site content - on www.understood.org. Understood is a site designed to support neurodiverse individuals, their parents and caregivers, and educators. Their mission statement via their site: To help those who learn and think differently discover their potentials, take control, find community, and stay on positive paths along each stage of life’s journey. With these targeted user groups and overall goals, there is much overlap with my project. A content audit of their site was a great way to deep-dive into competitor analysis in a different way. This allowed me to identify detailed strengths and weaknesses of the site, as well as navigation patterns and UI elements I might want to emulate in my own designs. These are outlined in the Considerations document below.
​
I especially loved the way that this website invited users to customize their user experience, and adapted this fill-in-the-blank needs assessment in my own designs.
​
​
The results of my content audit were then compiled into a multi-page color-coded document, cataloging all site content by its hierarchy.
EMPATHIZING WITH THE USER
​
Creating user personas
USER PERSONAS
It was then time to consider the in-depth target user audience for my app. I created four personas to represent the diverse user needs of multiple target populations: neurodiverse individuals, their caretakers, and their partners. Imaging their needs and goals, frustrations and *voices* gave me a set of reference points to keep the intended users at the center of my design decisions.
IDEATE
-
​Journey maps & user flows
-
Organizing Information Architecture
-
Visualizing the foundations
JOURNEY MAPS & USER FLOWS
Journey maps, information gathering, persona task analyses, user flows
JOURNEY MAPS TO USER FLOWS
I created journey maps illustrating my personas' motivations and user flows showing the "happy path" for use of the main features I was envisioning for my app: Ask an Expert, The Library, and The Courtyard.
ORGANIZING INFORMATION ARCHITECTURE
Whiteboarding and navigational patterns, card sorts
WHITEBOARDING & NAVIGATIONAL PATTERNS
After the previous steps of journey mapping and user flow design, I had a good sense of the general structure of my application. It was time to draw up the "big picture" of its Information Architecture. Using Miro, I outlined a site map of preliminary hierarchy for Neurodiversity University and its navigational patterns.
Site Map
CARD SORTS
To check whether these navigational patterns were intuitive for users, I created a closed card sort on OptimalWorkshop. Users were asked to group "cards" of site functions/content into their corresponding feature categories.
OptimalWorkshop Card Sort Preview
Card sort results informed slight changes to my site map and adjustments to the design that would be represented in my initial sketches and paper wireframes.
-
Users want access to their saved/customized resources in multiple ways - through the user dashboard, and through the corresponding feature's landing page.
-
The Social Media resources were confusing to some users - how to clarify that it is connected with The Courtyard's community of non-traditional experts??
VISUALIZING THE FOUNDATIONS
Paper wireframes and prototypes, low-fidelity wireframes, mid-fidelity wireframes
PAPER WIREFRAMES
I sketched approximately 30 wireframes with pencil and paper, visualizing layout of screen elements for Neurodiversity University's main feature flows, for both mobile and desktop.
Ask an Expert - Expert Search (Mobile)
Ask an Expert - Schedule with an Expert (Desktop)
I then created a paper prototype illustrating the user flow through each of the core app features, as well as the introduction and onboarding progressions. These were then annotated to highlight interactive details.
The Courtyard - Search for a Group (Mobile)
LOW-FIDELITY WIREFRAMES
Using Figma, I then translated each of the paper wireframes into a low-fidelity digital wireframe. By visualizing these core feature flows to a more accurate scale, I was better able to evaluate and refine navigation patterns and basic design elements.
Introduction Screen & Onboarding Flow
MID-FIDELITY WIREFRAMES
At this point, it was time to fill in the small details and create mid-fidelity wireframes that would begin to bring my app to life. I knew I wanted to create content (vs using lorem ipsum placeholder text), and enjoyed copywriting the content for each wireframe.
Mid-Fidelity Wireframes
PROTOTYPE
-
Interactive prototyping
INTERACTIVE PROTOTYPING
MID-FIDELITY PROTOTYPE
I used Figma's prototyping function to create an interactive prototype which would allow users to tap through and explore site features and functions in the next step of my design process - usability testing.
Mid-Fidelity Prototype
TEST
-
Testing the hypothesis
-
Data analysis & reporting
TESTING THE HYPOTHESIS
Designing and moderating usability testing, preference testing
USABILITY TESTING
With an interactive prototype, I could now test how successful my design was in its initial aims: providing an app that is easily navigated, highly organized, and connects users to the right expert advice in real time. I created a usability test plan and script, then moderated six remote tests via Google Meets using Vidyard to record the sessions.
My participants ranged in age from 32 to 66. Each of my target user audiences was represented: neurodiverse individuals, their caretakers, and their partners. This group of participants also offered new demographics from my initial user interviews, including: family members other than a primary caretaker (siblings, uncles) of neurodiverse individuals, an education director of a technical school, a public health nurse, and a social services coordinator.
PREFERENCE TESTING
I then conducted preference testing using two separate tests created in UsabilityHub. I had 8 participants who were asked to select their preference between two given design options in multiple scenarios. I was seeking user feedback on more specific design elements such as the color scheme and layout for the Neurodiversity University home page. I also was considering different options for the header and navigation toolbar, as I hadn't quite landed on a design that would create my desired user experience.
DATA ANALYSIS & REPORTING
Synthesis, rainbow report
DATA SYNTHESIS
I transcribed and grouped the data from the usability test sessions into an affinity map, sorting into several categories: observations, positive quotes, negative quotes, and errors (ranked by severity). There was a TON of data! So many insights were gained to revise and improve my design.
Affinity Mapping
RAINBOW REPORT
From this plethora of data, I created a "rainbow report" summarizing the results of the usability tests and outlining revisions made and next steps. Tap the Rainbow Report below to view details.
Rainbow Report
Participant Information & Color Key
User Satisfaction Survey Results
ITERATE
-
Revising for increased usability
-
Polishing the designs
-
Design collaboration & peer feedback
REVISING FOR INCREASED USABILITY
Applying user feedback to improve usability for app features and flows
REVISIONS
Using the data and next steps outlined in the Rainbow Report, I made adjustments to my designs to incorporate usability test feedback, focused on improving clarity and flow. Here are a few examples of before and after images of updated wireframes correcting identified usability errors
POLISHING THE DESIGNS
High-fidelity wireframes with full color and imagery, utilizing grids and responsive frameworks, aligning UI elements with industry guidelines (including accessibility standards) and design principles, creating a style guide and design system for the application
HIGH-FIDELITY WIREFRAMES
Now that I'd cemented content and flow for my application, I could focus on polishing the designs. I began by selecting just the right images and illustrations for each wireframe, playing with color palette and considering interface options.
High-Fidelity Wireframes version 1
GRIDS & RESPONSIVE FRAMEWORKS
I applied grids to check for consistency in alignment between wireframes, and identify breakpoints that would apply across devices. For mobile, I used 4 columns with a 20 px margin and 8 px gutters. For desktop, I used a 12 column grid with 70 px margins and 20 px gutters. Use of a grid identified a few cases of imbalance in element placement, and further iterations were designed.
DESIGN PRINCIPLES & ACCESSIBILITY
Using Gestalt principles such as emphasis, hierarchy, and balance along with industry guidelines for best practices in design, I made several revisions to my wireframes. Especially critical was alignment with Web Content Accessibility Guidelines (WCAG), as visual processing differences are prevalent for neurodiverse individuals.
​
With neurodiversity research as my guide, I developed a simple, muted color palette in shades of grey with one call-to-action color (cranberry). I selected Lato typeface for its readability from a selection of font families indicated for this population. I also redesigned the header and footer using amorphous shapes to invite and draw the eye down to page content, and soften the overall tone. Finally, I revised my logo, to better match the visual maturity of the app.
Brian the Brain - Initial Logo
Updated Logo
Updated Color Palette
There were multiple iterations occurring rapidly in this phase of the project, as I refined and refined and refined again. A crucial revision included narrowing down Neurodiversity University's main features from four to three (shown in example below). To borrow the concept from the archetypal hero's cycle, this was the crisis point ("All is lost!") of my design process. Through trial and error and retrial, I finally settled upon a design system.
UI STYLE GUIDE & DESIGN SYSTEM
I created a UI style guide and design system document preparing the project for hand-off and development.
DESIGN COLLABORATION & PEER FEEDBACK
Testing latest design iterations, making final revisions
DESIGN COLLABORATION
To test my improved designs, I solicited peer feedback from four other UX Design Immersion students on my updated mobile prototype. I sifted through their recommendations and selectively revised a final few design elements.
To make the function of these pages clear, I created a tagline for each to show where a user's saved/favorited resources are collected. I also linked the heart icon to these pages in the prototype to show the user that once a library or community resource, or expert is favorited, it can be found in these customizable areas. My Library, My Experts, and My Community can be accessed either through the user dashboard or the main landing page of each feature.
I resized and relocated My Calendar to higher on the page and realigned the buttons (My Library, My Experts, My Community) to better frame the user image.
Using a background color to frame the My Story section added emphasis to the dropdown menu options.
THE RESULT:
A thoughtfully designed, accessibility-driven application connecting neurodiverse individuals, their caretakers, and their partners to expert advice and a curated collection of resources for all forms of neurodiversity.
Watch my video walkthrough of the Neurodiversity University application or explore my prototype yourself!
THANK YOU!
​
Thank you so much for reviewing my work. If you are seeking a UX/UI Designer with a background in the study of human motivation and behavior and a commitment to addressing critical societal and global issues through design, let's talk!