Designing a B2B Fuel Ordering & Fleet Management Platform
Industry: Energy / Logistics / Fleet Operations
Product Type: B2B Mobile App + Web Dashboard
Our Role: UX Research · Product Strategy · UX/UI Design · Design System
Background
KaranX set out to modernize how businesses procure fuel for their fleets. Traditional fuel sourcing involves manual coordination, inconsistent pricing, lack of transparency, and operational delays.
Inspired by on-demand delivery platforms, KaranX aimed to build a B2B-first Fuel Delivery solution focused on reliability, scalability, compliance, and operational control for enterprises managing multiple vehicles across locations.
Designing KaranX involved solving for complex B2B workflows, not just a consumer-style ordering experience..
Key challenges included:
- Managing bulk fuel orders across multiple vehicles and sites
- Providing role-based access (admin, fleet manager, driver)
- Ensuring pricing transparency and invoicing clarity
- Handling real-time tracking and delivery confirmation
- Maintaining simplicity despite operational complexity
Our Approach
Understanding B2B User Personas
We identified three primary user groups:
Users can instantly:
– Fleet Manager – oversees orders, budgets, and performance
– Operations/Admin Team – manages vendors, invoices, and compliance
– Driver / On-ground Staff – receives fuel deliveries and confirms completion
Each persona had different priorities, which strongly influenced the information architecture and UI hierarchy.
UX Strategy & Information Architecture
We focused on:
– Task-first navigation (Order Fuel, Track Delivery, View Invoices)
– Reducing cognitive load by progressive disclosure
– Designing flows that work efficiently under time pressure
Key UX decisions:
– One-click Repeat Order for frequent routes
– Clear order states: Scheduled → Dispatched → In Progress → Delivered
– Smart defaults based on historical usage
Key Features Designed
Fuel Ordering & Scheduling
– Bulk fuel ordering for multiple vehicles
– Scheduled and on-demand delivery
– Location-based ordering with saved sites
Fleet Dashboard
– Real-time order tracking
– Fuel consumption analytics
– Vehicle-wise and site-wise reports
Pricing & Billing
– Transparent pricing breakdown
– Auto-generated invoices
– GST-compliant documentation
– Monthly consolidated billing for enterprises
Role-Based Access Control
– Admin: pricing, contracts, reports
– Manager: ordering, tracking, approvals
– Driver: delivery confirmation, status updates
Visual Direction
– Industrial yet modern aesthetic
– High-contrast UI for outdoor and low-visibility environments
– Minimal color palette to highlight critical states (alerts, delays, completion)
Typography & Components
– Clear hierarchy for data-heavy screens
– Modular components for scalability
– Reusable cards, tables, and status indicators
Accessibility
– Large touch targets for mobile use
– Clear iconography for quick scanning
– Optimized for both mobile and tablet usage
The Outcome
– Simplified fuel procurement for enterprise fleets
– Reduced operational delays and manual coordination
– Improved visibility into fuel usage and spend
Silverscoop’s project management was good; they delivered on time. We communicated via virtual meetings, emails, and messaging apps. We chose them over other options because they had high ratings and their company values aligned with ours.
Karan Shah
Business Development
Conclusion
KaranX demonstrates how thoughtful UX/UI design can transform a traditionally offline, operational-heavy industry into a seamless digital experience.
By balancing enterprise complexity with usability, we helped create a product that is reliable, scalable, and ready for large-scale B2B adoption.
#taketheleap
Prototype. Learn. Iterate.
Let’s collaborate and make a difference with our radically rapid approach to designing solutions the world needs today.