Preview image. Unlock full-res
Ecommerce order tracking screen displaying shipment status, timeline progress, cost breakdown, and order items with teal accent buttons.
Summary
Mobile ecommerce order confirmation screen showing real-time tracking status, step-by-step delivery progress, itemized pricing, and shipped product details in a clean, grid-based layout.
Visual description
Light gray background with a white card occupying the center. Top section displays "Order ID1234" in bold sans-serif with a teal "Ready to ship" status badge and a forward arrow icon. Below, "Order Tracking" subheading precedes a horizontal progress timeline with four steps: Packaged (completed, green checkmark dated Mar 8 12:04pm), Sent out (completed, checkmark dated Mar 8 12:24pm), In Transit (current, open circle with "Waiting..."), and Delivered (future, open circle with "Waiting..."). Secondary gray text shows EST: 3 days. A light gray dividing line separates order metadata (Order Date, Delivery Date, Courier, Address) with values in dark gray and teal DHL courier icon. "Order Summary" section lists line items (Sub total $400, Discount $0, Shipping $100.56, Total Amount $500.56) in left-aligned rows. "Order Info" footer displays a product image thumbnail of a brown leather couch with "Brown Italy Leather Couch" label, $400.00 price, and Qty: 12, ending with a "View details" text link.
Key takeaway
The horizontal progress timeline with checkmarks for completed steps and open circles for pending ones creates clear visual status hierarchy. The separation of timeline, metadata, and summary into distinct card sections reduces cognitive load. The accent color (teal) is used sparingly on status badges and interactive elements, maintaining emphasis without noise.
Reuse notes
Standard pattern for post-purchase flows, logistics tracking, and order management dashboards. The neutral palette ensures legibility on mobile screens and prints well. Effective for B2C ecommerce, logistics apps, and subscription services. The timeline format scales to 5-7 steps before requiring horizontal scroll or a vertical alternative layout. Works particularly well when courier/carrier logos need to be displayed alongside timeline steps.
