Design & UXIntermediate 3 hours

One-Page E-Commerce Checkout Form Redesign

Redesign a multi-step checkout form into a single-page layout, reducing friction for mobile users.

The Scenario

An online boutique nursery in Pretoria has a legacy 5-step checkout: Shipping → Billing → Coupon → Delivery Method → Payment. Customer surveys indicate they drop out due to the form length and confusing postal code requirements (since SA doesn't use rigid US-style ZIP codes).

The Brief

Redesign the checkout flow into an optimized one-page layout. Focus on address search autocomplete, flexible postal code input, inline validation, and order summary visibility.

Deliverables

  • A detailed layout plan for the one-page checkout, including column grouping and field ordering
  • A specification of form fields showing autocomplete attributes and error handling logic
  • A localized postal code and shipping cost selector interaction flow (addressing SA suburban naming complexities)
  • An order summary sidebar/header sticky block design detailing item cost, VAT, delivery fee, and discount calculations

Submission Guidance

Make sure the calculation breakdown is mathematically correct (e.g. VAT at 15% in South Africa).

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.

Loading security check...

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