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.

We'll email you the permanent link to your Badge so you never lose it. Not shown publicly.

0/20000 charactersMarkdown supported

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

Loading security check...

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