A vendor-to-OEM shipment and invoice automation product, taken from requirements to a dev-ready front-end, as the sole designer on the team.
Working with a FinTech client, my team took on Advance Shipping Notification (ASN) — a product for automating vendor shipment and invoice data for large OEMs, designed and built from scratch in two months.
As the only designer on the project, I owned requirement gathering, the design approach, and the end-to-end workflows. Given the scope and timeline, my team and I decided early to bring AI into the process rather than run it in the traditional sequence.
Used an AI research tool for domain context, then fed my own Project Requirement Document to AI so the team could pressure-test and finalise scope together.
DeepSearchTurned my own design ideas into wireframe drafts with AI, and used those to get stakeholder approval on the design approach before committing to final screens.
Built the design system and final screens in Claude Code, and handed off working Next.js front-end pages directly to the team — letting backend development start immediately.
Claude CodeWith one designer and a hard deadline, the system had to be small enough to hold in your head and specific enough to skip debate — a working-document paperwork feel (invoice paper, ink-stamped approvals) set against a control-room navy so it still reads as software.
Built in Claude Code as Next.js pages and handed to the team directly — each screen maps to one step of the ASN lifecycle, from vendor login to OEM payment.
Split layout — brand panel orients a first-time vendor, form stays fast. OTP offered, not forced, since logins are often shared across a plant team.
Four numbers a coordinator checks every morning, up top. Plant switcher stays in the header for vendors shipping to more than one OEM plant.
| ASN | PO | Status |
|---|---|---|
| ASN-88214 | PO-4521-A | GRN done |
| ASN-88190 | PO-4518-C | Qty mismatch |
Line items auto-fill from PO lookup rather than being typed from scratch. A mismatched quantity is flagged inline, before submission is possible.
| Item | Order qty | Ship qty | Batch |
|---|---|---|---|
| SPR-2210 | 500 | 500 | B-0442 |
| SPR-2214 | 300 | 280 | B-0443 |
Signing is the one step where waiting is real, so the state is explicit — token detected, signing in progress — rather than a bare spinner.
ASN and invoice shown merged, side by side — the last chance to catch a mismatch before it becomes a discrepancy on the OEM side.
| Field | ASN | Invoice |
|---|---|---|
| PO reference | PO-4521-A | PO-4521-A |
| Total qty | 930 units | 930 units |
The same stepper appears on vendor and OEM side — the shared source of truth the whole workflow is built around.
A mismatch doesn't block the whole ASN — only the affected line is held, with a one-click path to raise a dispute.
| Item | ASN qty | Received qty |
|---|---|---|
| SPR-2210 | 500 | 500 |
| SPR-2214 | 280 | 260 |
Audit trail collapsed by default — most vendors just want the amount and date, with approver history a click away.
For vendors shipping to several plants, this turns individual ASNs into a pattern — where delays actually happen.
Research, IA and wireframing didn't disappear — they moved faster because AI absorbed the drafting cycles, leaving my judgement for scope calls and approvals rather than production time.
The time saved on drafting went straight into usability testing before handover — so issues surfaced while screens were still cheap to change, instead of after development started.