FLEET MANAGEMENT & IOT VISUALIZATION

ENGINEERING A RESPONSIVE FLEET ORCHESTRATION INTERFACE

Bridging the gap between complex fleet data and intuitive user experience through adaptive UI architectures.

Live Project

Experience It Live

See this project in action. Explore the full functionality and design in a live environment.

staging.ujrah.io/en

Visit Live Site

Ujrah.io | Intelligent Green Taxi Operations System preview

Live

•Click to explore

Ujrah.io | Intelligent Green Taxi Operations System hero image

Overview

Ujrah represents a shift in how fleet management systems are visualized. The challenge was to present high-density technical data (IoT sensors, TGA compliance, operational metrics) in an accessible, engaging format. I engineered a 'Dual-Mode Layout Engine' where complex visualizations like the 'Smart Solutions Circle' use trigonometric positioning on desktop but transform into touch-optimized grids on mobile. The Hero section features a custom 'connector' animation engine that physically draws lines from the central infrastructure to feature cards, visualizing the platform's connectivity. Performance was critical; I implemented device-aware animation timings (reducing delays by 60% on mobile) to ensure a snappy feel on lower-end devices while preserving the cinematic entrance effects on desktop.

Key Achievements

Engineered a 'Trigonometric Radial Layout' system: For the Smart Solutions section, I avoided static positioning. Instead, I built a dynamic layout engine that calculates `x = 50 + radius * Math.cos(rad)` and `y`. This allows the ecosystem of 8+ hardware sensors to orbit a central hub perfectly. The system auto-adjusts the `radius` (180px vs 260px) based on viewport analysis.

Implemented 'Device-Aware Motion Choreography': In the Hero Section, standard animations felt too slow on mobile. I architected a conditional animation logic: `delay={isMobile ? index * 0.01 : 2 + index * 0.2}` and `duration: isMobile ? 0.2 : 0.5`. This creates a 'cinematic' 2-second staged reveal for desktop users while delivering an instant, high-performance load for mobile users.

Developed a 'Responsive Interaction Model' for the Fleet Grid: The Fleet Management section uses a sophisticated 'Hover-to-Reveal' pattern on desktop, where hovering a smooth bento-grid card cross-fades the icon for detailed bullet points. On mobile, this logic is intercepted via CSS media queries (`hidden lg:block`), forcing a 'Always-Visible' state to ensure critical information is accessible without touch interactions.

Created an 'Auto-Rotating State Machine': The Solutions interface isn't just static; it features a 5-second interval timer that cycles through 'Hardware', 'Software', and 'Integrations' states. This triggers `AnimatePresence` transitions, creating a living breathing diagram that educates the user on different system layers without interaction.

Visualized Connectivity with 'SVG Path Tracing': To demonstrate the link between the platform and the cars, I built a custom SVG component ([ConnectorsSVG](cci:1://file:///c:/Users/NV_USER/ujrah.io/components/home/hero-section.tsx:55:0-130:2)) that utilizes `pathLength` animations. It programmatically draws lines from the 'road' line to specific feature cards, using a `spring` physics transition for a natural, organic feel.

Architected a 'Quadrant-Aware Labeling System': In the radial layout, labels couldn't just sit next to icons; they had to flow outward. I wrote logic to detect the item's quadrant (`angle > 90 && angle < 270`) and dynamically apply CSS transforms (e.g., `translate(-100%, -50%)`) so text always aligns away from the center, maintaining perfect readability.