App for Dokan Plugin Marketplace
The existing cart/checkout treated a multivendor app like a single-vendor flow, causing confusion (no per-seller shipping, no per-seller grouping, clunky edits).
Vendor-aware cart (grouped by seller), per-seller shipping selection, multi-select actions, and a single-page checkout that surfaces all key info in one place with transparent charges and bold CTAs.
Internal + customer testing showed a +23.9% checkout conversion lift after the redesign.
Multivendor eCommerce (Mobile)
Mobile Dev, Analyst, Product Designer(me)
2 weeks
Cart & Checkout UX — vendor-grouped cart, per-seller shipping, one-page checkout, multi-select actions, early cost transparency
Figma (design & prototype)
Context. Multivendor mobile shoppers need to review and act per seller (shipping, notes), yet the app mirrored single-vendor conventions. Result: abandoned carts and uncertainty in totals/fees.
● Make cart/checkout vendor-aware and scannable.
● Reduce steps with a one-page checkout while improving editability.
● Clarify costs early (no surprise fees).
● Enable multi-select actions in cart (select vendor or items, clear).
● Payment must occur on web (current architecture).
● WordPress supports one order note per order (no per-seller notes).
● No saved addresses available from WP in this app version.
● Guest checkout not applicable (mobile users are signed in).
Competitive scan. Daraz, Lazada, AliExpress and broader m-commerce best practices informed the model: per-seller clarity, edit-in-context, charge transparency, shipping ETA, and prominent CTAs.:
● Individual shipping per seller is essential in multivendor (different lead times/methods).
● Seller-based grouping in cart helps both scanning and selective checkout.
● Multi-select in cart lets users checkout a subset now and keep the rest for later.
● All checkout info in one page reduces back-and-forth friction and errors.
● Add: Vendor-grouped cart, Per-seller shipping choice, Multi-select actions, Early cost transparency, In-place edits (address, note, shipping).
● Redundant info, Hard-to-find same-seller products, No selective checkout, Missing or late fee disclosure.
● Step 1: Cart is grouped by seller. Users see items bucketed per vendor and can act on a specific seller or selected items.
● Step 2: Checkout is a single page. Users fill address → note → per-seller shipping in one flow, preview totals, then place the order (payment continues on web per current architecture).
● What changed: Cart items are grouped by seller; users can select a seller or select multiple items, then checkout or clear cart quickly.
● Why: Reflects multivendor reality and supports partial purchases.
● Edge cases: Mixed selection across vendors still computes correctly; “Clear cart” supports both bulk and single-item deletion.
● What changed: Fees and potential charges are previewed from the cart stage, not just at confirmation.
● Why: Reduces surprise costs—key for conversion; aligns with best practices found in the scan.
● What changed: All core inputs live on one page with a natural reading flow and bold primary actions.
● Why: Avoids page-hopping; increases comprehension and speed to completion.
● Notes: Address first so shipping and totals can be calculated correctly. Note field applies to the overall order (WP limitation), placed in context for visibility. Per-seller shipping lives inline, near the summary, so users can review options without context-switching.
● What changed: Shipping changes and notes are editable inline (no deep navigations), improving reachability on mobile.
● Why: Faster corrections; fewer abandonments triggered by reopening steps.
● Checkout conversion ↑ 23.9% after the redesign (internal testing + customer feedback rounds).
● Usability gains: fewer confusion points about fees; faster selective checkout (per-vendor).
● Operational clarity: dev/QA alignment via explicit constraints and per-seller logic.
● Guest checkout not needed (mobile users are already signed in).
● Payment from web (current architecture): kept the mobile flow focused on accuracy and readiness.
● Single order note only (WordPress): placed the global note in context, with copy to set expectations.
● No saved addresses (WP): streamlined manual address entry and made its position early to unlock accurate totals.
Feel free to reach out for projects, collaborations, or just to say hello! Currently seeking new opportunities.