AKAkhil Kumar
← All work

01 — Overview · Marketplace · Seller operations

SellerHub — Marketplace Seller Platform

The seller side of a large home & furniture marketplace: how sellers receive orders, prepare them for pickup and track what they're paid.

Company
Home & Furniture Retail, UAE
Role
Lead Product Designer

02 — Problem

Marketplace sellers fulfil orders that customers place on the marketplace. They need to know what needs action now, respond before deadlines, get goods ready for pickup, and understand exactly how their payout was calculated.

03 — Users

  • Marketplace sellers

    See new orders quickly, accept or reject them in time, and prepare them for pickup.

  • Seller finance contacts

    Reconcile statements: product charges, fees, refunds and the net amount payable.

04 — My role

Lead Product Designer

  • Marketplace UX
  • Workflow design
  • Information architecture
  • UI
  • Design system
  • React front-end

Team · Worked with the in-house product and engineering teams.

What I owned

  • Led the design of SellerHub within the retailer's marketplace ecosystem
  • Designed the seller workflow from new order to pickup to payout
  • Designed the dashboard, order lists, order detail and statements
  • Converted the UI into React front-end

05 — Challenge

  • P1

    Action items get buried

    Orders needing a decision must stand out from orders that are simply in progress.

  • P2

    Deadlines matter

    Acceptance is time-bound, so the accept-by date has to be visible at decision time.

  • P3

    Many statuses

    Pending, accepted, ready to pickup, declined, undelivered and invoiced each need their own view.

  • P4

    Payout transparency

    Sellers need to see how fees, shipping, refunds and platform charges add up to the net payable amount.

06 — Journey / workflow

Seller order workflow

  1. 01New orderAppears under Pending for approval on the dashboard.
  2. 02Accept / rejectDecide before the accept-by date shown on the order.
  3. 03PackEnter the number of boxes for the shipment.
  4. 04Ready to pickupMark ready; the expected pickup date is shown.
  5. 05DeliveredStatus moves through to completion.
  6. 06StatementSettlement periods with a full charge breakdown.

07 — UX approach

Customer Journey → Information Architecture → User Flow → Component Strategy → UI → Development

  1. Customer JourneyMapped the seller's day: new orders → fulfilment → settlement.
  2. Information ArchitectureFour tabs: Dashboard, Orders, Statement, Account.
  3. User FlowAccept/reject, pack-and-pickup and statement-review flows.
  4. Component StrategyOrder card and status tabs reused across every order view.
  5. UIClear success / pending / rejected colour states; primary actions anchored at the bottom.
  6. DevelopmentBuilt as a React front-end.

08 — Solution

SellerHub — dashboard, orders and statements
  1. 1Dashboard leads with actionSales today, revenue and an order-status gauge sit above a Pending for approval list, so what needs a decision is first.
  2. 2Status tabsReady to pick up, declined, undelivered and invoice each get a tab, rather than one long mixed list.
  3. 3Decision at the bottomOrder detail ends with Reject and Accept side by side, with the order total right above them.
  4. 4Itemised statementProduct charges, shipping, refunds, Easy Ship and platform fees roll up to a net payable amount.

09 — Mobile UX decisions

Real screens at device size, each with the decision behind it. Tap a screen to view it full size.

  • Dashboard — action first

    Sales and an order-status gauge (with 'updated 5 mins ago'), then the orders waiting for a decision.

  • Order list — status tabs

    Day-based tabs; each card shows status, deadline and distance, with Set Delivered as the one primary action.

  • Order detail — the decision

    Accept-before date and status up top; Reject and Accept fixed at the bottom with the order total.

  • Feedback states

    Inline success and error banners at the top of the order, so the result of an action is never ambiguous.

10 — Design system

Seller tools share the visual language of the customer app, adapted for dense operational data.

  • Order card

    Order number, date, item count, status and a View details action.

  • Status tabs

    Horizontal filters for each fulfilment state.

  • States

    Success, pending, error and rejected banners and labels.

  • Data summary

    Statement rows with right-aligned amounts and a bold total.

11 — Design → code

  1. 01FigmaSeller workflows and UI.
  2. 02Design systemOrder and status components shared with other operations tools.
  3. 03ReactFront-end conversion.
  4. 04ProductionLive with marketplace sellers.

12 — Outcome

  • Live with marketplace sellers.
  • Order decisions, fulfilment and settlement in one seller tool.
  • Order and status patterns shared with the retailer's other operations products.