Case study / 01

Fleet Technology / Product Design / Full Stack / Payments

Venus — Fleet Management Platform

Venus is a real-time fleet management platform used to monitor and manage more than 600 vehicles, devices and drivers. I designed the complete UI/UX experience and contributed to its production interface, fleet workflows, payment systems and operational tools.

Role

Complete UI/UX design in Figma, responsive interface development and automated Pesapal licence-payment integration.

Focus

Figma, React, TypeScript, Tailwind CSS

Visit live project
Venus live fleet map showing vehicle clusters across Kenya and fleet status controls
600+vehicles, devices and drivers

Venus is a modern fleet command platform that brings vehicle tracking, telematics, reporting, driver monitoring, fuel intelligence, video safety and AI-assisted fleet queries into one connected interface. I developed the complete UI/UX design in Figma, defining the visual direction, user journeys, dashboard structures, responsive behaviour and broader Venus design system. I also integrated an automated Pesapal payment gateway for customers purchasing Venus licences.

Closed source — architecture walkthrough available.

Complete product UI/UX designed in Figma.

Automated licence payments integrated through Pesapal.

My role

  • Complete UI/UX design
  • Figma interface design and prototyping
  • Product design
  • Design-system development
  • User-flow and fleet-workflow design
  • Responsive web interface development
  • Dashboard and live-map experience design
  • Pesapal payment gateway integration
  • Automated licence-purchasing experience
  • Payment interface and checkout-flow development
  • Fleet analytics interface design
  • AI assistant interface design
  • Cross-platform design direction

Technology

FigmaReactTypeScriptTailwind CSSNestJSPostgreSQLPostGISRedisTraccar CloudMapboxPesapal

The challenge

What needed to become clearer.

Fleet managers and dispatchers need to interpret live locations, vehicle state, drivers, alerts, fuel, video and reports without losing operational context. The product also needed a clear licence-purchasing journey that could connect customer selection and billing to secure Pesapal payment.

The approach

How the product took shape.

I designed the complete product experience in Figma—from research and workflows to the visual language, reusable components and responsive interface—and carried that direction into the production UI. Operational modules were organised around recognisable fleet tasks, while payment and licence purchasing were shaped as a focused, understandable flow.

Figma to production

Complete UI/UX process from requirements to refinement

  1. 01Research and requirements
  2. 02User flows
  3. 03Wireframes
  4. 04Figma interface design
  5. 05Design system
  6. 06Responsive implementation
  7. 07Testing and refinement

UI/UX process

A complete product experience, shaped around operational use.

I translated fleet requirements into user journeys, information hierarchy and task-focused workflows for fleet managers and dispatchers. The process covered navigation, dashboard hierarchy, map behaviour, analytics, administration, AI and the licence-purchasing journey.

  • User journeys and fleet workflows
  • Wireframes and interface prototypes
  • Reusable product patterns
  • Responsive state planning
01

Figma design process

The platform’s visual language and interaction patterns were built in Figma.

In Figma, I designed navigation patterns, map interactions, fleet-information layouts, data cards, status indicators, tables, filters, forms, modal experiences, responsive layouts, reusable components and the payment and licence-purchasing interfaces.

02

Information architecture

Operational depth organised into recognisable product hubs.

The information architecture groups live tracking, control, fuel, video, reporting, trips, drivers and administration into a consistent navigation model. Each hub is connected to the same fleet context while keeping its own primary tasks clear.

03

Design system

Reusable foundations for dense operational interfaces.

The Venus design system keeps screens legible through repeatable spacing, typography, colour, form fields, filters, cards, tables, status states, feedback patterns, modals and responsive behaviours. Payment and licence components share that same product language.

04

Live map and fleet workflows

Map interactions built for decisions in motion.

The live-map experience combines vehicle clusters, fleet-state filters, vehicle search, geofences, points of interest and focused vehicle detail. Fleet workflows keep status and action close together so dispatchers can understand the map without losing the wider fleet context.

05

Analytics, reporting and Venus AI

Operational data translated into usable hierarchy.

Fleet kilometre summaries, usage breakdowns, driver information and reporting tools use clear data hierarchy rather than decorative dashboards. The Venus AI interface extends that system with a focused entry point for AI-assisted fleet queries.

06

Licence purchasing and Pesapal

A commercial workflow integrated into the product itself.

I designed and developed the licence-selection, billing and payment interface, then integrated Pesapal for secure payment. The experience makes plan context, customer details, payment state and confirmation understandable without claiming unsupported transaction or conversion results.

07

Responsive design

The same product language across operational screen sizes.

Navigation, dashboards, forms, map controls, tables and payment states were designed to reflow intentionally. The responsive system prioritises the active task while keeping touch targets, status meaning and key actions clear.

08

Connected workflow

Automated licence-purchasing and Pesapal payment flow

01Select licence
02Review licence details
03Enter billing information
04Pay securely through Pesapal
05Receive payment confirmation
06Process the licence
Architecture overview

From field signal to operational interface

01GPS / Telematics
02Traccar Cloud
03NestJS API
04PostgreSQL / PostGIS / Redis
05Venus AI
06Venus OS web interface
07Pesapal licence payments

Built around the work people need to do.

  1. 01Live vehicle tracking and interactive fleet map
  2. 02Vehicle and driver monitoring
  3. 03Geofences and points of interest
  4. 04Fleet kilometre analytics
  5. 05Fuel management and video monitoring
  6. 06Driver management and reporting tools
  7. 07AI-assisted fleet queries
  8. 08Automated licence purchasing
  9. 09Pesapal payment integration
  10. 10Responsive fleet dashboard

Outcome

Venus provides a connected operational environment for monitoring fleet activity, working with fleet data, using AI-assisted queries and purchasing licences through an integrated payment experience. The value is a product system whose design, operational workflows and commercial journey share one coherent language.

Start something useful

Have a product worth building?

I'm open to selected UI/UX, frontend and full-stack opportunities.

Start a conversation Connect on LinkedIn