Logo of UI Challenges
Sign in

Gallery

See what others have created

Order Detail
H

hatefulskirmish

@hatefulskirmish

MediumE-commerce

Order Detail

Design a desktop order detail page for a single completed or in-progress purchase. Start with a clear summary block: order number, purchase date, current status, total paid, and one primary action tied to the order state, such as track package or reorder.

Below that, show the purchased items in a table or stacked list. Each row should include a product thumbnail, name, variant if relevant, quantity, unit price, and line total. Keep the total order cost visible near the items section so users can reconcile the math without hunting.

Add separate sections for shipping address, billing method, payment status, and fulfillment/tracking. If the order is still moving, include a progress indicator with the current step highlighted. If it is delivered, swap that area for delivery date and receipt/download actions.

Include secondary actions for invoice download, support contact, and reorder, but keep them visually below the primary task. The page should let a user answer three questions fast: what did I buy, where is it, and what can I do next?

What to deliver

  • Design the order summary header with order number, date, status, and primary action.
  • Lay out line items with thumbnail, title, quantity, unit price, and subtotal.
  • Show shipping, billing, and fulfillment details in separate sections.
  • Include tracking progress or delivery status when the order is in transit.
  • Add secondary actions for reorder, download invoice, and contact support.

Incorporate visual hierarchy to guide the user's eye through the most important elements smoothly.