Skip to content

Commerce and wallet interface | Shipped product

QuickCart: Discovery to Checkout

I designed the path from discovery to checkout: product options, search suggestions and a wishlist, alongside a wallet with empty and history states and account entry.

Commerce and wallet interfaceProduct options · Search suggestions · Wishlist
QuickCart quick-commerce app screens

PROJECT AT A GLANCE

The essentials.

Design scope
Commerce and wallet interface
Available views
Empty wallet · Wallet history
Screen focus
Shipped interface
Design emphasis
Shopping flow and wallet states
Skip to project details

KEY DESIGN DECISIONS

Shopping views and wallet states.

Three decisions shape how shopping and the wallet sit together in the app.

01

Shopping and wallet views

I kept the wallet as its own surface, separate from the shopping screens, so balance and transactions stay apart from browsing.

02

Empty-state continuity

When the wallet is empty, the balance and promotion-code entry stay in place; only the message changes.

03

Transaction history

Once there is activity, dated transaction records fill the same history area the empty message occupied.

Each of these decisions shipped in QuickCart.

Design
Question

How should the wallet behave before and after its first transaction, and how do people make product choices along the way?

Available
Design Scope

The product covers these interface areas:

  • Product options
  • Search suggestions
  • Wishlist

Screen
Coverage

How the shipped screens connect.

Product optionsSearch suggestionsWishlistEmpty walletWallet history

Pattern
review

Key structures in the shipped product:

  • Empty and populated wallet screens retain the same balance context.
  • The transaction list is the visible difference between the two wallet states.
  • Product selection and wallet history are designed as separate tasks.

Discovery & Checkout
Flows

Product details — QuickCart screen
Wallet — empty state — QuickCart screen
Home with sign-in prompt — QuickCart screen
Wallet — transaction history — QuickCart screen
More and help — QuickCart screen
Sign-in introduction — QuickCart screen
Search suggestions — QuickCart screen
Wishlist — QuickCart screen
Wishlist — alternate export — QuickCart screen

Product details

Product details with imagery, size selection, pricing and add to cart. Values shown are sample data.

01 / 09

FROM THE PROJECT FILES

Inside the shipped product

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

Product details

Product details — QuickCart screen
The product view shows imagery, size selection, pricing and an add-to-cart action. View full-size screen

Wallet — empty state

Wallet — empty state — QuickCart screen
The empty wallet keeps the balance and promotion-code entry visible while stating that there are no transactions. View full-size screen

Wallet — transaction history

Wallet — transaction history — QuickCart screen
The populated wallet replaces the empty message with dated transaction entries, so the change between states is easy to see. View full-size screen

What I’d Change
Next

Looking back, I’d design explicit feedback for promotion-code entry. Neither wallet state shows how a code is validated, and that confirmation deserves its own state.