Allocab Driver Portal Design by Younes AnnakiAllocab Driver Portal Design by Younes Annaki

Allocab Driver Portal Design

Younes Annaki

Younes Annaki

Case Study: Allocab Driver Portal

01. Overview & Objective

Allocab needed a complete ground-up design for its driver-side desktop platform, focusing on fleet operators and independent drivers managing high-density operations. Building upon existing user-side brand guidelines and style systems, I architected the end-to-end web dashboard, focusing on heavy data navigation, fleet logistics, driver verification, and invoice tracking.

02. Design System Foundations

Brand Adaption: Translated the core Allocab brand guide (vibrant orange #FF8400, deep forest #112822, and royal blue #1633B3) into an accessible desktop utility interface.
Design-to-Code Alignment: Created complete grayscale wireframe prototypes alongside polished UI layouts to validate information architecture prior to visual production.
Modular Typography & Components: Standardized a strict layout grid paired with clean sans-serif typography (Lato / Roboto) to handle dense table data, micro-states, and modal popovers effortlessly.

03. Key Technical Challenges & Solutions

Challenge 1: Managing Dense Financial & Invoicing Data
The Problem: Fleet managers handle hundreds of individual trips (Courses) and detailed invoices (Facturations) that need to be filtered, reviewed, and audited without losing page context.
Design Solution: Designed a high-density data table layout with quick KPI summary cards (Bénéfice généré, Total des factures) at the top. Implemented an inline sliding detail panel (Facture #203038) allowing users to review invoice breakdown line items, tax rates, download PDFs, or submit disputes without navigating away from the core ledger view.
Challenge 2: Multi-Layered Fleet & Driver Onboarding
The Problem: Drivers and vehicle entries require deep documentation checks (VTC cards, vehicle registration, insurance updates) with varying compliance statuses.
Design Solution:
Vehicle Portal (Véhicules): Built structured vehicle cards showing active status tags, engine types (Diesel, Électrique), assigned drivers, and explicit alert badges for incomplete paperwork.
Driver Profile Drawer (Chauffeurs): Created a sliding drawer interface for adding and managing driver profiles (Fiche chauffeur), complete with integrated date pickers, status toggles (Actif, Suspendu, Inactif), and trip counters.

04. Deliverables & Capabilities

Data-Heavy Dashboards: Full table control systems with multi-column sorting, row selection, and custom category filters.
Side-Sheet Modal Framework: Non-intrusive drawer architecture for fast editing of complex driver and vehicle forms.
Scalable Style Guide: Comprehensive UI library including custom icon sets, input fields, status pill badges, and structured color tokens.
Like this project

Posted Sep 22, 2026

Designed a driver-side desktop platform for Allocab, focusing on data navigation and vehicle management.