Rewriting Buttons for Neurodiversity: A Component Story from an Agency Redesign

Design · 4 min read

The project began after user research revealed that timing-based affordances—delayed animations, auto-dismiss behaviors, and subtle hover changes—caused anxiety or were missed by users with attention and sensory-processing differences. The agency created a variant of their primary button that prioritized clarity: immediate visual feedback, reduced animation, explicit disabled states, and optional confirmation affordances.

They encoded these variants into their design system with semantic tokens (action-intent, feedback-type, motion-strictness) and explicit accessibility properties (focus-visible policy, aria-expanded behavior). Documentation includes rationale, research snippets, and guidance about when to use the neurodiversity-friendly variant: primarily in forms, multi-step flows, and critical actions.

Rolling the variant out required engineering hooks: a 'reduced-motion' override was expanded to 'reduced-sensory' allowing product-level opt-outs for more than motion, and analytics tracked engagement to ensure changes didn't impair other groups. The result: fewer abandonments in complex flows and positive feedback from user testers who felt calmer and more in control.