Design & UXIntermediate 2 to 3 hours

Interactive Prototype for a Checkout Flow

Design a clickable prototype for a 4-step checkout with branching logic.

The Scenario

An e-commerce site needs to test their new checkout flow before development. The flow has 4 steps: Cart Review → Shipping → Payment → Confirmation. But there is branching: if the user selects "collect in store," the shipping step should be skipped.

The Brief

Design the mid-fidelity prototype specification. Define every screen state, the branching logic, error states, and the loading/success transitions.

Deliverables

  • A screen-by-screen specification for all 4 steps plus the branch variant
  • The branching logic: which user actions trigger which paths (flowchart format)
  • Error states for each step (invalid card, out-of-stock item, address not found)
  • Loading and success state descriptions for the payment step

Submission Guidance

A prototype without error states is not a prototype. Users will enter wrong card numbers, leave fields blank, and try to buy out-of-stock items. Design for these.

Submit Your Work

Your submission is graded against the rubric on the right. If you pass, you get a public Badge URL you can share on LinkedIn. There is no draft save, so work offline first and paste your finished response here.

This appears on your public Badge.

0/20000 charactersMarkdown supported

One per line or comma separated. Up to 5 links.

By submitting, you agree your submission text, name, and evaluation will appear on a public Badge URL.