The original onboarding flow had a 62% completion rate. Exit surveys pointed to confusion, not disinterest. Users knew what they wanted — they just couldn't navigate the product to get there.
The Audit
A full accessibility audit revealed 23 distinct issues. The highest-impact ones were not technical — they were cognitive: too many choices per screen, unclear progress indication, error messages that described the problem without explaining the fix.
The Redesign
Each step was reduced to a single decision. Progress was shown as a numbered indicator with explicit labels ("Step 2 of 4: Set your preferences"). Error messages were rewritten using plain language with specific corrective actions.
On the technical side: focus was managed explicitly at each step transition so keyboard and screen reader users always knew where they were. All form fields were associated with visible labels. Touch targets were expanded to 44px minimum.
function StepTransition({ step }: { step: number }) {
const headingRef = useRef<HTMLHeadingElement>(null);
useEffect(() => {
headingRef.current?.focus();
}, [step]);
return <h2 ref={headingRef} tabIndex={-1}>Step {step}</h2>;
}
The Result
Completion rate increased from 62% to 83% within six weeks of launch. Support tickets related to onboarding dropped by 41%.