Skip to case study

Rui Duan

Designing continuity across a mobile commerce journey

Client / context
Personal Project
Timeline
2021
Role
Product Designer / UI/UX Designer
Status
Concept
Choice mobile commerce interfaces arranged around a branded phone mockup
Case study / Product Design

At a glance

A connected journey,
beyond checkout.

Choice explores continuity across a complex mobile commerce journey: discover, evaluate, purchase, track, then review or buy again. The independent project combines B2C retail and C2C marketplace architecture with detailed transaction and post-purchase UI states.

Independent prototype · 2021
Interactive mobile commerce prototype; not developed or launched.

Collaboration
Independent, from research through prototype and visual design.
Case scope
Buyer journey; seller architecture mapped as a supporting branch.
Services
  • User Research
  • Competitive Review
  • Product Architecture
  • User Flows
  • Wireframes
  • Interactive Prototype
  • High-fidelity UI
  • Visual System
Retrospective synthesis

From research signals to interface choices

Directional research inputs, linked to the original screens. Their effect on behavior remains untested.

Discovery

Promotions invite exploration

36.6% of respondents said promotions or discounts encouraged purchases.

Interface choice → promotional entry points alongside search and categories.
Evaluation

Trust needs visible detail

Reviews, product imagery, and seller credibility informed the research synthesis.

Interface choice → product and seller context beside selection and purchase actions.
After purchase

Confidence depends on visibility

Delivery information and customer service remained part of the shopping experience.

Interface choice → status, tracking, and help within the order record.

Four decisions connecting the journey

Jump to a decision, or follow the story below.

The starting point

Attraction starts a purchase. Confidence carries it through.

I surveyed 71 online shoppers, followed up with interviews, and reviewed Amazon and Taobao. Price and promotions drew attention; product detail, reviews, seller credibility, and delivery information supported confidence.

The design challenge was to carry that context across discovery, purchase, and delivery without making every screen compete for attention.

Research synthesis

Research synthesis: three shopping perspectives

Scroll through three shopping perspectives. Select a numbered marker to jump to its evidence board; click any board to inspect the original artifact.

Original Choice persona board: Alison Johnson
Original persona synthesis, 2021. A design reference drawn from the survey and interviews, not a participant transcript.
Original Choice persona board: Roman Wilson
Original persona synthesis, 2021. Read alongside the other profiles to compare motivations and pain points.
Original Choice persona board: Hardy Davies
Original persona synthesis, 2021. These profiles guided the concept; they do not establish market-wide behavior.
In practice

A broad marketplace, a focused buyer story

I mapped B2C retail and C2C marketplace behavior, including buyer and seller flows. This case follows the buyer journey, where the interface evidence is strongest.

That focus also exposes a scope trade-off: discovery, transaction, and service need to work together before alternate search modes or a wider seller toolkit add value. The original system map remains available below.

Information architecture / 2021

The system map keeps the marketplace legible

A readable preview of the original architecture. Click the map to inspect the full node relationships.

Select image to inspect
Original Choice information architecture linking Home, Cart, Category, and Personal Center
Original system map, 2021. Seller appears as a branch; this is architecture evidence, not a complete seller-interface demonstration. Open full size to inspect the nodes.
Early interaction study / 2021

The wireframe atlas makes screen coverage visible

A quick view of the original screen set before the interface was refined. Click the atlas to inspect the full sequence.

Select image to inspect
Original Choice wireframe overview connecting the app's main mobile screens
Original wireframe overview, 2021. Read as a map of screen coverage; use the full-size image for detail. The selected checkout comparison below is the closer view.
Primary case-study scope

The buyer journey continues after payment

  1. 01

    Discover and evaluate

    Use search, categories, promotions, and recommendations before reviewing product, seller, variant, and trust information.

  2. 02

    Purchase

    Select variants, manage cart items, edit address and payment details, review fees, and confirm the order.

  3. 03

    Track and return

    Follow delivery, access help, write a review, and use Buy It Again from the order record.

Decision 01

Give each shopping intent a clear starting point

Search serves a known product; categories narrow a known product type; promotions and recommendations invite exploration. Broad departments stay visible while subcategories reveal the next level.

The trade-off is breadth versus attention. Product cards keep favorite and secondary actions available without giving every action the same emphasis. Voice, camera, and barcode search remain concept extensions rather than proof of a validated need.

Connected interface states

Discovery and category hierarchy

Choice Home screen with promotions and product-card interaction states
Home supports exploration, with consistent favorite and secondary actions on product cards.
Choice Category screen with department navigation and subcategory layout alternatives
Broad departments remain visible while the selected category reveals more specific paths.
Decision 02

Change a variant without losing the product

Product Detail brings imagery, price, seller information, reviews, and purchase actions together. Variant selection opens a bottom sheet with the product still visible behind it.

The benefit is continuity; the cost is limited space for options. The sheet keeps selection temporary and reversible. The new exploration below takes this further by showing how an unavailable option could be handled without clearing the shopper's other choices.

Choice Product Detail before and during variant selection in a bottom sheet
The bottom sheet keeps product imagery, price, and purchase context visible while the shopper changes set, color, and quantity.
Decision 03

Make corrections possible before commitment

The cart groups items by seller and exposes quantity, selection, and order details. Checkout separates saved information from new address and payment entry, then brings the order together for review.

Keeping edits close to the summary adds controls, but makes corrections possible before payment. Products, delivery information, payment, discounts, and fees remain inspectable at the commitment point.

13 / Comparison

From information order to a visible checkpoint

Original Choice wireframes for order review, confirmation, and order tracking
Original wireframe artifact, 2021. An earlier design stage, not a measured usability baseline.
Before

Wireframe: establish the review structure

The original wireframe groups order information and confirmation before applying the visual system.

Original Choice high-fidelity category results, order review, and confirmation
Original high-fidelity artifact, 2021. Shows design development; no performance improvement was measured.
After

High fidelity: make the next action clear

The review screen gives the total and primary action emphasis while keeping transaction details available.

Connected interface states

Editable transaction states

Choice cart before and after opening the order-details drawer
The drawer exposes selected items and totals without removing the shopper from the cart.
Choice checkout states for selecting or adding shipping addresses and payment methods
Saved and new address/payment paths remain distinct, making the information needed at each step explicit.
Decision 04

Turn the receipt into a place to act

After payment, the question changes from what to buy to what happens next. Order Detail leads with status, then uses expandable sections for tracking, shipping, payment, and review information.

Progressive disclosure reduces the initial information load at the cost of an extra action for detail. Help, review, and Buy It Again keep the order useful beyond delivery; their effect on retention has not been measured.

Connected interface states

Post-purchase states

Choice order history and collapsed order-detail state
Order history leads into a scannable summary with expandable service and transaction details.
Choice expanded order tracking, shipping, payment, and review states
Progressive disclosure connects delivery status, transaction records, help, review, and repeat purchase.
In practice

Reuse the interaction grammar; change the emphasis

I built the prototype and high-fidelity UI in Figma and Adobe XD. Shared navigation, cards, fields, bottom sheets, and expandable rows connect the journey. Coral and yellow distinguish action emphasis within the original visual system.

The components repeat; the hierarchy changes. Imagery leads discovery, editable information leads checkout, and status plus next actions lead after purchase.

Original Choice component study showing primary and secondary buttons, quantity controls, selection, and expandable rows
Original component study, 2021. Reusable actions and disclosure patterns connect screens; this artifact is not an accessibility audit or a production component library.
In practice

A connected prototype, with a clear validation gap

The original deliverables are a research-informed architecture, buyer and seller flows, wireframes, high-fidelity UI, a visual system, and an interactive prototype. The strongest evidence is the continuity between screens and states.

The project was not developed or launched. The remaining gap is behavioral evidence: can shoppers find the right item, recover from an unavailable choice, and explain the total before committing? The 2026 exploration below makes one of those questions testable; it does not establish a user outcome.

In practice

The next investment should be validation, not more features

The concept's breadth is also its risk. A next iteration should validate one complete buyer task before expanding search modes or seller tools. I would observe recovery, backtracking, and understanding of the final price, then use those findings to prioritize changes. Those sessions have not yet been run.

2026 / Design exploration

Keep every choice in view

A focused follow-up for a small set of high-risk moments: availability, quantity, and order review.

This is a separate 2026 exploration, not part of the 2021 project. It has not been user tested or connected to a production service.

Interactive prototype

Try the shopping flow

Scroll inside the phone, then change a finish and review your order.

Choice / home & living

Atelier tableware

Product
Rose stoneware tableware set on a clean surface Set of 4
Kitchen / everyday

Everyday dining

Soft edges, durable glaze, and a calm place at the table.

$88.00per set

Material
Stoneware
Care
Dishwasher safe
Choose a finish
Quantity 1
Items
$88.00
Delivery
$6.00
Estimated tax
$7.52
Total
$101.52

Choose a finish, then add the set to your cart.

Image detail

Full-size artifact

NEXT PROJECTS

See all WORKS
See all WORKS
Numi Tea concept identity and packaging preview
Visual Design
Numi Tea rebrand
Feather logo explorations combining a wordmark, leaves, and conversation shapes
Visual Design
Feather identity system
Product Design
UX/UI Design
Visual Design
Product Design
UX/UI Design
Visual Design