How do you design a low-cognitive-load wizard and implement it technically?

WHAT THIS TESTS: This question tests whether you can translate UX research into a durable technical design. Interviewers want to see that you understand why wizards reduce cognitive load and that you can prevent that load from creeping back in through poor architecture. Specifically they are looking for awareness of progressive disclosure, validation guardrails, and state isolation.

A GOOD ANSWER COVERS: A strong response hits four areas in order. First, it cites progressive disclosure: each step should show only the fields required for that decision point, which keeps the user from scanning irrelevant information and reduces errors. Second, it demands step-level validation: users should not be allowed to proceed while a step contains errors, because fixing errors retroactively across many steps is painful. Third, it addresses state management: recommend a central state machine or at least URL-synced state so that branching logic, back-button behavior, and partial persistence are explicit rather than implicit. Fourth, it describes component structure: each step should be an isolated component that receives draft state and returns validated updates, while a thin orchestrator handles navigation and progress indication.

COMMON WRONG ANSWERS: The biggest red flag is suggesting one monolithic form component with a single local state object and a big switch statement for rendering steps. This collapses under branching logic, makes validation messy, and offers no clean way to persist partial progress. Another warning sign is ignoring the back button or browser history; if your wizard lives in a modal and breaks the expected navigation model, you have recreated the complexity you were trying to hide. Also, treating wizards as pure UI without server alignment is risky: if the backend requires certain fields together, your step boundaries should respect that.

LIKELY FOLLOW-UPS: Interviewers often push deeper by asking how you would handle conditional branching when a later answer invalidates an earlier step. They may also ask about autosave and recovery, or how to make the wizard accessible to screen readers across step transitions. Be ready to discuss optimistic UI, dirty-state tracking, and whether to keep wizard state in the URL query string or a global store.

ONE CONCRETE EXAMPLE: Imagine a tax-filing wizard with five steps. Instead of one massive component, you create a state machine with five states and explicit transitions. Each step component owns its schema and validation. The orchestrator commits valid step data to a draft object in a global store and updates the URL to step=two so the back button works natively. If the user selects self-employed in step two, the machine routes to a custom step three and skips the standard employer step. Because each screen shows fewer fields, users make fewer mistakes and finish faster.

Source: nngroup.com