Terra Outfitters: the plan › Checkout

Checkout planned

Purpose
Take the order: where to send it and how to pay, with nothing in the way.
Main task
Buy one Trailhead Fleece in green. (The usability lesson’s test task.)

Not built yet. This wireframe is the plan for it.

Content, most important first

  1. Order summary
  2. Shipping address, with labels that stay put
  3. Shipping speed
  4. Payment
  5. Place order
  6. Errors next to the field they are about

Wireframe

Regions in reading order, which is also tab order. The outlined box is the page’s main action.
Header: brand only (fewer exits while paying)
Order summary: 1 × Trailhead Fleece, Fern green · total
Shipping address: name, street, city, postal code, country
Shipping speed
Payment: card or wallet
Place order
Footer: help, returns