
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?
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.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.