Rui Duan

Product Design / Personal project

Designing continuity across a mobile commerce journey

Research-informed B2C/C2C prototype spanning discovery, Product Detail, cart, checkout, tracking, review, and repeat purchase.

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.

Role
Product Designer / UI/UX Designer
Project type
Personal project
Timeline
2021
Status
ConceptInteractive mobile commerce prototype; not developed or launched.
Collaboration
Independently completed the 71-person survey, follow-up interviews, competitive review, B2C/C2C product structure, buyer and seller flows, wireframes, interactive prototype, high-fidelity UI, and visual system.
Team
Independent project
Choice mobile commerce interfaces arranged around a branded phone mockup
The selected screens connect product discovery, Product Detail, cart, and checkout in one mobile system.

Research showed that convenience alone was not enough

I surveyed 71 online shoppers and followed the survey with interviews. I also reviewed Amazon and Taobao to compare product discovery, promotions, marketplace behavior, customer service, and transaction patterns.

The findings showed that shopping decisions depended on more than convenience: product quality, variety, price, reviews, imagery, seller credibility, delivery visibility, and customer service all affected confidence across the journey.

One system had to support retail and marketplace behavior

Choice combines B2C retail patterns with C2C marketplace behavior. The full architecture included the buyer journey as well as seller onboarding, listing creation, inventory, and seller-management flows.

The main case focuses on the buyer journey because it contains the strongest interaction and UI evidence: discover → evaluate → purchase → track → review / buy again. Seller-side architecture remains a supporting system branch.

Primary case-study scope

The buyer journey continues after payment

  1. Discover and evaluate

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

  2. Purchase

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

  3. Track and return

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

Decision

Discovery needed to support multiple levels of intent

Survey and interview participants did not all begin shopping with the same goal. I designed text search for a known product, category browsing for a known product type, promotions and recommendations for exploration, and voice/camera/barcode concepts for alternate input.

Home prioritizes search, promotions, recommendations, and product cards. Category separates broad departments from subcategories, while sorting supports price, sales, and brand comparisons. Consistent card states make favorite and secondary actions visible without turning every option into a primary control.

Choice Home screen with promotions and product-card interaction states
Home supports exploratory shopping while product cards preserve consistent favorite and secondary-action states.
Choice Category screen with department navigation and subcategory layout alternatives
Broad departments remain visible while the selected category reveals more specific paths.

Decision

Product context stayed visible during variant selection

Product Detail combines imagery, seller/store context, price, quantity, reviews, photos/video, customer service, related products, and purchase actions.

Variant selection opens in a bottom sheet while the product remains visible behind it. This preserves context and makes the selection temporary and reversible rather than sending shoppers into a separate flow.

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

Cart and checkout remained editable until commitment

The cart supports item selection, quantity changes, seller grouping, recommendations, and an expandable details drawer before checkout.

Checkout distinguishes saved and new address/payment information. Shoppers can select or edit details, apply coupons, review shipping and tax, and verify the order before submitting. The final review acts as a checkpoint so corrections happen before payment rather than after purchase.

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 category results, order review, and order confirmation
The order review keeps products, address, payment, coupon, shipping, tax, and total editable before confirmation.

Decision

The journey continued after payment

Choice extends the experience into order history, order detail, shipment status, delivery mapping, shipping/payment information, help, reviews, and Buy It Again.

Order Detail uses expandable sections so status leads while tracking, address, payment, and review information remain available on demand. Review creation/editing and Buy It Again turn the order record into an active service and repeat-purchase surface rather than a static receipt.

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.

A shared UI system connected complex states

I built the interactive prototype and high-fidelity UI in Figma and Adobe XD. Coral marks primary actions, yellow supports secondary actions, and teal/blue provide supporting contrast. Consistent bottom navigation, product/order cards, form fields, selection states, bottom sheets, accordion rows, tracking timelines, and confirmation states connect discovery, transaction, account, and post-purchase tasks.

The hierarchy changes by context: imagery leads during discovery, editable information leads during checkout, and status plus next actions lead after purchase.

Current outcome and next validation

Choice resulted in a research-informed B2C/C2C architecture, connected buyer and seller flows, mobile wireframes, eight curated high-fidelity artifacts, a reusable visual system, and an interactive prototype.

The project was not developed or launched, and no sales, conversion, satisfaction, or adoption result is claimed. The next step would be moderated usability testing across search/category discovery, Product Detail, variant selection, cart editing, address/payment, order confirmation, tracking, review, and Buy It Again.

Project status

Interactive prototype

Independent 2021 UI/UX and Product Design project; not developed or launched and not yet usability tested.

What I learned

The strongest part of Choice is not the number of screens. It is the continuity among states. Discovery creates product and seller context; cart and checkout should preserve it while allowing edits; post-purchase screens should reuse transaction information for tracking, help, review, and repeat purchase.

The breadth of the concept is also a design risk. A future iteration should prioritize the core buyer journey, validate it, and then expand alternate search methods, account features, and seller tools.