Make a brief from a design problem.

Build a responsive checkout flow that implements cognitive load reduction:

## HTML Structure
```html

  

    
Shipping
    
Payment
    
Review
  
  
  

    
  
  
  

    

      

        
      
      

        
More payment options
        
      
    
  

```

## CSS Implementation
```css
.checkout-flow {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
}

.payment-options {
  display: grid;
  gap: 1rem;
}

.primary-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.payment-method {
  padding: 1.5rem;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.payment-method:hover {
  border-color: #174b40;
  transform: translateY(-2px);
}

.payment-method.selected {
  border-color: #174b40;
  background: #d8e9d8;
}

.advanced-options {
  margin-top: 1rem;
  padding: 1rem;
  background: #f7f3ea;
  border-radius: 8px;
}
```

## JavaScript Functionality
```javascript
class CheckoutFlow {
  constructor() {
    this.currentStep = 1;
    this.userPreferences = this.loadUserPreferences();
    this.initializePaymentOptions();
  }

  initializePaymentOptions() {
    // Apply Hick's Law: limit primary options
    const primaryMethods = this.getPrimaryPaymentMethods();
    const secondaryMethods = this.getSecondaryPaymentMethods();
    
    this.renderPrimaryOptions(primaryMethods);
    this.renderSecondaryOptions(secondaryMethods);
  }

  getPrimaryPaymentMethods() {
    // Return 3-4 most common payment methods
    return [
      { id: 'card', name: 'Credit Card', icon: 'credit_card' },
      { id: 'paypal', name: 'PayPal', icon: 'account_balance' },
      { id: 'apple', name: 'Apple Pay', icon: 'apple' }
    ];
  }
}
```

## Performance Requirements
- **First Contentful Paint**: < 1.5s
- **Interaction Response**: < 100ms
- **Bundle Size**: < 45KB gzipped

## Accessibility Standards
- **Keyboard Navigation**: Full tab support
- **Screen Readers**: ARIA labels and landmarks
- **Focus Management**: Logical tab order
- **Color Contrast**: WCAG 2.1 AA compliance

Generate implementation guidance with accessible states and a plan to test the flow.

You are a senior UX designer specializing in e-commerce cognitive load reduction.

## Design Challenge
I need to redesign a mobile checkout flow where users are abandoning due to decision paralysis from too many payment options. The current design shows all 10+ payment methods simultaneously, causing users to feel overwhelmed and exit.

## Strategic Analysis Required

### 1. Cognitive Load Assessment
Analyze the current cognitive burden:
- **Memory Load**: How much information must users remember?
- **Decision Load**: How many choices are presented at once?
- **Visual Load**: How complex is the visual hierarchy?
- **Interaction Load**: How many steps/actions are required?

### 2. Principle Application
Apply these cognitive psychology principles:

**Hick's Law**: Decision time increases with choice quantity
- How can we reduce the number of visible options?
- What's the optimal number of primary choices (3-4)?
- How should secondary options be presented?

**Progressive Disclosure**: Complex information revealed incrementally
- How can we break the checkout into logical steps?
- What information should be shown vs. hidden?
- How can we maintain context while reducing complexity?

**Recognition over Recall**: Leverage familiar patterns
- What payment methods do users recognize immediately?
- How can we use visual cues to reduce cognitive effort?
- What defaults can we intelligently apply?

### 3. Strategic Design Recommendations

#### User Experience Strategy
- **Onboarding**: How to guide users through the new flow
- **Personalization**: How to adapt to user preferences/history
- **Trust Building**: How to maintain confidence while simplifying

#### Business Considerations
- **Conversion Impact**: Balance simplicity with payment method diversity
- **Mobile Optimization**: Touch targets, thumb reach, screen real estate
- **Analytics Integration**: How to measure success and iterate

#### Technical Implementation
- **Progressive Enhancement**: Ensure functionality without JavaScript
- **Performance**: Load times, interaction responsiveness
- **Accessibility**: Screen readers, keyboard navigation, cognitive disabilities

### 4. Deliverables Required

1. **Design Strategy Document** (2-3 pages)
   - Problem analysis with user research insights
   - Strategic approach with rationale
   - Success metrics and KPIs

2. **User Flow Redesign** (wireframes + annotations)
   - Step-by-step flow with cognitive load reductions
   - Mobile-first responsive considerations
   - Error states and edge cases

3. **Component Design System** (specifications)
   - Payment selector component design
   - Progress indicator design
   - Micro-interactions and animations

4. **Implementation Guidelines** (technical specs)
   - CSS/HTML structure recommendations
   - JavaScript interaction patterns
   - Testing methodology and success criteria

### 5. Success Metrics
Define measurable outcomes:
- **Completion Rate**: Compare before and after completion
- **Decision Time**: Measure time to choose a payment method
- **Error Rate**: Track mistakes and recovery
- **User Confidence**: Ask whether the next step feels clear

Provide comprehensive strategic recommendations that balance user experience excellence with business requirements and technical feasibility.