Enterprise platform that helps procurement and finance teams find financial leakage hidden in supplier invoices. From raw data ingestion through compliance scoring, exception handling, and executive reporting — designed so that an AI agent does the heavy lifting transparently.
NovaCorp processes thousands of supplier invoices every month across multiple countries and currencies. Each one needs to be validated against signed contracts, approved rate cards, and commercial agreements. Today the process is largely manual — analysts compare line items by hand, exceptions slip through, and the company quietly pays for surcharges that contracts don't authorize.
A single dashboard can't serve all of them equally well. The design picks the right primary view per persona and lets the other two drill in.
A data platform for time-pressured enterprise users has to feel different from a consumer app. These three guardrails kept the design honest.
No illustrations, no flourish. White space exists only to separate information. Every pixel earns its place by serving a decision the user has to make.
Summary at the top, drill-down within one click. Every screen answers a single question and points the eye at the next action.
The agent is visible, transparent, and never acts silently. It shows evidence and confidence before offering any action. Purple is its consistent signature so users can always tell who did what.
Maya opens this on Monday with 30 minutes before her first call. The screen has to answer "where do I focus this week?" instantly.
Above the fold: compliance percentages, total exposure, net leakage. The AI surfaces a $48K recoverable pattern before the user even scrolls. The vendor table is sorted by exposure descending so the worst offender lands at the top of the eye.
Vendor · Date · Geography · Contract · Service Level — the brief's required filter set, all visible above the table.
Tells the financial story in one image: $430K overcharges − $228K undercharges − $18K AI-resolved = $184K net leakage.
Pre-surfaced pattern: "17 invoices show the same surcharge tier error · $48,210 recoverable · 84% confidence." Two action paths.
Click to open the full 1280px hi-fi mockup in a new tab.
Open Screen 1 →Sarah lives here. She'll trust the data only after she's seen exactly what the cleaning pipeline did. So the AI doesn't just run — it shows itself running.
The pair of circular gauges (67 → 94) is the headline. The pipeline below it is the receipt. When the agent stops at step 4 for vendor harmonization, the amber color and "Needs review" badge make it impossible to miss what's being asked of the human.
Two circles, one delta. The orange-to-green color shift communicates the win without anyone reading a number.
Step 4 stops on amber with two CTAs. The agent never proceeds on ambiguous data.
Missing values, duplicates, schema mismatch, currency, invalid references — each shown before vs after.
Includes a state variant showing the agent running live.
Open Screen 2 →When a vendor row is clicked, the user lands here. The job is to make a recovery decision: dispute, approve, escalate. The page is built to let you do that in 30 seconds.
Every line is shown side-by-side: invoiced vs expected vs deviation. $0 deviations recede in green; positive ones jump out in red. The AI panel connects this single invoice to 17 siblings with the same error — turning a one-line dispute into a $48K systemic recovery.
Four fields per exception: deviation type · financial impact · root cause · recommended action.
The AI extends a single dispute into a batch — the most differentiated moment in the design.
Append-only trail of every action — human and AI — for audit defensibility.
Single source of truth for any disputed invoice.
Open Screen 3 →The strategic view. The Pareto chart shows that 4 of 8 exception categories drive 81% of all leakage. The user can stop solving symptoms and start solving causes.
The chart's cumulative line crosses 81% at category 4 — the textbook 80/20 break, explicitly labeled. Below it, three AI insight cards translate the data into action: a systemic issue, a predictive alert, and a quick win. Each is colored by what it asks of the user.
Two encodings, one chart. The bars rank by impact; the line shows when cumulative coverage hits 80%.
Systemic (red) for rollbacks · Predictive (amber) for what's coming next quarter · Quick-win (green) for instant auto-resolves.
Same data, two questions. Procurement strategy switches between counting and weighting.
Strategic view for procurement leadership.
Open Screen 4 →The brief asked for AI agents that "proactively identify, flag, and resolve problems." The hard part was making them trustworthy. The answer was a deliberate three-tier model so the agent's actions match its confidence.
High-impact deviations. Confidence ≥ 75%, financial impact above threshold. Always presents evidence first — never auto-acts.
Medium confidence (50–75%). Shows reasoning. Action button requires explicit human approval.
High confidence + low impact. Logged with rationale. User can audit at any time but action proceeds without blocking.
Every AI-generated insight, button, and badge uses the same purple (#6D28D9). That single rule means a user can always tell — at a glance, on any screen — whether the platform did something or a human did.
The decisions that shaped the design, and why each one stuck.
The sidebar groups screens into Phase 1 (Cleaning), Phase 2 (Audit), and Phase 3 (Benchmarking). This matches how the platform's pipeline actually runs — and reinforces the guiding principle that benchmarking starts with data cleaning. Users always know where they are in the journey.
The brief named ZoomInfo as the design reference. The dark navigation signals "data-dense B2B SaaS"; the light content area keeps the dense tables and numeric grids legible. IBM Plex Sans (body) + IBM Plex Mono (numbers) — credible enterprise feel plus fixed-width financial scannability.
Waterfall for "where did the net come from?" Pareto for "which 20% causes 80%?" Score gauge for "did we improve?" The wrong chart in the wrong place hides the answer. The right chart shows it without explanation.
Every AI panel leads with the data — "17 invoices · 3 contracts · 1 rate card" — followed by the financial impact, followed by a confidence percentage, followed only then by a CTA. Trust is earned through visibility, not assumed.
In the error state, when 2 of 47 data sources are unavailable, the AI panel switches to a "Paused" badge with an explicit message. False patterns from partial data would be worse than no insight at all — so the design makes refusal the default.
The brief asked for screens. The submission delivered a system — and the way that system was put together is itself part of the answer.
Five-card KPI rows, dual-encoded compliance bars, status badges with dots, sortable headers with active states, sparkline trends per row — every cell does work without crowding.
Sidebar phases (P1 → P2 → P3) literally mirror the data pipeline. Users build a mental model in five minutes that holds up over a year of use.
Three-tier action model, confidence scoring, evidence-first surfacing, and a paused-during-uncertainty default. AI that knows when not to act.
19 sections covering color, typography, spacing, every component, every pattern. Color contrast verified to WCAG 2.1 AA. Built so a dev team could ship without asking a single follow-up.
Four state variants (empty, loading, error, agent-running) plus a fully interactive HTML prototype with functional sorting, filtering, and a 7-step autoplay story.
Walkthrough doc, agentic flow one-pager, user stories, sprint plan, and a single-source design spec. The work is reproducible, not just final.
The full Figma file, an interactive prototype with click-through navigation and an autoplay story, and the design system PDF — all open.