Anchor-Screen Wireframes (lo-fi)
Status: v1.0 · Owner: Design Lead · Gate input: G1 (satisfies
Phase_1.mdAC1.3 & task 1.A.4) Low-fidelity, structural wireframes for the six anchor screens. These define layout, hierarchy, primary action, and state behaviour — not final pixels. Hi-fi design happens in the owning phase. ASCII used deliberately so the structure is unambiguous and version-controllable. Each screen references the personas (UX_personas.md), IA routes (information_architecture.md), and states (UX_patterns.md).
The six anchors (per Phase 1): Dashboard Studio, Workflow Studio, Asset Detail, Work-Order List, Mobile Inspection, AI Chat.
A1 — Dashboard Studio (editor) · Mei · /dashboards/:id/edit · Phase 5
┌──────────────────────────────────────────────────────────────────────────────┐
│ ≡ Tenant▾ Dashboard: "FM Ops" ●draft [Undo][Redo] [Preview] [Save▸]│ top bar
├───────────┬──────────────────────────────────────────────────┬───────────────┤
│ PALETTE │ CANVAS (react-grid-layout, snap grid) │ INSPECTOR │
│ │ │ (selected │
│ ▸ KPI │ ┌─────────┐ ┌─────────┐ ┌──────────────────────┐ │ widget) │
│ KPI Card│ │ KPI │ │ KPI │ │ Line Chart │ │ │
│ Gauge │ │ MTTR │ │ SLA % │ │ (telemetry) │ │ Title [____] │
│ Trend │ │ 4.2h ▲ │ │ 96% ▼ │ │ /\ /\ │ │ Data source ▾ │
│ ▸ Chart │ └─────────┘ └─────────┘ └──────────────────────┘ │ • Telemetry │
│ Line │ ┌──────────────────────┐ ┌─────────────────────┐ │ • DataPoint▾ │
│ Bar │ │ Work Order Kanban │ │ Alert Feed (live ●) │ │ Range [24h▾] │
│ Pie │ │ [Open][Prog][Done] │ │ ⚠ Chiller CH-01 │ │ Refresh[30s] │
│ ▸ Map │ └──────────────────────┘ └─────────────────────┘ │ Drill → asset │
│ Floorpl.│ │ │
│ ▸ AI/WF │ (drag widget from palette → drops on grid) │ [Remove] │
│ ▸ Media │ │ │
└───────────┴──────────────────────────────────────────────────┴───────────────┘
- Primary action: Save (with publish split-button). One editor at a time (co-edit lock).
- Inspector is a Zod→RHF form with curated copy + sensible defaults (Mei isn't an engineer).
- Drag-drop has a keyboard alternative (select widget → move via menu) — WCAG 2.2 2.5.7.
- Every widget value is drill-through; "Drill →" set in inspector.
- States: empty canvas → "Drag a widget or start from a template"; widget load/empty/error per State Matrix.
- View-mode switch (Standard/TV/War Room) lives in Preview.
A2 — Workflow Studio (designer) · Mei/Daniel · /workflows/:id/edit · Phase 7
┌──────────────────────────────────────────────────────────────────────────────┐
│ ≡ Workflow: "Anomaly → P2 WO" ●draft [Lint ✓] [Test ▷] [Publish ▸] │
├───────────┬──────────────────────────────────────────────────┬───────────────┤
│ NODES │ CANVAS (React Flow · minimap · zoom · auto-layout)│ NODE INSPECTOR│
│ │ │ │
│ Triggers │ ┌──────────┐ ┌───────────┐ │ Type: Create │
│ ⏰ Cron │ │ ⚡ Telem. │─────▶│ ◈ If temp │──true──┐ │ Work Order│
│ ⚡ Event │ │ Threshold│ │ > 80°C │ ▼ │ Title [_____] │
│ 🌐 Webhk │ └──────────┘ └───────────┘ ┌──────────┐ │ Priority [P2▾]│
│ Conditions│ │false │ Create │ │ Assign [FM▾] │
│ ◈ If/Else│ ▼ │ Work Ord.│ │ Attach last │
│ ⛬ Switch │ ┌──────┐ └────┬─────┘ │ 24h chart ☑ │
│ Actions │ │ End │ ▼ │ │
│ ✉ Email │ └──────┘ ┌──────────┐ │ ⚠ lint: ok │
│ 📋 Create│ │ ✉ Notify │ │ │
│ 🤖 AI │ │ FM lead │ │ [Delete node] │
│ Approvals │ └──────────┘ │ │
└───────────┴──────────────────────────────────────────────────┴───────────────┘
- Primary action: Publish (gated by Lint pass). Test ▷ = dry-run, side-effect-free, steps shown with timings.
- Lint surfaces cycles / unreachable / missing props inline (red node badge).
- AI + write nodes show a safety badge; OT-control actions force human-in-the-loop.
- Node inspector = per-type Zod→RHF form. Versioning + rollback in the
▾menu.
A3 — Asset Detail · Mei/Tomás · /assets/:id · Phase 4
┌──────────────────────────────────────────────────────────────────────────────┐
│ Assets / Chiller CH-01 [Edit] [⋯ more] │ breadcrumb
├──────────────────────────────────────────────────────────────────────────────┤
│ ❄ Chiller CH-01 ●Operational B2 · Plant Room 3 [+ Work Order]◀prim. │ summary header
│ Type: Chiller · Brand: X · Model: Y · Serial: 1234 · Installed 2019 │
├──────────────────────────────────────────────────────────────────────────────┤
│ [Overview] [Telemetry] [Work Orders] [Documents] [History] │ tabs (in URL)
├──────────────────────────────────────────────────────────────────────────────┤
│ OVERVIEW │
│ ┌── Live telemetry ──────────────┐ ┌── Key facts ───────────┐ │
│ │ Supply temp 6.4°C ● live │ │ Location → B2/PR3 (plan)│ ← drill │
│ │ /\_/\__/\___ (sparkline) │ │ System → Chilled Wtr │ │
│ └─────────────────────────────────┘ │ MTBF 142d · MTTR 3.1h │ │
│ ┌── Open work orders (3) ─────────┐ └────────────────────────┘ │
│ │ WO-1234 P2 In progress → │ │ ┌── Documents (4) ───────┐ │
│ │ WO-1240 P3 Open → │ │ │ 📄 O&M manual.pdf │ │
│ └─────────────────────────────────┘ └────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────────────┘
- Primary action: + Work Order (sticky on mobile). Everything (location, system, WO, doc) is drill-through.
- Live telemetry tile shows live pulse + last-updated; "reconnecting…" on SSE drop.
- Tabs deep-link. States: no telemetry → "No data in range"; no WOs → empty CTA.
A4 — Work-Order List · Mei · /work-orders · Phase 4
┌──────────────────────────────────────────────────────────────────────────────┐
│ Work Orders [Table ⇄ Kanban] [Saved views▾] [+ New] │
├──────────────────────────────────────────────────────────────────────────────┤
│ 🔍 search Status[Any▾] Priority[Any▾] Assignee[Any▾] SLA[Any▾] [Clear] │ filters→URL
├──────────────────────────────────────────────────────────────────────────────┤
│ ☐ Code Title Asset Pri Status SLA Assignee │
│ ☐ WO-1234 Chiller noise CH-01 P2 In progress 🟥 2h Tomás → │
│ ☐ WO-1240 Filter change AHU-7 P3 Open 🟡 due — → │
│ ☐ WO-1255 Monthly inspect CH-02 P4 Assigned 🟢 ok Sara → │
│ … │
│ ────────────────────────────────────────────────────────────────────────────│
│ [2 selected] → Assign Reassign Change priority Export │ bulk bar
└──────────────────────────────────────────────────────────────────────────────┘
◀ KPI cards above list (this month): Open by priority · SLA breaches · Planned:Reactive
- Primary action: + New. Table ⇄ Kanban toggle persists per user.
- SLA shown as icon + colour + time (never colour alone). Row → detail (A3 pattern).
- Bulk action bar appears on selection; destructive actions confirm.
- Mobile: collapses to card list (no horizontal scroll); filters in a sheet.
- States: filtered-empty vs first-run-empty are distinct.
A5 — Mobile Inspection · Tomás · /inspections/:id · Phase 8 (phone-first)
┌──────────────────────┐ offline-capable, autosave per field
│ ‹ WO-1234 ● Offline │ ← calm offline banner (not an error)
├──────────────────────┤
│ Chiller CH-01 · B2 │
│ Inspection checklist │
│ │
│ 1 Visual condition │
│ ◉ OK ○ Issue │
│ 2 Supply temp (°C) │
│ [ 6.4 ] ✓saved│
│ 3 Noise level │
│ ○ OK ◉ Abnormal │
│ 4 Photo │
│ [ 📷 Capture ] ▣▣ │ ← 44px targets
│ 5 Asset QR │
│ [ ▦ Scan ] ✓ CH-01 │
│ 6 Signature │
│ [ ✎ sign here ] │
│ │
├──────────────────────┤
│ Saved on device · │ ← truthful sync state
│ will sync when online│
│ ┌──────────────────┐ │
│ │ Submit │ │ ← sticky primary, full-width
│ └──────────────────┘ │
├──────────────────────┤
│ ⌂ ✓Tasks 📥 🔍 👤│ ← bottom nav
└──────────────────────┘
- Primary action: Submit (sticky, thumb-reach). Camera/scan/signature each one tap, ≥44px.
- Offline is explicit and reassuring at every step; submit queues with stable client id.
- On reconnect: "1 inspection synced ✓"; conflict → plain-language merge (default server-wins + override).
- Every field autosaves to IndexedDB — no lost work.
A6 — AI Chat · Akiko/Mei · /ai · Phase 6
┌──────────────────────────────────────────────────────────────────────────────┐
│ AI Second Brain Provider: Anthropic · budget 32% │
├──────────────────────────────────────────────────────────────────────────────┤
│ You: How did reactive work trend this quarter? │
│ │
│ 🤖 Atlas: Reactive work fell from 4.1% to 2.8% of total work orders over Q2. │
│ ┌── chart ─────────────┐ │
│ │ ▆▅▄▃ (planned:reactive) │
│ └──────────────────────┘ │
│ ▸ looked up: workOrders (Apr–Jun), KPI service ← tool transparency │
│ Sources: [① WO summary] [② KPI report] ← citations │
│ Was this helpful? 👍 👎 │
│ │
│ Follow-ups: [Break down by building] [Compare to last year] │
├──────────────────────────────────────────────────────────────────────────────┤
│ [ Ask anything… ] [📎] [Send ▸] │
└──────────────────────────────────────────────────────────────────────────────┘
- Primary action: Send. Streaming response (first token < 2s).
- Trust by transparency: every answer shows the tools it used + clickable citations; says "not enough data" rather than guessing.
- Multimodal (image upload); follow-up suggestions; thumbs feedback feeds quality scoring.
- Mobile: full-screen, keyboard-aware. Reused as the Phase 5 AI Chat widget.
Cross-wireframe notes
- All six obey: one primary action, full state matrix, drill-through, keyboard + screen-reader parity, EN/JA, theme tokens only.
- These wireframes are the agreed structure for hi-fi design; the Product Owner signs them at G1 (AC1.3). Changes after sign-off go through change control (
Phase_1.mdrisk: requirements churn). - Hi-fi mockups (Figma) per screen are produced in the owning phase and linked back here.