Making Invoice Approval Visible, Recoverable, and Faster
A cross-platform B2B workflow that helps Finance Admins route and unblock invoices while Approvers make secure decisions on the go.
Overview
In many B2B organisations, invoice approval depends on email, spreadsheets, and manual follow-ups. Finance teams struggle to see who owns the next decision, Approvers lose context, and rejected invoices enter a slow loop of clarification and rework.
I designed InvoiceFlow as one connected approval workflow across desktop and mobile: Finance Admins route and unblock invoices, while Approvers review and act securely on the go.
Accomplishments
InvoiceFlow needed an approval workflow, not another accounting tool.
I framed the product around three jobs: route each invoice to the right people, track its position in the chain, and help Approvers act with confidence. This boundary kept the one-week challenge focused on approval rather than expanding into accounting, tax, or payment execution.
Route
Send each invoice to the right people based on hierarchy and finance policy.
Track
Show where an invoice is, who is holding it, and what has already happened.
Act
Help Approvers make a clear decision wherever they are.
The delay was not the approval button — it was uncertainty around the chain.
Finance teams could not immediately see who owned the next decision, why an invoice was blocked, or how rejected work should return to the process.
Manual routing makes it easy to assign the wrong person or forget an approval level.
Invisible ownership forces finance teams to chase updates instead of resolving exceptions.
Fragmented communication separates the decision from the document, history, and reason behind it.
How might I make multi-level invoice approval faster without hiding the context that makes financial decisions trustworthy?
I mapped the workflow beyond the happy path.
Mapping intake, assignment, approval, rejection, and recovery revealed that missing fields, unavailable Approvers, and unexplained rejections created more delay than the approval action itself. I supplemented this with desk research into B2B accounts-payable products and mobile approval patterns.
Two findings that set the direction.
Speed comes from preventing rework
The fastest approval is not the one with the fewest taps. The design prevents incomplete work and routing errors before they enter the chain.
Transparency must reveal the next owner and next action
A status such as Pending does not explain what happens next. Finance needs to know who currently owns the task, which level is complete, and where the invoice bounced.
Borrowing patterns, not product models.
I reviewed approval tools, work-management products, and enterprise design systems to understand which interaction patterns were already familiar. The goal was not to copy a competitor, but to identify transferable patterns, and reject the ones that belonged to a different workflow.
Atlassian Design System
Compact semantic components make state, filtering and recovery visible without relying on colour alone.
The same status language — icon plus label — is reused across dashboard, invoice table, detail view and approval stepper.
Asana · Jira
Work-management tools separate overview from execution and keep status and filtering close to the work.
InvoiceFlow borrows the queue and filtering conventions, but shows policy effects inside the approval flow.
Chart-heavy dashboards and a full trigger–condition–action rule builder.
Bonsai
Row-level action menus and consolidated secondary filters transfer well to a dense finance table.
The interaction pattern stays; the actions and statuses become approval-specific.
Receivables statuses, project hierarchy and recurring billing concepts.
The benchmark became a filter, not a template: keep familiar interaction patterns, remove domain baggage, and design around InvoiceFlow’s real job—routing, tracking, and acting on accounts-payable approvals.
Three principles, applied to every screen.
Collaborative
Keep comments, reasons, and handoff context attached to the invoice.
Speedy
Prioritise blocked work and prevent avoidable rework.
Transparent
Make ownership, policy, and approval progress visible when they affect a decision.
I separated “How are we doing?” from “What needs action?”
Overview provides at-a-glance health; Invoices is the working queue. An early version treated them as one large surface, but they answer different questions and support different modes of work.
Overview · glance
Status totals, a “Needs your attention” list, and recent approval activity help the Finance Admin orient quickly.
Invoices · work
The working surface. It opens on Pending rather than All, because the pending queue reflects the user's immediate job.
The queue reveals the next intervention.
01 Current Approver answers who is holding the invoice.
The column sits in the primary scan path, so ownership is read from the list rather than by opening every detail page.
02 Overdue sits in the primary scan path.
Overdue tags sit beside the workflow status rather than inside the due-date column, so urgency is read in the same glance. Status always combines an icon with a text label.
My first flow ended at Rejected. That was the real gap.
Rejection is where the most expensive back-and-forth begins. I redesigned it as a recovery loop: the state explains who stopped the chain, why it stopped, which levels were never reached, and what the Finance Admin should do next.
In review
The chain is progressing; the stepper shows the level currently holding the invoice.
Rejected
The reason, the Approver who stopped the chain, and the levels never reached, with Edit & Resubmit as the primary action.
Edit & Resubmit becomes the primary action while Message keeps clarification attached to the invoice, turning rejection from a dead status into a guided recovery workflow.
The system reveals policy without taking control away from the Admin.
Approvers are ordered by level, availability is visible before assignment, and invoices above $5,000 add CFO review.
When someone is unavailable, InvoiceFlow suggests a peer but leaves the final decision with the Finance Admin.
Category-dependent required fields prevent incomplete invoices from entering the workflow in the first place.
Assign Approvers
Mobile is an execution surface, not a smaller Admin dashboard.
Approvers see their urgent queue, review essential context, and approve, reject, or reassign from the thumb zone. Face ID verifies identity, high-value invoices receive an additional confirmation, and routine approvals retain an Undo path.
1 · Queue
2 · Invoice detail
3 · High-value confirm
4 · Reject drawer
Each protection addresses a different risk: Face ID verifies identity, the confirmation modal guards financial consequence, and the Undo toast recovers an accidental tap.
The interface remains understandable without relying on colour or ideal conditions.
Readability and reach
- Status combines icon and text rather than colour alone.
- Focus and interaction targets remain visible and usable.
Status chip
Every state pairs a shape-distinct icon with a written label, so the meaning survives greyscale printing, low contrast displays, and colour-blind vision.
System feedback
- Empty states explain what happened and provide a way forward.
- Connection loss preserves context and offers Retry.
Empty state
Offline state
What I deliberately left out, and why.
01 No Projects layer.
I considered grouping invoices under projects once the dataset grew into the thousands. Filters and pagination solved scale without adding an entity the brief never established.
02 No full workflow builder.
The concept shows automation where it affects the workflow, such as automatically adding the CFO. A complete rule builder would have become a separate power-user product.
03 No mobile bulk approval.
Bulk actions could increase speed, but approving financial documents without individual review introduces risk. I treated it as a future, policy-controlled capability.
Two things the week taught me.
Design the loop, not only the happy path
The strongest product decision was turning rejection from a dead status into a recoverable workflow.
Speed is often an information problem
Visible ownership, availability, requirements, and policy can remove more delay than reducing one tap.
A connected approval system built around route, track, and act
InvoiceFlow became one connected workflow across two role-based experiences. Finance Admins can route, monitor, and recover invoices; Approvers can make secure decisions from mobile. The next step is task-based testing with both roles and validation of routing rules with finance and compliance stakeholders.
Wireframes were produced using AI-assisted design tools, directed through iterative prompting and critique. All design decisions, trade-offs, scoping calls, and the rationale documented throughout are my own. Existing products and design systems were reviewed as pattern references only.