Design a multi-step checkout flow
PremiumFrontend systemEasy
- Idempotency key
- State machine
- Form validation
Quick answer
This frontend system interview question asks you to design a multi-step checkout flow. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design a multi-step checkout flow for an e-commerce site like Amazon: address, delivery, payment, then review and place order. The hard part is keeping progress through reloads and back buttons, validating each step, and placing the order exactly once even after a double-click or a slow network.
The user can go back to change earlier steps, reload the page without losing progress, and apply a coupon at any step. Payment details are entered in a hosted iframe from the payment provider.
What must a multi-step checkout flow do?
- Steps: Address, Delivery, Payment, Review, shown with a progress indicator; completed steps are clickable, future steps are not.
- Persistence: A reload always restores the step and the entered data; closing the tab and returning within 30 minutes restores them too where browser storage allows (never card data).
How well must it do it?
- Exactly once: One order per checkout even with double clicks, retries or a reload during submission.
- Speed: Moving between steps is instant; validation errors appear within 100 ms of blur.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Idempotency key
- State machine
- Form validation
- Draft persistence
- Route guards
- Payment iframe
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a multi-step checkout flow and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Easy, so it suits engineers who are new to frontend system interviews. It is also a good warm-up before harder questions.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team