Lattice — observability for autonomous fleets
Real-time fleet telemetry dashboard with sub-100ms data refresh, built on Next.js App Router with edge streaming.
- Discovery & operator research
- Information architecture
- UI design system
- Front-end engineering
- Edge streaming infrastructure
- Observability + on-call runbooks
What they needed to solve.
Lattice needed to visualise 50,000+ sensor events per second across a global fleet of autonomous vehicles. The existing tool was a Grafana fork that crashed at 20% load and offered no operator workflow on top of the raw data.
How we approached it.
We built a custom edge-streaming pipeline using Next.js App Router with React Server Components and WebSocket bridging, paired with a D3-canvas hybrid renderer for zero-DOM-overhead chart updates. Role-based views surface the right alerts for fleet operators, ground crew, and the SRE team — without overwhelming any of them.
Design decisions.
- AaGeist Mono — telemetry numerals
- AaGeist Sans — UI text
- AaInstrument Serif — section titles
8-pt baseline grid, dark-first OKLCH tokens, custom data-density rules per role.
- Canvas-driven realtime charts at 60fps
- WCAG 2.2 AA contrast on every chart label
- Density toggle (compact / standard / spacious)
What changed.
Grafana fork — generic dashboards, no operator workflow, frequent UI freezes during incidents.
Purpose-built operator console with role-based views, edge streaming, and zero-DOM chart updates.