Context

ND-Connect is a startup I joined as a co-founder of. It evolved out of a non-profit my co-founders had been running for a few years, focusing on building neurodivergent community resources

Time Frame

5 months and counting

Role

Co-founding UX Engineer

(Primary User Research and Testing, Wireframing, Prototype Development, Design Systems, Product Strategy, Front-end Web Development)

"70% of neurodivergent people don't have access to mentors that get us"

-Mentor Canada, 2022

Background

A group of friends started Viability, a neurodivergent-led non-profit focused on creating community resources for neurodivergent folks and providing corporate consulting around neuroinclusion. ND Connect formed as an offshoot, aiming to build a mentorship community and help create networks of neurodivergent life and career support.

ND Connect Team

four people with their names and roles annotated

Accessibility

Handwritten text saying: 'How can we ensure everyone in our community has access to mentorship and support?

WCAG AAA

WCAG is the most widely accepted web accessibility standard. Most sites aim for AA compliance, ensuring things are usable for most people without going out of the way. We're specifically building for a disabled and accessibility-aware community, so we needed to go further than the bare minimum of AA compliance. We started with designing all of our components with AAA contrast levels and accessible touch target sizes in mind. Our choice to use Chakra UI as our front-end component library was also deliberate, specifically because of Chakra's deep ARIA screen-reader support. Once we started development, keyboard navigation was also a high priority, even including dedicated keyboard shortcuts in our connection browsing stack.

Button States

People with some cognitive disabilities and motor impairments have difficulties telling the difference between a button that is clicked and one which isn't. Simple changes to make button states super clear can make a huge difference and reduce frustration. For ND Connect, I combined a more visually engaging skeuomorphic button style with our minimal design system. Immediately after testing this out on our landing page, we got specific praise for this. Our buttons were satisfying to click, and some users told us they would click them just because it's fun!

A collection of shapes with the words ADHD, Autism, Dyslexia, Dyspraxia, and memory disabilities written in them

Copywriting

The visual attributes of ND Connect were accessible, but the content needed to be too. We were very deliberate about how we worded button labels, headers, and input prompts to ensure they were easily understandable across disabilities. Text formatting was another key choice, bolding key points, avoiding underlining for dyslexic users, and using easily-scannable bullet points where possible.

A screenshot of a user profile on ND Connect

Designing for Anxiety

Social platforms can easily trigger social anxiety in users. This is especially relevant considering how many autistic folks experience trauma related to how they're perceived and understood by others. We wanted to ease this as much as possible by making sure our users know how they appear to others on our platform and what comes next. At the end of our setup process, I've given users a preview of their profile, in the same card view that will pop up for other users in their connection matching stack. This gives users that extra piece of mind knowing exactly how they'll be represented to other users and putting all the information they've added to their profile into context.

How can we help people who learn and think differently grow in the ways that matter to them?

Humanity

Robust Profile Building

On a platform all about finding someone who gets you, you need solid profile prompts. Our customer interviews and user tests yielded some interesting questions people would like to know about each other before connecting. We incorporated these as optional prompts to complement our identity tag system. This puts a lot of information in a profile, so we prioritized the scan-ability of our profile card design.

Handwritten text saying 'How can we make professional growth more human?'

Accounting for when things don't work out

Relationships are complicated, even when solely focused on support in a specific area. Two users might have multiple possible relationship types, and they might not know what their relationship looks like until they've met a few times. Despite that ambiguity and fluidity, our users specifically asked for structured relationship types. To accommodate this, we created a two-stage relationship system. New connections default to 'informal connections'. If things work out and you want a structured relationship type, you can 'commit' to a structured peer-peer or mentor-mentee relationship. Some users also expressed anxiety with ending a connection that wasn't working out. To counter this, we designed an expiring commitment system that gives users a built-in exit from a stale connection.

a flow chart showing two users connect as informal connections and choose to disconnect or commit to a structured relationship

“I’m so interested in your project because it seems like you will be making this kind of connection more broadly available and it’s exactly the platform I would have looked for myself a few years back if it had existed. ”

-Eleanor, a future mentor