VisionMax: AI-Powered Video Telematics for Safer, Smarter Fleets

Overview

VisionMax is a cloud-based video-telematics platform that links AI dash-cams to a web portal, giving fleet managers real-time visibility into up to seven simultaneous camera feeds, ADAS / DMS safety alerts, live vehicle tracking, and blockchain-backed incident evidence. Through a built-in 4G LTE modem, critical clips sync automatically to the cloud, where the console layers trip replays, driver scoring, and data-driven coaching tools—turning raw footage into actionable insights that cut risk and streamline operations.

Problems

1. The earlier interface ran on a legacy ASP.NET front-end instead of a modern web framework, leading to brittle code and sub-par user experience.

2. Lacking a design system, each UI component was hand-crafted without reference to established libraries, driving up cost and dragging down consistency and efficiency.

3. Evolving business logic and feature scope now require a ground-up redesign to accommodate new workflows and expansion.

Design Process

Framework Modernization

After a one-week research sprint I showed the benefits of a modern SaaS stack and secured team approval to rebuild the product as a Vue 3 single-page app. We paired Ant Design Vue for standard components with Tailwind CSS for layout and color tokens, and adopted Font Awesome for commonly used icons—creating a clean, maintainable foundation.

Unified Design System

With the new stack in place, I rebuilt every UI element as a cohesive Ant Design Vue component set, backed by a full design-token layer for color, spacing, and typography. The token system now powers instant Light ⁄ Dark themes and gives designers and engineers a single, consistent source of truth.

The Solution

Leveraging the modernized technology stack, I completely redesigned the entire user interface following three core design principles:

1. Modern Design Aesthetics - Clean, contemporary visual language that aligns with current design trends
2. Clear Information Presentation - Intuitive data hierarchy and streamlined user flows
3. High Scalability - Flexible architecture that accommodates future feature expansion

The new design system ensures consistent visual language while supporting diverse user workflows and seamless platform growth.

Functional Prototyping

To accelerate the design validation process, I introduced Vibe Coding methodology into our existing design workflow. Considering the need for rapid delivery, I leveraged Figma Make as the primary Vibe Coding tool, enabling me to quickly transform concepts into functional prototypes while maintaining seamless integration with our design system. This approach validated complex interactions and technical feasibility that traditional static mockups or conventional prototyping tools simply cannot achieve. By building live, interactive demos, I significantly reduced handover friction and dramatically shortened the gap between design ideation and development implementation.

Impact & Learning

• Measurable Business Results: Through this comprehensive UI evolution, clients experienced a significant elevation in product quality perception, directly contributing to VisionMax's rapid market expansion into North America and European markets. The modernized interface strengthened our competitive positioning in global fleet management solutions.

• What's Next: With the emergence of Generative AI, we're exploring innovative integration possibilities including MCP (Model Context Protocol), GenUI frameworks, and intelligent chatbot systems. The advent of Generative UI presents both exciting opportunities and novel design challenges—how do we maintain design consistency while enabling AI-driven interface adaptation?