SaaS · B2B
My Role
Timeline
Team
Scope
Overview
17
Production-ready screens shipped
5
Fleet modules consolidated
120+
Design system components
Quick View
Vibe-coded interactive prototype built with Claude Code to validate the dashboard flow.
AI Workflow
Context
Problem
01
Data Density without Hierarchy
The AI prioritized data volume over scannability. Critical anomalies and urgent KPIs were buried under complex charts and dense tables.
02
Fragmented Visual Logic
The AI-generated screens lacked a unified design language. Card styles, padding, and chart types felt disconnected across different modules.
03
Architectural Constraints of AI Assets
The AI output existed only as a flat, non-scalable asset. It lacked the flexibility required to build a consistent 17-screen ecosystem.
Research & Strategy
AI-ASSISTED
Synthetic Persona
Prompted Claude to build a fleet manager behavioral profile — daily triggers, cognitive load, scan patterns.
Expert Interview Synthesis
Structured interview with Jobin (PM, Geotab). Fed raw notes to Claude for thematic synthesis.
Competitive Audit
Claude synthesized Geotab UI conventions and B2B dashboard norms — identifying where the AI prototype broke from established patterns.
DECISION TRAIL
Managers scan for problems in the first 60 seconds
KPI cards first, table last
Compliance and Efficiency are different cognitive modes
5 separate modules, identical layout
Add-ons that feel foreign lose trust instantly
Match Geotab native nav exactly
'Idle Hours' is engineer language
'Avoidable Idle' — actionable, not technical
Design Process
Before — AI Generated
Data Table (all metrics)
Mixed Charts
Raw Numbers
Navigation (generic)
Flat hierarchy — no scan path
After — 3-Tier IA
Tier 1
KPI Cards
Anomaly detection at a glance
Tier 2
Trend Charts
Patterns over time
Tier 3
Data Tables
Detailed records for investigation
Progressive disclosure — scan → explore → investigate
Same scaffold × 5 fleet modules
Fleet Overview
Compliance · HOS
Safety & Risk
Each module follows the identical KPI → Chart → Table structure — consistent mental model, distinct data context.
IA Restructure
3-Tier Information Hierarchy
KPI cards surface anomalies instantly. Charts reveal trends. Tables provide detailed records. Each layer answers a progressively deeper question.
Scalable Layout
5-Module Architecture
Separated compliance and efficiency into distinct cognitive spaces — each module follows the same scaffold so the layout feels consistent but focused.
Outcome
17
Production-ready screens shipped
5
Fleet modules consolidated
120+
Design system components
Reflection
01
Designing from AI output is a new skill
Starting from a functional AI prototype is fundamentally different from 0-to-1 design. The hardest part isn't building — it's developing the critical eye to identify what the AI got right, wrong, and couldn't know without user context.
02
Scale requires systematic thinking
17 screens can't be maintained with manual discipline alone. Figma MCP taught me that the most important design decision is often 'how do I make this impossible to get wrong at scale?'
03
Domain knowledge is irreplaceable
AI helped me explore faster, but Jobin's domain expertise and Geotab's real user terminology made the difference between a generic dashboard and one that feels right to fleet managers.
→
Next steps
Validate the redesigned information hierarchy with a fleet manager usability test — measuring task completion rate on the KPI → Chart → Table flow versus a table-first baseline.