An orders dashboard for a three-person shop
A concept piece for a fictional client, built to show how I approach this kind of project.
The brief
A small online outdoor gear shop, where a team of three packs and ships the night's orders every morning. Their admin screen was one long list: problems were found by scrolling, and a wrong click couldn't be taken back. They wanted a screen that says what to deal with first, then stays out of the way while they work through the queue.
Around the orders screen sit simple views for stock, customers, reports and settings, all working from the same data, so a short tent in Inventory is the same short tent flagged on Orders.
What I focused on
- What needs attention comes firstOrders on hold, orders past their ship date and items running low sit above everything else. Each one is a button that filters the table to exactly those orders, so a problem is one click from the work behind it.
- Numbers that say what they meanEvery tile states its change in words ("3 more than this time last Tuesday") with a small trend line, so nobody has to remember what last week looked like. Status is always an icon and a word, never color alone, and every color, space and radius comes from a small set of design tokens, which is also how the light theme is made.
- Dense data that still scansFigures are tabular so they line up, totals are right aligned, and the compact view fits a whole morning on one screen. On a phone each order becomes a card with the same reading order, and the filters scroll inside their own row.
- Every state is designedA skeleton in the shape of the rows while loading, an empty state with a way out when nothing matches, and a failed sync that keeps the last good data on screen, says how old it is and offers a retry.
- Bulk actions you can take backSelect a few orders and the actions slide in over the search. Status changes happen at once and the toast offers Undo, which is faster and safer than an "Are you sure?" box nobody reads.
- Built for the people who use it all morningSlash to search, j and k to move, x to select, Enter to open, and ? for the list. Shortcuts pause while typing, and every one of them has a visible button too.
Skills
- Dashboard UX
- Information hierarchy
- Data visualization
- Design tokens
- Interaction states
- Keyboard interaction
- Accessibility
- Responsive tables
- Vanilla JavaScript
- Performance