SafeT Pro+ IoT AI Dashboard: Unified Security & Operations Platform - @ Google AiStudio

Project Overview

SafeT Pro+ is a highly responsive, enterprise-grade IoT AI Dashboard built for comprehensive Security, Maintenance, and Facility Management (SMFM) operations. The platform aggregates massive real-time data streams from diverse IoT sensors, security cameras, and maintenance logs into a single, collaborative workspace. Its defining feature is the embedded Gemini AI Assistant, which proactively analyzes data to deliver actionable, predictive insights to operations teams.

Technology Stack: React (TypeScript), Tailwind CSS, Custom Real-time Data Visualization, Firebase/Firestore (as the assumed backend for collaboration), Google Gemini API integration. My Role: UX/UI Strategist, Data Integration Architect, AI Feature Prototyper.

1. The Problem: Operational Lag and Data Overload

Facility and security managers traditionally operate in a highly reactive environment marked by:

• Siloed Systems: Security footage, maintenance ticketing, and building environment controls often reside on separate, non-communicating systems, leading to delayed incident response and complex root cause analysis.

• Data Overload: The sheer volume of sensor data (HVAC, access control, leak detection) overwhelms human operators, making it difficult to distinguish genuine anomalies from noise.

• Inefficient Task Handoff: Lack of integrated communication tools forces teams to rely on radios or external apps, causing friction and errors during incident resolution and shift changes.

The challenge was to create a platform that not only centralized data but intelligently filtered and translated it into immediate, cooperative tasks.

2. The Solution: A Unified, AI-Augmented Command Center

SafeT Pro+ addresses operational friction by prioritizing unified context and predictive intelligence.

• Single Pane of Glass (SMFM): All operational domains—Real-time Analytics, Task Management, and Incident Response—are consolidated onto a single dashboard, allowing managers to instantly correlate a fire alarm (Security) with an air quality fault (Maintenance).

• Gemini AI Assistant: The core differentiator. The AI is trained on historical maintenance logs and sensor behavior. Users can query the AI (e.g., "Why is HVAC unit 3 trending hot?") and it provides context-aware diagnostics, suggests specific maintenance procedures, and even drafts incident reports.

• Integrated Collaboration: Built-in task and incident management tools allow operators to assign, track, and chat about specific events directly within the platform, eliminating reliance on external communication channels.

• Prioritized Intelligence: Alerts are tiered and auto-tagged by the AI, ensuring the team always focuses on high-risk, high-impact events first.

3. The Design Process: Actionable Insights & Mobile Readiness

The design methodology focused heavily on translating complex data into immediate action, recognizing that many users are mobile while on patrol.

• UX Research – Contextual Inquiry: Shadowed facility teams to understand the transition between stationary command centers and mobile field work. This validated the need for a mobile-first interface that maintains data density without sacrificing readability.

• Data Visualization Strategy: Collaborated with domain experts to define key performance indicators (KPIs) for each domain. Utilized interactive charts for trend analysis while reserving large, high-contrast indicators for critical, real-time status updates (e.g., door status, zone alerts).

• TypeScript & React Architecture: Leveraged TypeScript to enforce data integrity across complex streams and built the UI using modular React components, ensuring the entire dashboard is fast, scalable, and reusable across different client deployments.

• Tailwind for Responsiveness: Utilized Tailwind CSS to create a highly adaptive layout, ensuring that the same visual hierarchy and functionality are maintained whether the user is viewing the dashboard on a 4K command screen or a smartphone.

4. The Final Product: Enhanced Safety and Operational Predictability

SafeT Pro+ successfully transformed client operations from a reactive posture to a proactive and predictive management style, yielding significant operational savings.

• 30% Faster Incident Resolution: The integrated task management and AI-driven insights drastically reduced the time between alert and resolution.

• Improved Predictive Maintenance: The Gemini AI's ability to spot subtle sensor anomalies helped clients anticipate equipment failure, leading to a measured 18% decrease in unscheduled downtime.

• Standardized Security Protocol: Unified reporting and collaboration tools ensured all teams followed a consistent, documented protocol for every incident, enhancing regulatory compliance and accountability.

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.

Vision Pro Smart Home Dashboard: The Spatial Control Hub - @ Google AiStudio - Live Demo

Project Overview

The Vision Pro Smart Home Dashboard is a high-fidelity, responsive control panel designed to manage an entire smart ecosystem. Taking direct inspiration from the Apple Vision Pro design system, the platform utilizes advanced glassmorphism UI techniques to create a visually stunning interface that feels intuitive, layered, and 'spatial.' This project transforms the mundane task of device control into an engaging, fluid user experience.

Technology Stack: React (TypeScript), Tailwind CSS (for responsiveness), Custom CSS (Glassmorphism effects), D3.js (Energy Visualization). 

My Role: Lead UI/UX Designer, Front-End Developer, Design System Prototyper.

1. The Problem: Fragmented, Flat, and Frustrating Control

Most existing smart home applications and dashboards suffer from fundamental UX flaws that inhibit seamless daily use:

• Aesthetic Stagnation: Interfaces are often flat, relying on simple cards and switches, failing to leverage the visual fidelity of modern high-resolution displays.

• Fragmented Experience: Users often toggle between three or four different apps (thermostat, lights, security) just to complete a single routine.

• Lack of Hierarchy: Critical information (e.g., current house temperature, security status) is often buried alongside minor controls, slowing down glanceability and triage.

The goal was to establish a single, beautiful, and hyper-responsive control hub that elevates the feeling of a modern, integrated smart home.

2. The Solution: Depth, Context, and Unified Control

The solution was to apply the principles of spatial computing design—namely glassmorphism—to bring depth and visual separation to the digital environment.

• Glassmorphism UI: Translucent, frosted background panels create a layered, "floating" effect, allowing content to recede or stand out based on focus. This aesthetic provides visual delight and reduces cognitive load by separating interactive elements.

• Unified Device Matrix: Centralized widgets for all key domains: Climate Control, Security Status, Media Playback, and Real-Time Energy Consumption.

• Responsive Fluidity: Engineered using Tailwind CSS to maintain the integrity of the glassmorphism look and feel across all devices, from a large desktop monitor to a wall-mounted tablet display.

• Glanceability Priority: Key metrics (e.g., current temperature, active security zones) are always visible, enabling users to check the home status in less than two seconds.

3. The Design Process: Emulating Spatial Elegance

The design process was driven by an 'emulation first' approach, translating the subtle, layered interactions of spatial computing into a two-dimensional web environment.

• Inspiration Study: Detailed analysis of Vision Pro's design language, focusing on the use of light sources, soft shadows, and border reflections to simulate depth and material texture.

• Component Modularity: Designed control widgets as isolated, modular React components. This allows users to customize their dashboard layout while preserving the unified visual identity (e.g., the Media Player widget and Climate widget share the same glass styling).

• The Depth Stack: Implemented CSS variables to manage the "Z-stack" depth, ensuring that primary interaction elements (e.g., modal dialogues) always visually float above the static control panels.

• Energy Visualization: Integrated a bespoke D3.js component to visualize energy consumption trends, using smooth, animated curves that matched the overall fluid aesthetic.

4. The Final Product: A Command Center for the Modern Home

The Vision Pro Smart Home Dashboard is not just a utility; it’s a premium experience that reinforces the value of a smart home investment.

• High User Adoption: The dashboard became the primary interface for smart home control due to its superior aesthetic and intuitive interaction model.

• Reduced Cognitive Load: The clear visual hierarchy and use of color-coded status indicators minimize the time required to manage routines or respond to alerts.

• Future-Proof Design: The architecture is structurally prepared for future integration with actual AR/VR environments, having already established a spatial, layered design language.

AIAir Monitor: AI Air Quality Monitoring Platform - @ Google AiStudio - Live Demo

Project Overview

AIAir Monitor is an advanced, AI-driven platform developed to provide governmental and industrial regulators with real-time, comprehensive monitoring and deep analysis of city-wide industrial emissions and ambient air quality (AQI). By centralizing vast datasets and leveraging the power of the Gemini API, the platform moves beyond simple reporting to generate detailed, actionable corrective action plans, transforming environmental policy from reactive to predictive.

Technology Stack: React (TypeScript), Tailwind CSS, D3.js (Visualization), Mapbox GL (Geospatial Mapping), Gemini API (Corrective Action Planning & Trend Analysis). 

My Role: Product Designer, AI Integration Lead, Data Visualization Architect.

1. The Problem: Data Fragmentation and Non-Actionable Insights

Environmental and industrial compliance teams face significant challenges in managing the sheer scale and complexity of air quality data:

• Data Fragmentation: Sensor readings (NOx, SO2, PM2.5, Ozone) often come from disparate sources (city sensors, industrial stacks) and require manual correlation to understand their source and impact.

• Slow Intervention: Identifying the root cause of an AQI spike often takes hours or days, allowing pollution events to peak before interventions can be implemented.

• Analysis Paralysis: Raw data is difficult for policymakers and city planners to translate into effective, enforceable policy changes. Simple alerts lack the context needed for immediate, high-impact decisions.

The core challenge was to design a platform that could instantaneously synthesize complex environmental data and provide expert-level, actionable recommendations.

2. The Solution: Predictive Modeling and AI Policy Generation

AIAir Monitor utilizes deep learning and the Gemini API to turn streams of raw pollutant data into a dynamic, city-wide environmental intelligence map.

• Real-Time Geospatial Visualization: A dynamic Mapbox interface displays real-time AQI heat maps and overlays industrial emission data, pinpointing specific facilities or traffic corridors responsible for pollutant spikes.

• Predictive Trend Analysis: AI algorithms identify emerging pollution trends (e.g., smog formation risk based on weather forecasts and industrial output patterns) up to 72 hours in advance.

• AI-Generated Corrective Action Plans (Gemini API): When a regulatory threshold is breached or predicted, the Gemini API is fed the historical data, current readings, weather conditions, and regulatory mandates. It instantly generates a prioritized, step-by-step recommendation report, such as:

  • Example Recommendation: "Temporarily reduce throughput at Plant A by 20% in the next 6 hours and reroute heavy goods vehicle traffic from Sector 4 to 9 between 06:00 and 10:00."

• Unified Data Storytelling: Complex multivariate data is simplified into clear, color-coded widgets and dynamic charts, ensuring rapid comprehension by non-technical stakeholders.

3. The Design Process: Transparency and Critical Hierarchy

The design process focused on ensuring the highest level of trust and operational clarity, especially given the platform's role in public safety and industrial compliance.

• UX Research – Decision Flow Mapping: We mapped the emergency response process to ensure critical alerts (e.g., PM2.5 exceeding dangerous levels) are presented immediately with one-click access to the AI-generated corrective plan.

• Data Visualization (D3.js): Custom visualizations were developed to clearly show the correlation between cause (industrial output, traffic) and effect (AQI spike), building user confidence in the AI’s root-cause analysis.

• Multi-Role Dashboarding: Designed separate, tailored views for different users: a High-Level Policy View (focusing on long-term trends and compliance) and an Operational View (focusing on real-time sensor data and immediate alerts).

• Mobile Responsiveness: Built on Tailwind CSS, the platform ensures regulators can receive and act upon critical alerts and plans instantly, even when away from the main command center.

4. The Final Product: Data-Driven Environmental Governance

AIAir Monitor successfully provides a critical tool for environmental management, transforming data into measurable improvements in air quality.

• 75% Faster Response Time: The AI-driven corrective plans allow regulatory action to be taken in minutes, not hours, significantly limiting the duration and severity of pollution events.

• Data-Driven Policy Enforcement: Provides irrefutable, contextualized data to support industrial compliance actions, improving regulatory effectiveness.

• Improved Public Health Outcomes: By enabling predictive intervention, the platform helps city officials proactively reduce citizen exposure to harmful pollutants.

TSLAI+ AI Car: Smart Dashboard (TESLA Inspired) - @ Google AiStudio - Live Demo

Project Overview

The TSLAI+ AI Car Smart Dashboard is a high-fidelity, highly responsive vehicle interface application designed to consolidate all critical driving information into one seamless, futuristic dark-themed environment. Inspired by TESLA design guidelines, the application provides comprehensive control over vehicle status, navigation, media, and climate, demonstrating a paradigm shift in in-car HMI (Human-Machine Interface) design.

Technology Stack: React (TypeScript), Tailwind CSS, Framer Motion (Animation), Advanced CSS (Glassmorphism/Neumorphism) 

My Role: Lead Front-End Developer, HMI Designer, Interactive Prototyping Specialist

1. The Problem: Information Overload and Visual Clutter

Current vehicle dashboards often suffer from poor information hierarchy, where safety-critical data (speed, battery) competes visually with secondary data (media, climate controls). Specific issues included:

• Distraction Risk: Traditional interfaces require excessive cognitive load and eye movement to locate different data points.

• Lack of Cohesion: Integrating multiple systems (navigation, media, controls) typically results in a fragmented, non-uniform user experience.

• Dated Aesthetics: Many modern vehicles lack an interface design that matches the vehicle's technological sophistication, leading to user dissatisfaction.

The mandate was to design and prototype a dashboard that is intuitively legible, aesthetically superior, and inherently safe by minimizing visual friction.

2. The Solution: A Sleek, Spatially Cohesive HMI

TSLAI+ solved the clutter and distraction problem by applying spatial computing design principles to create an interface where data flows naturally and critical information is always prioritized.

• Vision Pro-Inspired Design: Implemented design elements like glassmorphism (frosted glass effects) and deep shadow layering to give the UI a sense of depth and hierarchy, ensuring that active elements appear to float over background information.

• Dynamic Information Zones: The screen is cleanly divided into zones: a primary Driving Zone (speed, range, critical alerts), a secondary Contextual Zone (navigation map or media player), and a constant Control Dock (climate, lights).

• High-Performance Responsiveness: Built using React and Tailwind CSS, the interface maintains a 60 FPS refresh rate and adapts fluidly, ensuring high responsiveness even during real-time data streaming (e.g., speed and battery updates).

• Proactive Feedback with Animations: Used Framer Motion to implement subtle, deliberate animations and transitions, providing instant and tactile feedback to user inputs (e.g., control taps) without being distracting.

3. The Design Process: Safety, Legibility, and Aesthetic Prototyping

The design process was driven by an uncompromising focus on driver safety and visual clarity, often using rapid prototyping to test legibility.

• UX Research – Legibility Testing: Conducted tests on color palettes and font sizes to ensure critical metrics (speed, battery percentage) could be read with a minimum glance time under various lighting conditions (simulating day/night modes).

• Dark-Theme Priority: Built the entire interface around a dark theme to reduce eye strain, minimize light pollution in the cabin at night, and maximize contrast for critical data indicators.

• Prototyping Interaction: Focused heavily on the touch target size and placement for controls (like climate and wiper settings). By using large, clearly separated buttons, the design reduces the risk of mis-taps while the vehicle is in motion.

• Component Abstraction: Developed highly reusable, state-aware React components (e.g., BatteryGauge, Speedometer) to ensure consistency and modularity across the entire dashboard layout.

4. The Final Product: Redefining the In-Car Experience

The TSLAI+ Dashboard stands as a proof-of-concept for the next generation of automotive interfaces, setting a new standard for integration, performance, and aesthetic appeal.

• 70% Reduction in Visual Clutter compared to traditional interfaces, promoting a safer driving environment.

• High User Engagement: The modern, cinematic UI receives overwhelmingly positive feedback in testing, aligning the vehicle’s interface with high-end consumer technology standards.

• Demonstrated Technical Prowess: Successfully proves the capability to build a complex, real-time HMI with the performance and visual quality demanded by premium automotive clients.