Logo of UI Challenges
Sign in
Wireframe example for Order Detail
An example interpretation of the prompt
Icon of target

Order Detail

Icon of book open

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?

Icon of book open

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

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.