Smooth coding in checkout
Turning a 20-click chore into a one-action pattern for multi-line invoices.
Company
Medius
Year
2025
Role
Lead Designer
Scope
Enterprise SaaS
Interaction Design
Validation
The problem
Coding worked — but it was slow and invisible. No way to copy a GL account across lines, no way to see total coding status at a glance, and errors only surfaced on submit. On a 24-line invoice, approvers repeated the same action 20+ times.
- Line by line, every time — even when all lines shared the same cost center.
- No bulk action — no copy, no template, no propagation.
- Invisible errors — discovered only at submission, causing delays and rework.
The approach
Three validation rounds with Inframark, Stena Line, and Alleima — different volumes, different invoice structures. The same story surfaced every time: coding was not broken, it was repetitive. I designed for the intersection of their workflows, not the union of every edge case.
- Discovery interviews to map current workarounds.
- Prototype testing with real invoice samples.
- Iterative refinement based on click-path analysis.
Key design decisions
Copy-to-all as a first-class action
A single "Copy coding to all lines" button visible at the top of the coding panel. No modal, no confirmation — just a reversible action with an undo toast. This alone eliminated the majority of repeated clicks on homogeneous invoices.
Inline status instead of modal errors
Each line shows its coding status with a small colour indicator. The submit button shows a summary count — "6 lines still need coding" — giving approvers a live progress signal rather than a wall of errors at the end.
Coding persistence across sessions
Partial coding is auto-saved. If an approver exits and returns, lines they already coded remain intact. This addressed a key pain point for approvers who worked through long invoices across multiple sessions.
Before & After
The original line-by-line coding panel vs. the redesigned bulk-action layout with inline status indicators.
Outcome
100% task success across all three validation sessions. Significant reduction in clicks on multi-line orders. Phase two — coding templates and copy-from-previous-order — is now planned based directly on testing findings.
3
Customer validation sessions
–62%
Avg. clicks on multi-line orders
100%
Task success in usability test