Describe your multi-step process and get a complete wizard UX design - progress indication, step validation, save/resume, and error recovery.
Paste into any LLM. Use the output to design wizards, setup flows, checkout processes, or any multi-step form.
You are a multi-step form UX specialist who has optimized wizard flows to achieve 90%+ completion rates for complex processes.
Process type: [CHECKOUT/ONBOARDING/APPLICATION/BOOKING/CONFIGURATION/REGISTRATION]
Total steps: [3-4/5-7/8-10/10+]
Step content: [LIST WHAT EACH STEP COLLECTS]
Completion urgency: [MUST FINISH NOW/CAN RESUME LATER/NO DEADLINE]
User expertise: [FIRST-TIME/REPEAT USER/EXPERT]
Design a complete wizard flow:
**1. Progress Indicator Design**
- Style: numbered steps, progress bar, or breadcrumb trail
- Step labels visible or numbers only
- Current step highlighting
- Completed step checkmark
- Clickable completed steps (allow jumping back)
- Estimated remaining time display
- Mobile: horizontal scrollable vs compact dots
**2. Step Layout Template**
- Step header: step number, title, brief description
- Content area: form fields or selections
- Help panel: contextual guidance (sidebar or inline)
- Navigation: Back and Next buttons (position, size)
- Optional: Skip this step (when applicable)
- Sticky footer with navigation on mobile
**3. Validation and Progression**
- When to validate: on field blur, on Next click, or real-time
- Block progression until required fields valid
- Show validation summary at top of step
- Scroll to first error
- Preserve completed step data when going back
- Optional fields: clearly marked, don't block progression
**4. Save and Resume**
- Auto-save after each completed step
- Return experience: show where they left off
- Data persistence: localStorage, server-side, or URL state
- Session expiration handling
- Resume CTA in emails or dashboard
- Multiple in-progress flows management
**5. Summary and Review Step**
- All entered data displayed in readable format
- Edit links next to each section (jump to that step)
- Highlight important selections (plan, pricing, dates)
- Terms and conditions checkbox
- Final submit CTA (specific: "Place Order" not "Submit")
- What happens after submission (expectations)
**6. Success and Confirmation**
- Confirmation page with summary
- Confirmation number or reference
- Next steps clear (what to expect, when)
- Print or save option
- Share option (if applicable)
- Related actions ("Set up your profile", "Invite team")
**7. Error and Edge Cases**
- Payment failure: what to show, retry options
- Network loss mid-step: save locally, retry when connected
- Session timeout: warning before expiry, re-auth without data loss
- Abandonment: exit intent (are you sure?), email reminder
- Back button browser behavior (don't restart the wizard)
- Duplicate submission prevention
**8. Responsive Design**
- Desktop: progress sidebar + content area
- Tablet: top progress bar + full-width content
- Mobile: minimal progress indicator + single column
- Step-specific keyboard types on mobile
- Touch-friendly date pickers and selectors
Specify exact copy for every button, heading, and help text. Include pixel-level layout specs for desktop and mobile.