Designing a Dispatch Management Dashboard for Real Operations, Not a Generic Admin Panel
TIL that a dispatch dashboard built around 'show all the order fields' overwhelmed the person actually using it — the redesign that worked started from what a dispatcher needs to decide, not what data exists.
The Problem #
The first version of the dispatch dashboard was a data table with every field the order record had — status, timestamps, addresses, driver, notes, POS metadata. It was technically complete and practically unusable: a dispatcher juggling a dozen active deliveries couldn't scan it fast enough to make a decision under time pressure.
Context #
I built the table the way I'd design an admin panel for myself as a developer — show everything, let the user filter. A dispatcher isn't debugging the system; they're making fast, repeated decisions about who delivers what, next.
What I Tried #
Added filters and column sorting, assuming the problem was findability, not information density.
What Went Wrong #
Filters help when you know what you're looking for. A dispatcher scanning for "which orders need a driver assigned right now" doesn't start with a filter — they need that to be visually obvious at a glance, not something they query for.
The Solution #
Redesigned around the actual decision a dispatcher makes repeatedly: status became a color-coded, glanceable indicator instead of a text column, orders needing action sorted to the top by default, and every non-decision-relevant field (POS metadata, internal notes) moved behind a click-to-expand detail view instead of sitting in the main table.
<OrderRow
status={order.status}
// Color and icon carry the "needs attention" signal at a glance —
// the dispatcher shouldn't have to read text to triage.
statusIndicator={<StatusBadge status={order.status} />}
needsAction={order.status === "pending" && !order.driverId}
/>Why It Works #
A dashboard for someone operating under time pressure needs the important state encoded in form, not just present in the data — color, position, and iconography convey "act on this now" faster than a sortable text column does, even though both technically contain the same information.
Lessons Learned #
"All the data is there and it's filterable" is a developer's definition of a good dashboard, not an operator's. The actual design question is what someone needs to notice in the first two seconds of looking at the screen.
What I Would Do Differently #
I'd talk to the actual dispatcher about their real workflow before building the first version of the table, instead of designing from the data model and only discovering the UX gap once someone tried to use it under real pressure.
Related Concepts #
Information hierarchy in operational UIs, status encoded as visual state, glanceable design vs. data-complete design.
Related content
Using Framer Alongside a Development Workflow, Not Instead of One
TIL that building the Clonify Framer plugin taught me Framer is a genuinely different target than a normal web build — its plugin runtime and code-component model don't map 1:1 onto React conventions.
Turning Figma Designs Into Reusable React Components
TIL that building each screen straight from its Figma frame produced pixel-accurate but unreusable components — the fix was designing the component API from the design system's tokens, not from any one screen.
Building Reusable React Components Across Web and Mobile
TIL sharing components across a React web app and a React Native app only works if you split presentation from platform primitives from day one — retrofitting it later means rewriting most of your UI layer.