Redesigning an IoT Fleet Dashboard: From Dense Tables to Glanceable Cards

Tech · 5 min read

Fleet managers were overwhelmed by a legacy dashboard of sortable columns and nested modals; on phones the layout was unusable. The product team performed contextual inquiry rides with drivers and managers, timed common workflows, and plotted the most frequent pain points. They discovered that users primarily needed three things at a glance: vehicle health, location vs. ETA, and critical alerts.

The redesign introduced glanceable cards that aggregated those key signals with visual priority cues (color, iconography, and micro-animations for state changes). Cards used progressive disclosure: tapping expanded the card to show trip history and maintenance logs, while long-press surfaced quick actions like reroute or dispatch message. Accessibility improvements included semantic color alternatives and larger hit targets for in-vehicle use.

Performance tradeoffs were addressed by moving heavy telemetry to a lazy-loading layer and caching recently viewed vehicles. On mobile the card layout reflowed into a vertical stack with quick-action buttons always within thumb reach. Post-launch analytics showed a 27% increase in task completions per session, a 52% reduction in time-to-resolve critical alerts, and improved NPS from field users who previously avoided the web UI.

The team's takeaway: when data density harms situational awareness, simplifying to prioritized, interactive summaries can reclaim attention and speed decision-making without hiding necessary context.