A cheque, from the moment it is scanned to the moment someone can prove what happened to it
A locked token layer, a component library every screen composes from, and a persistent shell carrying the whole information architecture — then forty-nine screens built on top of it across eleven phases, from the authentication suite through intake, validation, signature comparison, maker-checker review, core banking integration, administration and monitoring. Every phase is built and every sidebar destination resolves; nothing is left marked for later.
Phase 1 — foundation
Foundations & Tokens
Colour, the seven-family status palette, type, space, radius, elevation, motion and the named breakpoint scale — plus the role reference and the responsive contract.
COMPONENTSComponent Library
Buttons, inputs, validation primitives, status badges, score meters, the data table in all three states, cards, modal, drawer, toasts, tabs and menus.
SCREEN 1Login
Pre-authentication sign-in with field validation, the generic authentication error, and the button loading state.
SCREEN 2MFA Verification
Six-digit code entry with paste distribution, rejected-code state, attempts remaining and a resend countdown.
SCREEN 3Account Activation
The bank-issued three-step alternative to self-service signup: verify identity, set password, enrol second factor.
SCREEN 4Forgot Password
Request a reset link, with the deliberately non-enumerating confirmation message and a resend countdown.
SCREEN 5Reset Password
Reset reference plus new password, with live strength scoring, rule checklist and confirm-password affirmation.
SCREEN 6AAccount Locked
Lockout after repeated failed attempts, with the service-desk reference and the automatic-unlock countdown.
SCREEN 6BSession Expired
The inactivity-timeout variant of the same screen, stating explicitly what was and was not saved.
Phase 2 — global system states
Patterns & System States
The which-state-when table, the offline banner demonstrated live, widget failure, the empty-state formula, request timeout and the one destructive-confirmation treatment.
SCREEN 1Application Splash
The mark draws its own signature stroke while the shell loads. Minimum display time stops a fast load flashing. ?state=fast · extended · fail
SCREEN 2404 — Page Not Found
Inside the shell, so the user keeps their place. Neutral slate tone and a route glyph — deliberately never mistakable for 403.
SCREEN 3Under Maintenance
Full-screen, pre-empts even Login. Countdown re-renders once a minute, not once a second. ?state=unknown · ended
SCREEN 4Offline Banner
A non-blocking persistent banner, not a takeover — a reviewer mid-rationale keeps their work. Demonstrated live on the patterns screen.
SCREEN 5Crash / Error Boundary
Takes over the content area only; the shell survives. Copyable reference ID behind a disclosure, never a stack trace. ?from=startup
SCREEN 6Access Denied — 403
The resource exists; the role doesn't reach it. Violet restricted tone, shield glyph, and the required-versus-held roles stated plainly.
Phase 3 — operations dashboard
Operations Dashboard
Sixteen KPIs in five meaningful groups behind two headline health signals, four charts built from the status palette, a needs-attention table on the Phase 1 data table, nine filters, and a role switcher that swaps the whole view.
STATESLoading · empty · widget error
Skeletons on first load and on every filter change. Integration health fails on first paint and recovers on retry. Sur branch + Low risk returns the empty state.
FLOWSplash → Dashboard
The startup sequence now completes into the dashboard, as does MFA. Every "Go to Dashboard" button in the Phase 2 states is a real destination rather than a placeholder.
Phase 4 — cheque intake & processing
Cheque Upload
Front and back slots that take a real file — type and size are genuinely validated — plus per-file progress, submission metadata, and a session list that starts empty and grows.
SCREEN 2Batch Upload
Multi-file intake with automatic front/back pairing, a ready-versus-needs-attention summary, per-row and overall progress, and the option to submit only the valid subset.
SCREEN 3Processing Queue
Every cheque in flight, with a genuinely live feel — a cheque advances a workflow state every few seconds and its badge pulses rather than snapping. Bulk re-queue, scope switch, column-priority collapse.
SCREEN 4Cheque Processing Details
The image viewer — zoom, pan, rotate, front/back — beside a collapsible stack of summary, extracted fields, and the full state history as a vertical timeline.
SCREEN 5Extraction Results
Field-by-field OCR / ICR / MICR output with inline correction. Editing a value is audited on the spot and re-labels the field as manually set — the engine's number is never silently overwritten.
STATESStill-processing · low quality
0041851 shows fields shimmering as each engine returns. 0041831 shows a degraded image below the quality minimum with half its fields unread. 0041828 is a clean straight-through cheque.
Phase 5 — masters: customer, signature, cheque limit
Customer Master
Search-as-you-type across CIF, name and account with four filters. Records missing a signature or a limit carry an amber cap — an operationally important gap, stated without alarm.
SCREEN 2Customer Master Details
Seven tabs of controlled reference data. Core-banking-owned fields carry a padlock; proposed edits sit in a pending panel beside the live record, never merged into it.
SCREEN 3Signature Master
Specimens are blurred until you hold to reveal — a deliberate press, then a logged stamp naming who looked and when. Two permission tiers: reveal, and reveal-plus-replace.
SCREEN 4Cheque Limit Details
Current, future-dated and pending limit sets are three visually distinct things — approved-and-scheduled is not the same as awaiting-a-checker, and the screen never conflates them.
STATESNot configured · read-only
An account with no limits explains what that costs — every cheque routes to review. Switch the acting role on any masters screen and edit affordances disappear rather than grey out.
Phase 6 — validation results & signature comparison
Validation Results
Every check the engine ran, grouped and individually expandable — click a row and it shows the actual comparison, thresholds and evidence. Failures are scannable before anything else.
SCREEN 2Signature Comparison
Registered specimen versus the signature lifted from the cheque, side by side or tinted and overlaid. Every score, every measured characteristic, and language that never overclaims.
STATESRan and failed ≠ could not run
0041831 separates the two: a dormant account fails, while a missing amount-in-words means the reconciliation check could not run. Different marks, different language, never conflated.
UNCERTAINThe band where the platform asks
0041836 scores 64.8 — between accept and reject. The screen says so plainly rather than guessing, and shows that the reference specimen is itself still awaiting approval.
DECISIONSAll five decision states
VALID · REVIEW_REQUIRED · INVALID · PENDING_EXTERNAL_SYSTEM · PROCESSING_ERROR, each with a decision hero that leads the hierarchy and states its own reasoning.
Phase 7 — review workbench & maker-checker
Maker Review
The reviewer's worklist. Reasons for review are derived from the validation result rather than written twice, and wait time carries an SLA bar that shifts tone as it ages.
SCREEN 1Manual Review Workbench
Cheque pinned left, findings right. Clean sections start collapsed and flagged ones start open, so the first five seconds land on what is actually wrong. Every panel mounts an existing component.
SCREEN 3Checker Approval
The maker's decision and rationale lead; the evidence sits underneath, collapsed, because a checker verifies a judgement rather than repeating an investigation.
THE CONTROLSegregation of duties, visible
Submit a decision as N. Al-Hinai, then open checker approval as the same identity: the approval actions are gone and the screen explains why, calmly. Switch to K. Said and they return.
CASESFive queued cheques, five reasons
Above threshold · uncertain signature · no limits configured · no reference specimen registered · a joint mandate satisfied by neither signatory. Each ties to a real gap in the masters.
Phase 8 — queues & core banking integration
Validated Cheque Queue
Twelve queue states across four sub-families, each badge carrying a six-pip rail showing how far the cheque has travelled. Needs attention is one click, not a filter you have to build.
SCREEN 2Core Banking Integration Queue
The connection itself, and the two queues either side of it. The Pending Integration Queue is framed as a supported holding condition — violet, calm, and explained — never as a failure.
SCREEN 3Integration Transaction Details
The payload actually sent, syntax-highlighted and copyable, the response or an honest explanation of its absence, and every retry attempt on a timeline. Three states: acknowledged, retrying, exhausted.
SCREEN 4Exception Queue
Everything on the platform needing a person, filtered by type as the primary control and sorted by severity band then age — a nine-minute integration failure outranks a seven-hour limit violation.
Phase 9 — notifications, audit, reports & analytics
Notification Center
Grouped by recency, because a notification is work with a clock on it. The list item is one component — the topbar bell was rebuilt on it, so the two can never diverge.
SCREEN 2Audit Trail
Hash-chained and append-only, with each record carrying the hash of the one before it. Deliberately denser than the reference screens, and with no edit affordance anywhere for anyone.
SCREEN 3Reports
Five KPI reports, each with parameters, a chart, a table and a schedule drawer. Every figure reconciles with the operations dashboard.
SCREEN 4Analytics
Four metrics × four dimensions, driven by a plain-language picker rather than a query builder — it reads back the question you asked as a sentence.
THE HONEST GAP“Not enough data” ≠ “no results”
Choose Duplicate rate broken down by confidence band: only 19 cheques were flagged all week. The screen explains why it will not draw that chart, and offers two ways out.
Phase 10 — administration
Thresholds show their consequence
Every threshold renders as three outcome bands — reject, review, auto-accept — resized live as you drag, with the share of real cheques that would land in each computed from the actual confidence distribution.
SCREENS 1–3Users · Roles · Branches
Accounts, a permission matrix grouped by the same sections as the sidebar, and the bank/branch hierarchy every other screen scopes by. Deactivating a branch warns you what still references it.
SCREEN 4Cheque Template Editor
Drag and resize extraction zones over a real cheque, colour-coded by extraction engine. Below 1024px the same template is edited by coordinates — genuinely editable, not a warning notice.
SCREENS 5–8Rules · Thresholds · Signature · Limits
Four screens on one shared configuration template — header, sections, change history, pending-approval, sticky unsaved bar. Including a three-step bulk limit import that never partially applies.
SCREENS 9–10Workflow · Integration
The cheque lifecycle as a diagram using the reviewer's own badges, with a list fallback on narrow screens; and the core banking interface, where credentials are masked and revealing one is logged like a reference signature.
Phase 11 — monitoring
System Monitoring
Is the platform itself healthy — service health, throughput, queue depth against capacity, master-data freshness, and alerts you can acknowledge. Acknowledge all three and the screen settles into its calm all-healthy state.
SCREEN 2Security Monitoring
Sign-in activity, every signature and credential reveal, and access anomalies framed as indicators — the same stance the platform takes on cheque risk. The sensitive-access table is the audit table itself, pre-filtered.
THE SERIOUS ONEAudit integrity — chain broken
The gravest state in the prototype, designed deliberately: it names the two records that fail to reconcile, says not to clear it because the broken state is the evidence, and earns its weight through colour and copy rather than motion.
Where this stands
All eleven phases are built. 53 screens, 37 live sidebar destinations with no placeholders remaining, and every internal link resolving. Eleven shared modules carry the components; not one pattern was forked into a second implementation.
Building Phase 8 last surfaced a real arithmetic fault in Phase 3: the dashboard reported “successfully exported 967”, which quietly counted cheques still in flight as settled. The correct four-way partition of the 1,043 validated cheques — 891 settled, 76 in flight, 62 held, 14 failed — now holds across the dashboard, the reports and the queue screens alike.
Every phase was verified structurally as it was built — nesting, links, icons, script targets, data reconciliation, permission gates, hash-chain continuity and language. The prototype has since been rendered and measured in a real browser, which caught a class of fault structure cannot see: a tooltip that dragged 223px of horizontal scroll across every screen, icon buttons whose glyphs rendered at 34×150px, and text as faint as 1.19:1 — including these very launcher cards, which were white on white. Contrast is now measured across all 3,051 text nodes rather than judged by eye.
Walking the flow
Sign in with any username and a password of eight characters or more to reach MFA; a shorter password returns the generic authentication error so that state is reachable without a hidden toggle.
At MFA, the first submitted code is rejected — showing the error, the shake and the attempts-remaining warning. Submit again to continue into the shell, which opens on the Operations Dashboard.
Inside the shell, all thirty-seven sidebar destinations are live — there are no phase tags and no placeholders left. Collapse the sidebar to the icon rail and the choice is remembered across screens.
Narrow the window below 1024px and the sidebar becomes an off-canvas drawer; below 768px the search field folds into an icon and the topbar condenses in a fixed order.
On the Patterns screen, Go offline slides the banner in under the topbar and Reconnect runs the syncing state before clearing itself. The widget-failure panel and the timeout demo both fail once and succeed on the second attempt, so you can see the recovery as well as the failure.
The splash runs its real sequence and completes into the shell; append ?state=extended to hold it at the reassurance state, or ?state=fail to watch it hand over to the crash boundary.
On the dashboard, the viewing as control switches between Operations Manager and Reviewer — the Reviewer loses integration health entirely and the headline pair becomes their own workload. Open Filters and choose Sur branch with Low risk to reach the empty state; any other change gives the narrowed dataset.
The integration-health panel deliberately fails on first paint so the Phase 2 widget-error pattern is visible in situ; its Retry loads the donut without touching anything else on the screen.
In Phase 4 the flow connects end to end: upload a cheque (or load the sample), submit it, follow the link into the processing queue, click any cheque ID for its details, and open extraction results from there. Dashboard rows now land on the same detail screen.
The image viewer takes zoom, drag-to-pan, rotate, front/back and keyboard + − 0 r. On Extraction Results, click a field's pencil to correct it — the row turns green-edged and stamps who changed it and when.
The masters screens share one acting role, remembered as you move between them. As Customer Master Administrator you can propose an edit but not touch a signature; as Signature Master Administrator the reverse. As Reviewer every edit control is simply absent — least privilege should be invisible, not taunting.
On Signature Master, press and hold Hold to reveal for a second: the specimen resolves from blur and stamps who revealed it. Propose a replacement and the current version stays active until a second administrator approves — the pending panel makes that unmistakable.
On Validation Results, the amber strip at the top lists exactly what needs a person — click any chip and it scrolls to that group and opens the failing rows. Click any check to see the thresholds and evidence the engine used.
On Signature Comparison, reveal the registered specimen, then switch to Overlay: the two signatures tint apart — brand blue for the reference, red for the cheque — and multiply together, with a slider to fade the cheque layer in and out. Cheque 0041827 has a joint mandate, so it carries two signatories with different results each.
Walk the maker-checker control end to end. Start at Maker Review as N. Al-Hinai, open a cheque into the workbench, choose Reject and submit — a rationale is enforced. Then open Checker Approval on the same cheque as the same identity: the approval actions are absent and the screen explains that a different approver must complete the step. Switch the acting identity to K. Said and they appear. Approve, and the cheque is released to the Validated Cheque Queue.
The decisions persist for the session, so Reset prototype decisions at the foot of Maker Review puts the queue back if you want to walk it again.
Open the topbar bell on any screen: it now renders the same notification item the Notification Center feed uses. Mark everything read there and the bell count updates with it.
On the Audit Trail, click any row to expand its before/after diff and see the record's own hash beside the hash of the record before it. Follow this entity switches to the timeline view for that one cheque, customer or specimen.
In Administration, drag a confidence threshold and watch the three outcome bands resize with a live estimate of how many cheques would need a person. Change anything on any of the ten screens and the same sticky unsaved bar appears, leading to the same pending-approval panel used since Phase 5.
Switch the acting identity to Reviewer on any Administration screen and the whole screen is replaced by a calm explanation rather than a page of disabled controls. On Integration Configuration, hold to reveal the client secret — the same deliberate, logged interaction as a reference signature.
Phase 8 closes the loop at the far end: from the review workbench, an approved cheque lands in the Validated Cheque Queue, moves through the Integration Queue, and — because no interface is configured in this environment — waits in the Pending Integration Queue rather than being lost. Open CHQ-2026-0041688 in Transaction Details to see five failed attempts and the escalation into the Exception Queue.
The one continuous story worth walking end to end: sign in → MFA → dashboard → click cheque CHQ-2026-0041827 → its extraction, validation results and signature comparison → open it in the review workbench → submit a decision as N. Al-Hinai → try to approve it as the same person and be told why you cannot → switch to K. Said and approve it. Then open Security Monitoring and find your own signature reveal in the sensitive-access log.
Phase map
Every screen in the prototype, by the phase that built it. The cards above are the guided route; this is the complete index — 53 screens, all reachable, plus this launcher.