TropiCycle Fleet Intelligence

01 - Problem

Aircraft operating in tropical conditions need clearer ways to monitor structural fatigue signals. For a hackathon sprint, the challenge was to turn technical monitoring data into an interface that could be scanned quickly by operators.

02 - Research

I studied dashboard patterns for fleet monitoring, alert prioritization, and report-heavy workflows. The interface needed to balance overview-level awareness with aircraft-specific detail.

03 - Process

I structured the product around fleet overview, aircraft detail, alerts, and reports. Mock REST data and state stores made the prototype feel operational while still being fast enough for a sprint timeline.

04 - Wireframe

Wireframes prioritized a desktop command-center feel: map first, alerts close by, charts grouped by aircraft, and report summaries available without burying the operator in navigation.

05 - Design System

The UI used compact cards, alert severity tokens, chart containers, table rows, and map markers. These patterns kept dense data readable without turning the dashboard into decoration.

06 - Final UI

The final prototype includes a fleet map, aircraft detail pages, alert states, chart-heavy monitoring views, and report workflows built with React, TypeScript, Vite, Zustand, Recharts, D3, Leaflet, and MSW.

07 - Reflection

TropiCycle sharpened my approach to technical dashboards: start with the operator's scanning behavior, make severity obvious, and let visual hierarchy do more work than copy.