Case 04 · Product UX · Ready for Audit
Making a hidden filter visible in a table wider than any screen
Telling which stores are ready for audit, week by week, when the period filter kept hiding the checklists still waiting for approval.
B-side
Designers don’t live by epics alone. This is a small case: a few days on a screen that already existed, the kind of everyday fix that is as much a part of the job as the big epics. Small, yes. Simple, not quite.
Business changed · NDA
The real product is under NDA, so this portfolio moves the work into a different business: a fictional supermarket chain stands in for the real client and product. The screens are heavily simplified illustrative adaptations, and the business, the rules and the data are invented. The design problem and the reasoning behind each decision are mine.
The fictional product
Shelf, the fictional name I use here, is the back office of Almare Markets, a made-up supermarket chain. It’s a large internal web platform, built for desktop, where store, regional and head-office teams look after stores, campaign budgets, people and weekly checklists. It’s dense: wide tables, filters, drawers and many user roles, each seeing its own slice of the data. The real product belongs to a different business, and the chain stands in for it to keep the client confidential. I joined the real project in May 2026, when it had already been running for years.
This case is about one of its review screens, where QA leads check, week by week, which stores are ready for their food-safety audit.
Problem
One wide list answers a single question: is this store ready for audit, and if not, which weekly checklists are still waiting for approval?
Each row is a store, each column a week of food-safety checklists. The list only showed the audit period set in the filter, a limited window, and everything outside it simply disappeared. A store could look clean while many weeks of checklists still waited for approval, and the reminder button promised one pending week when there were far more. The period appeared nowhere on the page. And Status only counted the weeks on screen, so it changed with the filter without saying so.
Constraints
- The live table is far wider than the screen. It’s a desktop application, and even on a big monitor people scroll sideways and lose the row they were reading.
- The cap on the period stays: it keeps the list fast.
- Several user roles see different rows and can do different things, from correcting a week to only looking.
- The screen already exists in the product, so every change had to fit the product’s own table, filters and tooltips.
Decisions
-
01
Show what the filter hides
A Pending column counts every week still awaiting approval, whatever the filter shows, and opens those weeks grouped by year. An empty count reads “-”, not “0”. The reminder uses the same full count, so it never promises less than is pending.
The full backlog, one click away: weeks across two years that the period filter was hiding. -
02
Say which weeks you are looking at
A second header row names the period set in the filter, across Status and every week column. Its left edge is the line between the columns the filter changes and the ones it doesn’t.
The period band starts where the filter starts to matter; the store column stays pinned while the weeks scroll. -
03
Make the default filter real
The period is pre-selected and the filter shows as active from the first load. Clear goes back to that default instead of emptying the field, and Apply re-slices the weeks and recalculates Status, so narrowing the period can flip a store to Ready for Audit.
The filter panel, with the period first: the one field that is always on. -
04
Keep your place in a wide table
The store’s name stays pinned on the left and the actions on the right. I first removed the row highlight, because blue meant “clickable” and rows aren’t; then I brought it back as a neutral tint. Following one store across many week columns needs it. I logged that as a reversal instead of quietly changing it.
-
05
A Status rule people can read
The first rule had one more condition than people could hold in their heads. Working it through with the developers, I dropped it: it was harder to explain than it was worth. The tooltip now states the rule in one line, in the wording the developers chose from my two options.
-
06
Warnings you can actually see
The pending-week mark was the app’s yellow, too light on white and worse on the tinted rows. I moved it to the design system’s dark yellow, which clears 3:1 on every row state; a brighter orange looked closer to the brand but failed on hovered rows.
Mark colour On a white row Worst row state Icons need 3:1 The app’s yellow 1.82:1 1.56:1 Fails A brighter orange 3.15:1 2.71:1 Fails The design system’s dark yellow 3.52:1 3.03:1 Passes Contrast of the pending-week mark (WCAG 2.2, non-text contrast), on the four row states: white, tinted, and both hovered.
How it was made
This screen came before the documents I use today, so it shows an earlier form of the same process, in under a week.
- Day 1Trace the live pageMy page tracer gave me a first draft of the production screen as a prototype, in copies of the product’s components. A few targeted adjustments later, every improvement started from the real thing.
- Days 2–4Every improvement, one specI numbered each one, wrote down why, and built it into the prototype the same day.
- Days 3–4Rules settled with the developersThey confirmed the Status rule. Then we simplified it together, and they picked the tooltip wording.
- Day 3Sign-off and hand-off docsWhat’s New for the stakeholders’ sign-off and Dev and QA for the development team, with numbered requirements, user stories and business rules.
- LaterOpen questions on the screenEach one pinned to the control it concerns, phrased to be read out in a review.
What I’d do differently
The Status rule changed in a conversation with the developers, and the prototype followed. Two documents didn’t. They still describe the first rule, because nothing tied a decision to every place it lived. My feature-tracking assistant closes that gap. It came weeks later, and since then every decision reaches the matrix, the logs and both documents at once.