Multi-step forms have progress indicators

A multi-step onboarding wizard with no progress indicator leaves users guessing whether they are on step two of four or step two of twelve, and that ambiguity drives abandonment that a single line of copy would prevent. Progress indicators set expectations, deliver a small sense of accomplishment as each step completes, and measurably reduce drop-off in conversion funnels — especially on mobile, where the remaining-steps question feels heavier under small viewports.

Add a visible step counter or progress bar to any multi-step form with two or more steps so users always know where they are and how much remains. Edit the wizard component (for example components/onboarding/wizard.tsx) and render a progress element above the step body:

<div className="text-sm text-muted-foreground mb-4">
  Step {currentStep} of {totalSteps}
</div>

<Progress value={(currentStep / totalSteps) * 100} className="mb-6" />

• ID: marketing-conversion.form-optimization.multi-step-progress

• Severity: low

• What to look for: Search the codebase for multi-step form patterns: components with step state management (e.g., const [step, setStep] = useState(1)), wizard-style components, onboarding flow components with multiple screens, or checkout flows with multiple phases. If a multi-step form exists, check whether a progress indicator is present — a step counter ("Step 2 of 4"), a progress bar, or a breadcrumb-style step indicator.

• Pass criteria: Count all multi-step forms or wizard flows in the conversion path. Any multi-step form with at least 2 steps includes a visible progress indicator showing the user where they are and how many steps remain. Report: "X multi-step forms found, Y include progress indicators."

• Fail criteria: A multi-step conversion form with at least 2 steps exists with no progress indicator — users cannot tell how many steps they have completed or how many remain.

• Skip (N/A) when: No multi-step forms found. Signal: no step-state management patterns in form components, and all conversion forms complete in a single submit.

• Detail on fail: "Onboarding wizard component (components/onboarding/wizard.tsx) has 4 steps but no progress indicator. Users see only the current step with no context about remaining steps.".

• Remediation: Progress indicators reduce abandonment in multi-step flows by setting expectations. Even a simple step counter helps:

  // Simple step indicator
  <div className="text-sm text-muted-foreground mb-4">
    Step {currentStep} of {totalSteps}
  </div>
  
  // Or a visual progress bar
  <Progress value={(currentStep / totalSteps) * 100} className="mb-6" />