Commission & Vendor Profile UX Revamp (WordPress Multivendor)
Admins needed a trustworthy way to configure commissions by calculation granularity (Per Item Quantity / Per Item / Per Order) and by type (Fixed, Category-based, Earning-based). The old screen mixed controls, made bulk category edits and tier setup cumbersome, and didn’t clearly show who receives shipping/tax fees.
Restructured Commission Settings into an intent-first, two-step flow:
● Commission Based on (Per Item Quantity / Per Item / Per Order)
● Commission Type (Fixed, Category-based with parent/nested grid, Earning-based with tier editor).
Besides that, added Shipping Fee Recipient and Product Tax Fee Recipient cards, inline Learn more help, and clear, consistent inputs—plus kept the Vendor Profile “at-a-glance” improvements from the project scope.
Commission setup completed 37% faster with fewer errors in internal testing.
Dokan (WordPress multivendor plugin)
Commission system + Vendor Profile (admin)
4 weeks
Product Designer (me), Product Analyst, PM, 2 Engineers, QA
Research synthesis, IA, flows, wireframes, UI, specs, dev handoff
WordPress/WooCommerce, Figma, design system tokens
The legacy screen mixed controls, made bulk category edits and tier setup slow, and didn’t clearly communicate calculation basis or fee recipients. It also wasn’t mobile-friendly, which caused misconfigurations and support tickets.
● Cut setup time & errors with an intent-first, two-step flow (choose calculation basis → choose type).
● Make complex setups scannable:
(i) Category-based: parent/nested grid with % and flat columns; clear “inherits unless overridden.”
(ii) Earning-based: simple tier editor with range rows and % + flat inputs.
● Clarify fee ownership with dedicated Shipping Fee Recipient and Product Tax Fee Recipient cards and inline help.
● Preserve “at-a-glance” vendor context in the Vendor Profile.
● Ensure responsive usability (comfortable tap targets, sensible reflow, sticky Save Changes on small screens).
support tickets, admin feedback, legacy UI review, and a quick competitive scan of commission settings patterns.
● Two-step mental model to match how admins think
(i) Commission Based on = Per Item Quantity / Per Item / Per Order
(ii) Commission Type = Fixed / Category-based / Earning-based (tiered)
● Fee ownership controls surfaced: Shipping Fee Recipient and Product Tax Fee Recipient cards with Vendor/Admin toggles and inline Learn more help.
● Category-based grid that handles parent + nested categories with separate % and $ columns for quick bulk edits.
● Earning-based tier editor with clear range rows (min → max / Above), separate % and $ inputs, and a simple delete action.
● Inline guidance in the section header and cards (short description + “Learn more”) to reduce guesswork.
● Disentangled controls (calculation basis vs commission type) to prevent wrong setups.
● Information density reduced via cards, consistent spacing, and predictable input patterns (explicit % and $).
● Inheritance & overrides made visible in the category table (e.g., “All Category” cascades unless a nested row overrides).
● Fee recipient ambiguity resolved with dedicated, scannable cards.
● Responsiveness & ergonomics: larger tap targets, sensible reflow, and a persistent Save Changes action on small screens.
● Wayfinding improved with a visible Document button and localized “Learn more” links.
● Commission Based on — First, the admin chooses how the commission should be calculated.
● Commission Type — Next, the admin picks the specific model for the marketplace.
● We explored Version 1 → Version 2 → Final Design and selected the option that best fit the functional requirements and day-to-day workflows.
● Fixed-based commission: The admin sets one commission rate that applies to all products. Every vendor follows the same amount.
● Category-based commission: The admin sets different rates by product category—can increase for one category and decrease for another. Supports configuring parent categories and nested categories to handle large catalogs.
● Earning-based (tiered) commission: The admin defines commission by earning ranges. The percentage/amount changes based on overall earnings, not by product or category.
● Vendor-based commission: The admin assigns specific rates to individual vendors to recognize loyalty or performance.
● Commission calculation in cart: Multiple commission types created complexity during calculation. The new design and logic resolve this so the admin’s commission is calculated correctly across scenarios.
● Managing many categories: Category-based setup was difficult when there were lots of categories. The current design supports parent and nested configuration so the admin can manage category rules more easily.
● Vendor information at a glance: Previously, important vendor details were hard to find quickly. The redesigned Vendor Profile surface makes the key information accessible in a few clicks (covered in the Vendor Profile section).
● Top summary strip — Status, key metrics (GMV, orders), payout health, recent flags. Built to answer “what’s going on with this vendor?” in one view.
● Vendor information at a glance: Previously, important vendor details were hard to find quickly. The redesigned Vendor Profile surface makes the key information accessible in a few clicks (covered in the Vendor Profile section).
● Re-flowed controls: to reduce horizontal scrolling and form fatigue on small screens.
● Larger tap targets and input spacing for error-proof touch interactions.
● Bottom-sheet forms for dense inputs (keeps context visible while editing).
● Sticky “Review & Save” so the primary action is always reachable.
● 37% faster commission setup in internal usability sessions, with fewer configuration mistakes.
● Reduced back-and-forth during QA due to human-readable rule summaries.
● Clearer vendor overviews shortened the time to answer “what’s going on with this seller?
● Inline analytics: show projected impact before saving a rule.
● Bulk actions & rule templatization for seasonal changes.
● Empty-state examples customized by marketplace size.
Feel free to reach out for projects, collaborations, or just to say hello! Currently seeking new opportunities.