Design a 4-step Form Wizard with strong emphasis on clarity, interaction states, and progress feedback.
The steps may be:
Personal Details
Address / Contact
Preferences
Review & Confirm
(You may choose any theme — onboarding, booking, registration, etc.)
📋 Functional Requirements
Form Wizard Layout
-Progress indicator (stepper at top OR vertical sidebar)
Each step must include:
-Form fields with labels
-“Next” and “Back” actions
-Input validation (empty/error states)
-A final Review screen summarizing input
-A “Submit” button on final step
-State Requirements
-Active step state
-Completed step state
-Disabled/upcoming step state
Error highlights
-Validation messages
-Progress animation (simple fade/slide)
Accessibility
-Focus states for buttons, fields
-Proper contrast
-Clear labels + instructions
🧪 Testing Requirements
-Verify each step transitions correctly
-Check error states trigger properly
-Review screen updates based on user input
-Confirm mobile layout is readable
-No visual clutter
🟩 Acceptance Criteria
✔ Functional
-4-step flow with clear navigation
-Progress indicator updates correctly
-Each step has validated input fields
-Final review screen summarises data
-Smooth transitions
✔ UI/UX
-Clear visual hierarchy for form fields
-Consistent spacing + typography
-Error states visible and distinct
-Responsive and accessible layout
✔ Code Quality (if implemented)
-Semantic HTML
-No console errors
-Organized CSS
-Accessible labels + focus order
Mockup
Design a 4-step Form Wizard with strong emphasis on clarity, interaction states, and progress feedback.
The steps may be:
Personal Details
Address / Contact
Preferences
Review & Confirm
(You may choose any theme — onboarding, booking, registration, etc.)
📋 Functional Requirements
Form Wizard Layout
-Progress indicator (stepper at top OR vertical sidebar)
Each step must include:
-Form fields with labels
-“Next” and “Back” actions
-Input validation (empty/error states)
-A final Review screen summarizing input
-A “Submit” button on final step
-State Requirements
-Active step state
-Completed step state
-Disabled/upcoming step state
Error highlights
-Validation messages
-Progress animation (simple fade/slide)
Accessibility
-Focus states for buttons, fields
-Proper contrast
-Clear labels + instructions
🧪 Testing Requirements
-Verify each step transitions correctly
-Check error states trigger properly
-Review screen updates based on user input
-Confirm mobile layout is readable
-No visual clutter
🟩 Acceptance Criteria
✔ Functional
-4-step flow with clear navigation
-Progress indicator updates correctly
-Each step has validated input fields
-Final review screen summarises data
-Smooth transitions
✔ UI/UX
-Clear visual hierarchy for form fields
-Consistent spacing + typography
-Error states visible and distinct
-Responsive and accessible layout
✔ Code Quality (if implemented)
-Semantic HTML
-No console errors
-Organized CSS
-Accessible labels + focus order
Mockup