Back navigation preserves form state

If navigating back to a previous onboarding step wipes out the data the user already entered, any attempt to correct an answer on an earlier step forces the user to re-enter every subsequent field. The user-experience taxon treats form-state preservation as table stakes for multi-step wizards: state loss on back navigation converts a typo-correction into a full restart, and a meaningful fraction of users simply abandon rather than redo five minutes of typing. This is especially punishing for users on mobile or flaky connections.

Lift form state above the step components so navigating between steps preserves it. Use react-hook-form with FormProvider in src/app/(app)/onboarding/layout.tsx so every step shares one form instance, and for route-based wizards persist values to sessionStorage and rehydrate on mount.

const methods = useForm({ defaultValues: savedData });
return (
  <FormProvider {...methods}>
    {children}
  </FormProvider>
);

• ID: saas-onboarding.onboarding-ux.back-navigation-preserves-state

• Severity: low

• What to look for: Count all multi-step form stages. For each, check whether navigating back preserves entered data. Enumerate state management patterns: React state, form library state, URL query params, localStorage, sessionStorage.

• Pass criteria: Navigating back to a previous onboarding step shows previously entered data, not a blank form. At least 1 state persistence mechanism must be present across steps.

• Fail criteria: Navigating back to a previous step clears the previously entered data, forcing the user to re-enter information.

• Skip (N/A) when: The onboarding flow is a single-step form with no back navigation, or no onboarding flow exists.

• Detail on fail: "Navigating back in the multi-step onboarding form clears previously entered fields. Users who go back to correct an answer must re-enter all subsequent data."

• Remediation: Use react-hook-form with a shared context in src/app/(app)/onboarding/layout.tsx:

  const methods = useForm({ defaultValues: savedData });
  return (
    <FormProvider {...methods}>
      {children}
    </FormProvider>
  );
  

  For route-based steps, persist to sessionStorage and rehydrate on mount.