XHP Fulfillment Portal · Design Exploration

Filters & sorting for every tab — 10 interactive prototypes

Today, only the Delivery and Assignments tabs have controls. The main working tabs — Active, Available, Unconfirmed, In Progress, Issues, Relisting, Rejected — are fixed lists in both Tickets and Parking modes. These ten clickable prototypes explore distinct ways to fix that, each fully functional on identical sample data and styled to match the current portal.

10 interactive prototypes 2 modes each (Tickets · Parking) 8 tabs wired with live counts Sample data · no production systems touched

The problem worth solving

Watching how the portal is used, the same questions come up on every tab: “What’s about to burn?” “What’s unclaimed?” “What’s mine?” “What’s the big-money order?” “Show me one marketplace / one venue run.” Right now the only answer is scrolling. Delivery’s control bar already proved the pattern works — the question is which shape of it belongs on the main-pass tabs.

What agents filter by (from the data model)

  • Time-to-event — the dominant axis; urgency drives buying order
  • Claim state — mine / unclaimed / a teammate’s
  • Marketplace & venue — work is batched by source and by run
  • Order value & quantity — big totals get priority and scrutiny
  • Risk flags — TM availability, rescheduled events

Design principles applied throughout

  • Counts before clicks — every option shows how many orders it matches
  • Per-tab memory — a filter set on Issues shouldn’t follow you to Active
  • One-tap escape — a Clear/Reset affordance is always visible when filtered
  • Result honesty — “n of N orders” whenever a filter is active
  • Same pattern both modes — Tickets and Parking share one mental model

The 10 prototypes

Each explores one primary idea, deliberately pushed far enough to feel its trade-offs. Open them full-screen, switch tabs and modes, and actually use the controls — everything works.

PROTOTYPE 1

Universal Control Bar

The Delivery-tab bar, promoted to every tab: search + event window + marketplace + agent + min-value + sort, always visible, with per-tab memory.

Best for: shipping fast — the team already knows this pattern. Cost: permanent chrome height. Open prototype →
PROTOTYPE 2

Sortable Columns + Header Filters

The table is the control surface: click headers to sort, shift-click for numbered multi-sort, Excel-style funnels with value checklists on text columns.

Best for: zero extra chrome; sorting discoverability. Cost: funnels hide filters from view. Open prototype →
PROTOTYPE 3

Filter Chip Builder

Linear-style “+ Filter” → field → value (with live counts). Filters become removable, click-to-edit chips; sort is a chip too. Reads like a sentence.

Best for: modern feel; visible state; one line of chrome. Cost: two clicks per filter. Open prototype →
PROTOTYPE 4

Faceted Sidebar

An e-commerce facet rail: checkboxes for marketplace, venue, value band, agent, date bucket — every value showing a live match count given the other facets.

Best for: seeing where the work is before clicking. Cost: ~250px of width. Open prototype →
PROTOTYPE 5

Command Bar Query

One omnibox: free text plus typed tokens (mkt: date:48h cost:>300 agent:none sort:cost-desc) with autocomplete and “/” to focus.

Best for: power users, keyboard-first speed. Cost: syntax has a learning curve. Open prototype →
PROTOTYPE 6

Smart Preset Pills

Curated one-tap answers to “what needs me right now?”: 🔥 Next 48h, Unclaimed, 💰 ≥$300, ⚠️ TM sold out… combinable, with live counts, per tab and mode. Plus segmented sort and row density.

Best for: lowest friction for the 90% case. Cost: can’t express arbitrary queries. Open prototype →
2
PROTOTYPE 7

Filter & Sort Popovers

Notion/Airtable-style: two buttons with badge counts open a rule builder — multi-rule filters with Match all/any logic, ordered multi-level sort — plus a plain-English summary of the active view.

Best for: max expressiveness with a clean resting state. Cost: filters hidden until opened. Open prototype →
PROTOTYPE 8

Group By + Subtotals

Turn the flat list into collapsible sections by event, venue, event day, marketplace, or agent — sticky headers with order counts and cost subtotals, sortable within groups.

Best for: batch workflows and workload views. Cost: grouping ≠ filtering; pairs best with another pattern. Open prototype →
PROTOTYPE 9

Date Lens Timeline

Time-to-event as the primary control: a two-week day strip with counts and volume heat bars. Click days or use presets (Today · 48h · Weekend · Past due); countdown chips color every row.

Best for: urgency triage; seeing workload shape at a glance. Cost: only solves the date axis. Open prototype →
PROTOTYPE 10

Saved Views Workspace

The destination pattern: named views bundling mode + filters + sort + visible columns into persistent chips (“🔥 Urgent unclaimed”, “🅿️ Parking next 48h”), with a slide-over editor, starring, and localStorage persistence.

Best for: repeat workflows and team-standard views. Cost: needs an underlying filter editor anyway. Open prototype →

How they compare

PrototypeUtilityLearnabilityChrome costPower ceilingOne-line verdict
P1 · Control Bar●●●●●●●●●●MediumMediumThe safe, proven default — ship this first.
P2 · Spreadsheet●●●●●●●●●●NoneHighSorting belongs in the headers regardless of what else wins.
P3 · Filter Chips●●●●●●●●●●LowHighBest visible-state-per-pixel ratio of the flexible options.
P4 · Faceted Sidebar●●●●●●●●●●High (width)MediumCounts-before-clicks is superb; width is the price.
P5 · Command Bar●●●●●●●●●●LowVery highA power-user layer, not the primary UI.
P6 · Preset Pills●●●●●●●●●●LowLowHighest utility-per-click for daily triage.
P7 · Popover Rules●●●●●●●●●●MinimalVery highThe right home for advanced logic (and/or, multi-sort).
P8 · Group By●●●●●●●●●●LowMediumUniquely good for batch buying and workload balance.
P9 · Date Lens●●●●●●●●●●MediumLowThe most fulfillment-native idea here; date is king.
P10 · Saved Views●●●●●●●●●●LowVery highWhere this should end up once filters exist.

Recommendation — a layered rollout, not a single winner

These patterns compose. The strongest end-state combines four of them in layers, each shippable independently:

  1. Ship P6 + P2 first: preset pills (Next 48h · Unclaimed · Mine · ≥$300 · TM sold out) on every main-pass tab, plus clickable column-header sorting. Covers ~90% of daily triage with near-zero learning curve and reuses the existing visual language.
  2. Add P1’s bar as the fallback for arbitrary queries (search + marketplace + agent + date window), collapsed behind a “Filters” toggle so resting chrome stays flat — or expressed as P3-style chips if the team prefers visible state.
  3. Layer P9’s day strip on the Parking mode and Active tab, where time-to-event dominates the workflow — it doubles as a workload heatmap for shift planning.
  4. Graduate to P10 saved views once the above exists: per-agent defaults, team-shared views (“🔥 Urgent unclaimed”), and column visibility — turning the portal from a list into a workspace.

Implementation note: all of this is frontend-only state over the already-loaded listings array (the portal filters client-side today), so each layer is a contained change to fulfillment/public/ with per-tab state persisted in localStorage and mirrored to the URL for shareability.

Built as a design exploration for the XHP fulfillment portal · All data is synthetic · Session 325cf6b0