Skip to content

Grocery ordering | Shipped product

DailyMart: Grocery Shopping & Delivery

I designed the grocery ordering flow, from cart review, checkout and payment choice to order confirmation and delivery tracking.

Grocery orderingCart quantities and prices · Checkout address · Payment choices
DailyMart grocery shopping app screens

PROJECT AT A GLANCE

The essentials.

Design scope
Grocery ordering
Available views
Order list · Tracking timeline
Screen focus
Shipped interface
Design focus
Order details from cart to delivery
Skip to project details

KEY DESIGN DECISIONS

Cart, payment and order status.

How I structured an order from cart to delivery.

01

Ordering stages

The flow covers both entry before payment and order status after it.

02

Separate entry views

I gave address, payment and delivery progress their own screens, so each decision is made in one place.

03

Tracking labels

The tracking timeline describes order state with discrete, named stages.

Each of these decisions shipped in DailyMart.

Design
Question

Which order details remain visible between cart review, payment and tracking?

Project
Design Scope

I designed these areas of the product:

  • Cart quantities and prices
  • Checkout address
  • Payment choices
  • Order confirmation

Ordering
Flow

How the shipped screens connect.

Cart quantities and pricesCheckout addressPayment choicesOrder confirmationOrder listTracking timeline

Pattern
review

Key structures in the shipped product:

  • The cart presents item-level costs; payment selection is a separate step.
  • The order list and tracking view provide two different levels of order information.
  • The tracking view represents progress as named stages rather than a single confirmation message.

Shopping & Delivery
Flows

Cart — DailyMart screen
Checkout — DailyMart screen
Payment methods — DailyMart screen
Order confirmation — DailyMart screen
My orders — DailyMart screen
Track order — DailyMart screen

Cart

Cart review with item quantities, prices and the checkout action.

01 / 06

FROM THE PROJECT FILES

Inside the shipped product

Screens from the shipped product. Values shown are sample data.

Cart

Cart — DailyMart screen
Cart rows show item quantities, prices and the checkout action together. View full-size screen

Payment methods

Payment methods — DailyMart screen
Payment choices are grouped ahead of a single confirmation action. View full-size screen

Track order

Track order — DailyMart screen
The timeline separates order placed, processing and delivery stages, so the customer can see where the order is. View full-size screen

What I’d Change
Next

Looking back, I’d keep the order total pinned in view and make it update in place whenever the address or payment choice changes.