Checkout and Live Order Tracking

Checkout is where a browsing session either becomes an order or falls apart, and tracking is where trust in a local marketplace is won or lost. This concept covers both halves of that moment: a single-screen checkout that makes every charge visible before the order is placed, and a tracking view that keeps answering the only question a waiting customer has — where is it, and when will it arrive.

The checkout illustration keeps the whole decision on one scrollable mobile screen, grouped into plain cards. The delivery address sits at the top with a change action. Fulfillment is a three-way segmented control between delivery, pickup and on-location service, which matters in a catalog that carries both products and bookable services from the same cart. A compact item summary lists each line with its quantity and line price. Payment is a row of selectable methods — a mobile payment option, card and cash — with the chosen one marked by a check. The price breakdown then itemizes subtotal, tax, delivery fee and discount above a bold total, so nothing appears for the first time on a receipt. A full-width place-order button closes the screen.

Once the order exists, tracking turns it into a visible lifecycle. The order reference sits above a large estimated arrival time, and a vertical timeline shows the stages — placed, confirmed, preparing, out for delivery, delivered — with completed stages checked, the current stage emphasized, and the remaining one dimmed. Below it, a map draws the route between the merchant pin and the delivery pin with the courier's position along it, plus zoom and recenter controls. A courier card gives a first name, a vehicle chip, and call and chat actions, and a summary bar pins the merchant, item count and total to the bottom of the screen.

Both screens are the customer-facing side of machinery that runs elsewhere in the product. The stages on the timeline are the same order lifecycle a merchant advances from the order queue, the courier on the map is envisioned as a worker who accepted a dispatched task, and the totals shown here are what later appears in order history, reorder and the merchant's revenue analytics. Keeping the same states visible on every side is what makes a single order answerable end to end.