ParkingPro+ IoT AI Dashboard: Operational Intelligence Platform - @ Google AiStudio - Live Demo

Project Overview

ParkingPro+ is a responsive, SaaS-based IoT AI dashboard designed for facility managers and operators. It provides a single pane of glass view for complex operational data, including carpark occupancy, detailed building utilization, and the real-time health status of thousands of interconnected IoT sensors and devices. The platform shifts operations from reactive monitoring to proactive, predictive resource management.

Technology Stack: React (TypeScript), Tailwind CSS, Custom Data Visualization Libraries, Real-time WebSocket integration. 

My Role: UX Architect, Full-Stack Prototyper, Data Modeling & Visualization Lead.

1. The Problem: Operational Blind Spots and Reactive Management

Operators managing large, multi-site infrastructures faced three critical challenges:

• Data Silos & Fragmentation: Occupancy data (carpark, offices) was separate from device health data (sensors, cameras, access points), making it impossible to correlate maintenance issues with operational impact.

• Reactive Maintenance: Device failures were often only discovered when a user reported a broken sensor or payment machine, leading to long periods of downtime and revenue loss.

• Poor Resource Allocation: Without real-time, aggregated capacity insights, staff scheduling, security patrols, and maintenance routes were inefficiently planned, increasing overhead costs.

The core challenge was to build a system that made vast streams of sensor data reliable, immediate, and actionable for both field staff and executive management.

2. The Solution: Unified Health Monitoring and Predictive Insights

ParkingPro+ delivers an integrated view by prioritizing data integrity and operational context.

• Unified Health Status: A critical dashboard widget shows the aggregated health status of the entire IoT network (e.g., 98% online). Managers can drill down to see devices flagged by AI as at-risk (displaying anomalous behavior like high temperature or erratic readings) before outright failure.

• Capacity & Utilization Map: Provides a live, geospatial overview of all assets (e.g., Carpark A is at 92% capacity, Building 4 is 30% occupied), allowing management to dynamically shift pricing or allocate staff based on need.

• TypeScript Data Reliability: The use of TypeScript was essential for defining strict data schemas for complex IoT payloads, ensuring data reliability and reducing runtime errors when integrating multiple real-time data streams.

• Actionable Alerts: Alerts are tiered—Critical, Warning, Informational—and automatically linked to suggested maintenance protocols, accelerating resolution time.

3. The Design Process: Focus on Glanceability and Field Use

The design process emphasized practical usability across diverse operating environments and device types.

• UX Research – Field Interviews: Conducted structured interviews with maintenance and security staff to understand their workflow while on patrol. This informed the need for a hyper-efficient, mobile-first design.

• Atomic Design with React: Developed a library of reusable, type-safe React components (e.g., Occupancy Card, Device Health Indicator) to ensure consistency and speed up development across new features.

• Tailwind for Responsiveness: Utilized Tailwind CSS extensively to create an adaptive layout that renders perfectly on command center desktops, mobile phones for field technicians, and wall-mounted tablets. The visual hierarchy changes dynamically based on viewport size, always prioritizing critical status information.

• Data Hierarchy & Color-Coding: Employed a strict color-coding system (Green=Optimal, Yellow=Warning, Red=Critical) and used bold, easily scannable typography to ensure the dashboard remained glanceable even in low-light environments.

4. The Final Product: Measurable Efficiency Gains

ParkingPro+ has successfully standardized operational management across client portfolios, delivering tangible efficiency improvements.

• 90% Reduction in Reactive Maintenance: Proactive alerts based on device anomalies allowed teams to replace or repair components before critical failure, minimizing user impact.

• Optimized Space Usage: The real-time capacity insights enabled dynamic pricing adjustments and staff allocation, resulting in a 15% measured increase in overall carpark utilization during peak hours.

• High Field Adoption: The clean, responsive interface (powered by Tailwind) ensured rapid acceptance and reliable use by on-the-ground maintenance and security teams.