Before and After: Reimagining a Grocery App Checkout for Accessibility

Design · 5 min read

Before the redesign, the app’s checkout page was dense: compact controls, tiny targets, and several required fields with ambiguous labels. During usability testing with participants who had motor challenges and ADHD, researchers observed frequent mis-taps, abandoned carts, and long pauses while users searched for delivery options.

The after version rethought the layout with larger touch targets, single-column flow, and explicit affordances for primary actions. The team introduced an optional ‘focused checkout’ mode that minimized distractions, increased spacing, and offered a clear single primary CTA. They also added plain-language labels and examples for fields that previously used terse, technical terms.

Quantitative results were immediate: average checkout time decreased by 27%, error rates on required fields dropped by 44%, and the Net Promoter Score for users who opted into focused mode improved by 18 points. Accessibility audits moved the app from AA concerns to a clean pass on core WCAG criteria for contrast and target size.

The project demonstrates that accessible design choices benefit everyone, not just users with disabilities. For startups, investing early in accessibility can reduce long-term technical debt and expand market reach while improving core conversion metrics.