Brief deliverables
The three artifacts the brief explicitly asks for. Each opens in two ways — a rendered Preview, and the underlying File for download or inspection.
4 Screen Designs in Figma
All 8 frames at 1280px wide — the four main screens (Compliance Overview, Data Quality, Invoice Detail, Root Cause) plus four state variants (Empty, Loading, Error, Agent running). Auto-layout, design tokens linked as styles, prototype connections.
Design System v1.1 (Snippet)
19 sections — color & typography tokens, spacing rhythm, buttons, badges, cards, KPIs, dense tables (sortable + filterable), sidebar navigation, AI patterns, score gauge, full state library, charts & data viz mapping. Same source rendered in four formats below.
Walkthrough & design rationale
Full design narrative: principles, screen-by-screen logic, agentic flow decisions, what I'd build next. Includes a one-page agentic-flow story (the brief's added requirement) and a meta one-pager on the AI workflow used to produce this submission.
Interactive exploration
Click-through versions to experience the platform in motion. Best demonstration of the agentic flow the brief asked for.
Interactive demo · click-through prototype
All 8 frames in one navigable file. Click vendor rows, sort by any column, filter by 5 dimensions, watch the agent pipeline animate. Includes a 7-step autoplay story showing the full user journey.
All 8 frames · single page
All four main screens plus four state variants stacked vertically at 1280px wide. A single static page for printing, scrolling, or sharing as a complete overview.
Research & planning
Supporting documents that inform the design decisions and demonstrate process discipline.
User stories
9 stories across 3 personas (Procurement Manager, Finance Controller, Operations Analyst) with acceptance criteria and a screen-coverage matrix.
5-day sprint plan
Day-by-day plan with deliverable checklist, watch-outs, risks/mitigations, and a final QA pass mapped to the brief's evaluation criteria.
Sprint tracker
Interactive companion to the sprint plan. Gantt timeline, persistent checkboxes, progress ring. Auto-detects today's focus from the day of the week.
Source HTML files
The HTML source files behind the Figma frames.
State variants
Empty, loading, error, and agent-running states (bonus criterion).
All 8 frames combined
Single import target — wireframes + states baked into one file.
Assets & reference
Standalone components and the original brief, kept here for reference.
Score gauge SVG
Before/after circular gauges (67 → 94). Drop into Figma directly.
Single gauge template
Reusable single gauge with inline comments — change score and color in one line.
