Figma handoff — one-page outline
Single-page workshop layout: personas, swimlanes, and core flows for Payment Reconciler UX.
Use this as one artboard or document in Figma (or Miro). Terminology: incoming transaction, expected transaction, merchant, match — see Domain vocabulary.
1. Personas (top of page)
| Persona | Goal | Must design for |
|---|---|---|
| Super-admin | Right tenant + environment every time; cross-tenant user support | Tenant switcher / “acting as” context, user admin across customers |
| Org admin | Their tenant + environment correct; data sources, field mappings, rules, schedules, webhooks, API keys, users | Onboarding, settings, integration health |
| Reconciliation user | Expected + incoming queues; match review; exceptions | Lists, detail, accept/reject, search/filter |
| Read-only user | Same visibility, no edits | Disabled/hidden actions, messaging |
| Automation (implicit) | Reliable feeds and jobs | Sync logs, job status, errors |
2. Swimlanes — touchpoints (expanded)
Draw five lanes (super-admin is distinct from org admin). Each cell is a place users go or a task—design each as a real screen or modal where applicable.
| Lane | Touchpoints (grouped) |
|---|---|
| Super-admin | Select tenant + environment before any work · User lifecycle across tenants (assign/remove, roles) · Same operational screens as org admin only after context is explicit |
| Org admin | Tenant / environment (fixed to their org) · Tenant settings (matching, locale, LedgerMatch prefs, job schedules, cache) · Users & roles (within tenant) · Data sources (Stripe, EBICS, …) · Field mappings · API keys · Webhooks (create, test, deliveries) · Jobs (list, trigger, cancel) |
| Reconciliation user | Expected transactions (list, create, edit, delete, import) · Incoming transactions (list, filters, manual create/edit, CSV upload) · Match queue / detail · Accept / reject · Trigger matching · Exception search (reference, merchant, amount) |
| Read-only user | Same navigational structure as above; mutation entry points removed |
| System / background | Scheduled sync · Matching batch · Auto-accept rules · Webhook dispatch & retry (show outcomes in admin UI) |
Workshop prompt: “For each admin touchpoint, draw one arrow to the incoming or expected screen it unblocks.”
3. Flow index (columns or rows)
Use Interaction flows for step tables. Suggested nine strips (A–I):
| ID | Name | One-line intent |
|---|---|---|
| A | Resolve one incoming | Accept/reject matches |
| B | Stripe live | Data source + mapping + sync → incoming |
| C | Bank (EBICS) live | Init letter → import → incoming |
| D | CSV | Upload → incoming |
| E | Expected lifecycle | CRUD + filters + import |
| F | Field mapping | Per-source rules |
| G | Webhooks | Create, test, deliveries |
| H | API keys | Create, rotate |
| I | Jobs | Monitor, trigger, cancel |
Core product loop remains A; B/C/D are “get incoming in”; E feeds A; F supports B/C/D.
4. Global UI checklist
- Tenant + environment always obvious
- Labels use merchant, incoming / expected, match
- Viewer role: no broken primary actions
- Errors link to data source, mapping, or expected data
- Jobs and sync logs answer “what ran last night?”
5. Links
- User journeys — full stories (18 sections)
- Interaction flows — flows A–I
- UX overview — vocabulary + one-liner
Optional Mermaid — swimlanes
Super-admin is a separate lane (not a step before org admin); no implied ordering between super-admin and tenant-scoped roles.