Client
StapleAI
Role
Lead Designer
Year
2024

Staple Tables pulls structured data out of documents like invoices. The extraction itself worked. The problem was everything after it: reading the result and correcting it. As lead designer, I rebuilt the two surfaces where that happens, the extracted fields and the extracted table.

The Problem

This was not a demo. Staple Tables sat inside real operational volume, and every one of those documents ended at a human review screen.

  • 150+ daily users processing 10,000+ documents a month.
  • Invoices, receipts, and operational reports, all funnelling into the same review step.
  • At that scale, every extra second on the review screen multiplies into days.

The extracted fields came back as one long list where nothing stood out. Finding the number that mattered meant reading every row.

  • Poor visual hierarchy: every field carried the same weight.
  • No validation cues: you could not see which fields had been mapped.
  • Limited context: no sense of what to do next, approve, edit, or move on.

The extracted line-item table was worse. It was dense and flat, and gave the eye nothing to hold on to.

  • No hierarchy: nothing separated important data from the rest.
  • Cramped layout: minimal padding made it hard to scan across a row.
  • No colour: everything read at the same importance.

The top bar crammed the whole product into one row, and still left power users stuck.

  • Complete, Reject, Label, zoom, and Export sat as equal-weight buttons, next to the search, notifications, and your profile.
  • The one action that actually mattered, the review decision, was lost in the crowd.
  • And you could only see one document at a time. To reach the next, you went back and opened it again. No quick jump for power users.

Discovery

I grounded the redesign in evidence rather than taste.

  • Usage analytics across 150+ daily users and 10,000+ monthly documents.
  • Task observation sessions documenting the real extraction workflow and where it failed.
  • A competitive teardown of Google Vision, Nanonets, and eight enterprise alternatives.

Every change that follows, on both surfaces, obeys one of three rules.

  • Hierarchy first: the important number should find you, not the other way around.
  • Colour with meaning: categories you can see, chosen to work for colour-blind users too.
  • Room to breathe: white space as a scanning tool, not decoration.

The Redesign

I rebuilt the extracted-fields panel around structure, colour, and space. Instead of one flat list, related fields now sit in logical groups, each with a coloured indicator, in a layout with room to breathe.

  • Grouped related fields together, with coloured bars categorising each type at a glance.
  • A palette benchmarked to stay distinguishable for colour-blind users.
  • Generous spacing so the data has a clear shape and any field is quick to scan and locate.

Extraction is only trustworthy if you can check it. Click any field and its exact source is highlighted on the document with a bounding box, so a reviewer can see where the value was read from and correct it in place.

  • Click a field to locate and box its source text on the page.
  • Wrong or missing? Edit the value, or re-key it, right on the spot.
  • Verify at a glance instead of hunting through the document.

The line-item table got the same treatment, rebuilt around clarity. Open it and the document steps aside, so the extracted rows sit right below the source they came from.

  • A clean, modern grid with aligned columns, and subtle zebra striping to keep the eye on the right line across a wide row.
  • It mirrors the source document, so you can reconcile the extraction row against row.

The columns read in plain language, but the real point is what happens when the extractor guesses one wrong.

  • Every header is a dropdown: if a column lands under the wrong field, remap it in one click, no re-running the model.
  • Plain words over raw keys, so a non-technical reviewer can verify an extraction at a glance, and fix it without help.

I split the toolbar by altitude, and gave power users a way through.

  • The document's actions drop into a floating bar over the page, with Complete as the clear primary.
  • The top bar keeps only global chrome: a universal search, notifications, and your profile.
  • That search doubles as the quick jump: open any document without going back first.

Reviewing a batch meant going Back to the list and hunting for the next file every time. I put the whole queue right beside the document.

  • A thumbnail rail down the left shows every document in the batch, the current one highlighted.
  • Click any page to jump straight to it, no trip back through the list.

The Outcome

The review step went from a chore to a glance, and the win carried past the review screen into organisation-level numbers.

  • 50% less time spent correcting extraction errors.
  • 30 to 40% higher extraction accuracy.
  • 3x faster document-processing workflows.
  • 73% fewer IT support tickets tied to table extraction.
  • Handles more diverse document types, viable across industries.

The teams felt it before the dashboards did.

  • "I can see exactly where every value was read from now, so approving an extraction is a glance instead of a hunt through the page."
  • "The line items finally read like a spreadsheet, and when a column lands wrong I just remap the header. No re-running anything."
  • "The whole batch sits right beside the document. I move down the queue instead of bouncing back to a list every time."
The extraction workspace
Document, fields, and table in one view
Screen in progress