You are a senior UX/UI designer specializing in e-commerce payment systems with deep expertise in cognitive load reduction. Your task is to redesign a mobile-first checkout payment interface that currently suffers from decision paralysis and high abandonment rates.
CONTEXT:
- Platform: Mobile e-commerce app (iOS/Android)
- Current Problem: 70% cart abandonment at payment step
- Root Cause: 12 payment options shown simultaneously, cognitive overload
- Target Users: Mobile shoppers aged 25-45, varying tech literacy
- Business Goal: Increase conversion rate by 40%
COGNITIVE LOAD ISSUES IDENTIFIED:
1. **Choice Overload**: 12 payment options exceed Hick's Law optimal range (3-4 choices)
2. **Visual Hierarchy**: Equal visual weight prevents attention guidance
3. **Touch Target Issues**: Mobile touch targets below 44px minimum
4. **Context Blindness**: No adaptation based on user history or purchase amount
5. **Memory Burden**: Users must remember and compare option details
SPECIFIC IMPROVEMENTS NEEDED:
- Reduce visible choices from 12 to 3-4 primary options
- Implement smart defaults based on user history
- Add progressive disclosure for secondary options
- Increase touch target sizes for mobile
- Add visual hierarchy to guide attention
block
MUST RESPECT
- Mobile-first responsive design (320px minimum width)
- Touch targets minimum 44px × 44px
- WCAG 2.1 AA accessibility compliance
- Support for iOS 14+ and Android 8+
- Maintain brand colors and typography
- Load time under 2 seconds on 3G
- Support for 10+ payment methods (but show 3-4 primarily)
- Integration with existing payment gateway APIs
- Biometric authentication support where available
speed
PERFORMANCE TARGETS
- Decision time: Reduce from 45s to under 15s
- Form completion: Increase from 30% to 70%
- Error rate: Decrease by 60%
- User satisfaction: Improve to 4.5/5.0
- Conversion rate: Increase by 40%
check_circle
IMPLEMENT THESE PATTERNS
1. **PROGRESSIVE DISCLOSURE PAYMENT SELECTOR**
- Primary section: Show 3-4 most common payment methods
- Secondary section: "More payment options" accordion/dropdown
- Smart defaults: Auto-select user's last successful method
- Visual hierarchy: Primary options 2x larger than secondary
2. **CONTEXT-AWARE ADAPTATION**
- Purchase amount < $50: Show fewer options (simplicity focus)
- Purchase amount > $500: Show more options (flexibility focus)
- Return users: Highlight previously used methods
- New users: Show most popular options first
3. **MOBILE-OPTIMIZED INTERACTION**
- Bottom sheet for payment selection (thumb-friendly)
- Swipe gestures to reveal more options
- Haptic feedback on selection
- One-tap payment for saved methods
4. **TRUST & CONFIDENCE BUILDERS**
- Payment method security badges
- Processing time indicators
- Fee transparency (if applicable)
- Help tooltips for complex options
dangerous
DO NOT IMPLEMENT
❌ **CHOICE PARALYSIS**
- Never show all 12+ payment options simultaneously
- Avoid equal visual weight for all options
- Don't use generic "Payment Method" dropdown without hierarchy
❌ **MOBILE USABILITY ISSUES**
- No touch targets smaller than 44px
- Don't require pinch-to-zoom for readability
- Avoid hover-only interactions
- Don't place critical actions in hard-to-reach areas
❌ **COGNITIVE OVERLOAD**
- Don't require users to remember information from previous steps
- Avoid complex fee structures without clear explanation
- Don't hide critical information behind multiple clicks
- Avoid using industry jargon without explanation
❌ **TRUST DESTROYERS**
- Don't hide security information
- Avoid unexpected costs revealed at final step
- Don't use vague error messages
- Avoid breaking established payment flow patterns
1. **COMPONENT LIBRARY**
- PaymentMethodCard component (primary options)
- PaymentMethodList component (secondary options)
- PaymentSelector container component
- ProgressIndicator component
- TrustBadge component
2. **DESIGN SYSTEM INTEGRATION**
- Primary action: 48px height, 16px radius, purple gradient
- Secondary action: 40px height, 8px radius, gray background
- Touch targets: Minimum 44px × 44px
- Spacing: 8px grid system
- Typography: Mobile-optimized sizing and contrast
3. **INTERACTIVE PROTOTYPE**
- Full user flow from cart to confirmation
- Mobile-first responsive behavior
- Micro-interactions and transitions
- Error states and recovery flows
- Loading states and skeleton screens
4. **SPECIFICATION DOCUMENT**
- Component properties and variants
- Interaction patterns and gestures
- Accessibility compliance details
- Performance optimization guidelines
YOUR SOLUTION WILL BE EVALUATED ON:
✅ **COGNITIVE LOAD REDUCTION**
- Decision time measured and reduced by 60%+
- User error rate decreased by 50%+
- Subjective cognitive load rating improved
✅ **USABILITY STANDARDS**
- All touch targets meet 44px minimum
- WCAG 2.1 AA compliance verified
- Load time under 2 seconds on 3G
- No horizontal scrolling on mobile
✅ **BUSINESS IMPACT**
- Conversion rate increase of 40%+
- Cart abandonment reduction of 50%+
- User satisfaction score 4.5/5.0+
- Return user rate improvement
✅ **TECHNICAL EXCELLENCE**
- Clean, maintainable component code
- Proper accessibility implementation
- Performance optimization
- Cross-platform compatibility
SUBMISSION REQUIREMENTS:
- Figma file with all components and variants
- Interactive prototype with full user flow
- Design specification document
- Usability test results with 5+ participants
- Performance metrics and optimization report
