UI/UX Design

Multi-Step Wizard UX Pattern

Describe your multi-step process and get a complete wizard UX design - progress indication, step validation, save/resume, and error recovery.

By Arshad Hossain

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.

Why "Multi-Step Wizard UX Pattern" Works

This prompt produces reliable output because it leverages audience specification and depth requirements and structured enumeration. Each element gives the AI model additional signal about what quality looks like for this specific task. The AI will produce user-centered design specifications with component details, interaction states, and accessibility considerations, because the prompt's structure leaves no room for generic filler.

These ui/ux design tips will help you get stronger results when using "Multi-Step Wizard UX Pattern" and similar prompts in this category.

When to Use "Multi-Step Wizard UX Pattern"

"Multi-Step Wizard UX Pattern" is particularly useful in these situations. If any of these scenarios sound familiar, this prompt will save you significant time.

What You Will Get from "Multi-Step Wizard UX Pattern"

When you use "Multi-Step Wizard UX Pattern" with ChatGPT, Claude, or Gemini, here is what to expect in the AI output.

How to Customize "Multi-Step Wizard UX Pattern"

Adapt "Multi-Step Wizard UX Pattern" to your specific situation by modifying these key areas. The more context you add, the better the results.