# MobilityOps design directions

Date: 2026-08-02
Stitch project: `projects/17018847755558569017`

All directions solve the same twelve-screen product map. The first three columns below
were authored as complete direction inventories; representative high-fidelity anchors
were generated through Stitch and stored in `artifacts/design-validation/stitch/`.
Stitch's multi-screen generation endpoint did not return a reliable screen collection
for 12-screen requests, so generation was split into smaller, inspectable calls. The
selected direction was then implemented and captured across every working route.

## Shared twelve-screen product map

| # | Screen | Required job |
|---|---|---|
| 01 | Login | Choose a demo role with a clear product promise and trust disclosure. |
| 02 | Operations dashboard | Scan readiness, today's movements, attention and integration evidence. |
| 03 | Fleet registry | Find and filter vehicles; spot status and attention quickly. |
| 04 | Vehicle record | Understand one vehicle's readiness, facts, history and quality state. |
| 05 | Booking ledger | Search and filter bookings without rendering an unbounded wall of rows. |
| 06 | Booking return | Capture inspection facts, review consequences, then commit locally. |
| 07 | Quality workbench | Triage persisted data-quality exceptions by evidence and severity. |
| 08 | Duplicate review | Compare conflicts, select a survivor and preview the irreversible merge. |
| 09 | Procedure knowledge | Ask, retrieve, verify evidence and show cited sources. |
| 10 | Integration control | Show n8n, RAGcore and MCP Hub as connected, degraded or unconfigured. |
| 11 | Audit trail | Trace actors, actions, correlation IDs and expandable metadata. |
| 12 | Mobile operations | Preserve priority, context and navigation at 390 px without overflow. |

## Direction A — Control Rail

Purpose: a calm, high-density control centre for operators who move between live state,
exceptions and record work throughout a shift.

- Deep-petrol persistent rail; mineral-teal active/action state.
- Off-white canvas and white work surfaces separated by thin rules.
- Compact readiness bands and table/timeline hybrids instead of KPI-card walls.
- Inter/system grotesk, 4 px radii, restrained shadows, semantic status dots.
- Mobile uses a compact top bar, six-item labelled bottom navigation, and stacked work
  sections with a horizontally scrollable readiness strip.

Twelve-screen treatment:

| Screen | Control Rail treatment |
|---|---|
| Login | Split dark story panel and direct role workspace choices. |
| Dashboard | Readiness band; Attention and movements primary; systems/activity secondary. |
| Fleet | Search/filter toolbar and compact registry rows with attention rule. |
| Vehicle | Persistent status header, task tabs and ruled fact/history surfaces. |
| Bookings | Filtered ledger with client-side pagination and clear rental windows. |
| Return | Three-step capture/review/result rail with calculated consequence preview. |
| Quality | Work queue language, severity markers and evidence-first issue rows. |
| Duplicate | Aligned field comparison with match/difference markers and merge preview. |
| Knowledge | Retrieval flow, explicit evidence state and primary source cards. |
| Integrations | Three honest system cards above a retryable outbox ledger. |
| Audit | Humanized action labels and expandable technical metadata. |
| Mobile | Bottom navigation, stacked rows with explicit labels, fixed priority order. |

Stitch references:

![Control Rail anchor](../../artifacts/design-validation/stitch/direction-a-control-rail.png)

![Control Rail final refinement](../../artifacts/design-validation/stitch/direction-a-refinement-2.png)

![Control Rail mobile](../../artifacts/design-validation/stitch/direction-a-mobile-dashboard.png)

## Direction B — Dispatch Ledger

Purpose: maximize throughput and repeatable scanning for a dispatch-heavy team.

- Ink-black 48 px header and 64 px rail on a warm-ivory ledger surface.
- Cobalt actions; amber/vermilion reserved for operational exceptions.
- 36 px ruled rows, near-square controls, caps labels and almost no elevation.
- Strongest at dense registry and scheduling work; least forgiving on mobile.

Twelve-screen treatment:

| Screen | Dispatch Ledger treatment |
|---|---|
| Login | Minimal logbook cover and compact operator credentials panel. |
| Dashboard | Aviation-style operational ledger with row groups by urgency. |
| Fleet | Dense registry, selection checkboxes, batch bar and page counts. |
| Vehicle | Two-column log sheet with dated maintenance/inspection rows. |
| Bookings | Time-window ledger grouped by departure/return shift. |
| Return | Inspection checklist on a ruled form with a signed dispatch summary. |
| Quality | Exception ledger grouped by severity, rule and age. |
| Duplicate | Side-by-side identity ledger with explicit canonical-record column. |
| Knowledge | Query/result folio with citations rendered as reference notes. |
| Integrations | Systems board with timestamped status rows and delivery attempts. |
| Audit | Chronological event ledger with technical disclosure rows. |
| Mobile | Single-column status cards; secondary because ledger density compresses poorly. |

![Dispatch Ledger fleet anchor](../../artifacts/design-validation/stitch/direction-b-fleet-registry.png)

## Direction C — Service Atelier

Purpose: create a reassuring human service workspace for mixed operational and concierge
teams where narrative context matters as much as data density.

- Pale mineral canvas, forest-green ink, sage active surfaces and clay exceptions.
- Editorial serif headlines paired with a legible sans-serif for operational values.
- 10 px surfaces, gentle spacing and functional line illustrations.
- Strongest at service journeys and knowledge; weaker at high-volume exception scanning.

Twelve-screen treatment:

| Screen | Service Atelier treatment |
|---|---|
| Login | Human product narrative and quiet operator choice cards. |
| Dashboard | Curated timeline, readiness trio, attention atelier and system health. |
| Fleet | Collection-style rows with vehicle identity and service narrative. |
| Vehicle | Editorial profile, recent journey and maintenance story. |
| Bookings | Customer-led service itinerary grouped by day. |
| Return | Guided hand-back narrative with warm explanation of consequences. |
| Quality | Review studio with issue context, evidence and suggested next step. |
| Duplicate | Identity portrait comparison with survivor preview. |
| Knowledge | Concierge-like question flow grounded by visible source folios. |
| Integrations | Calm service-health cards with progressive technical detail. |
| Audit | Human-readable activity journal with expandable references. |
| Mobile | Single-column narrative timeline and large service actions. |

![Service Atelier anchor](../../artifacts/design-validation/stitch/direction-c-service-atelier.png)

## Decision

Control Rail is selected. It keeps Dispatch Ledger's operational precision without its
mobile and cognitive-density penalty, while avoiding Service Atelier's tendency to
soften high-severity triage. Its compact rail, readiness band and disciplined status
grammar translate directly to the existing route and API model.

Two explicit Stitch refinement passes shaped the implementation:

1. Reordered the page around readiness, Attention and movements; demoted integrations
   and recent activity to a quieter tier; removed oversized KPIs.
2. Standardized 44 px targets, visible focus, table headings, compact filters, stronger
   contrast, active navigation and mobile-safe layout rules.