Bagisto Delivery Boy App & Web Portal
A comprehensive end-to-end logistics platform engineered for both web dispatchers and mobile delivery partners. Features real-time order dispatching, web warehouse item collection, turn-by-turn mobile GPS navigation, OTP customer handoffs, and COD payment settlements.
Organization
Webkul Software
Role
Lead UI/UX Designer
Duration
5 Weeks
Core Focus
- Web Dispatcher Portal
- Mobile Driver UX
- OTP & COD Verification
Information Architecture
Structured hierarchical sitemap separating pre-entry authentication, core fleet dispatcher destinations, mobile driver navigation workspaces, and global logistics utilities.
DELIVERY BOY LOGISTICS PLATFORM
Design Process
My process is a blend of creative exploration and structured problem-solving, ensuring every pixel serves a purpose.
Research
Conducted field research and ride-alongs with delivery partners to understand outdoor mobile logistics friction.
Competitive Analysis
Evaluated logistics dispatch portals and driver apps to identify usability gaps in order hand-offs.
Problem Definition
Defined key challenges across high-glare outdoor readability, single-hand tap accuracy, and dispatch efficiency.
User Flows
Mapped dual user journeys connecting web warehouse dispatchers with mobile field delivery agents.
Information Architecture
Structured a clear multi-device sitemap balancing web fleet management with mobile driver navigation.
Wireframing
Drafted low-fidelity wireframe layouts for multi-order dispatch grids, OTP verifications, and GPS route cards.
High-Fidelity UI
Crafted a tokenized design system with high-contrast outdoor colors, prominent 48px touch targets, and dark theme support.
Prototype & Handoff
Built interactive high-fidelity prototypes and delivered comprehensive design specifications for seamless engineering.
Empathy Mapping
Deep-dive research synthesis mapping user psychology, cognitive friction, behavioral triggers, and emotional drivers.
Vikram Singh
Full-Time Delivery Executive • 29 yrs • On-Field Courier Rider • Mumbai, India
COGNITIVE FRICTION
- •Difficulty reading screen details under bright direct sunlight while driving.
ENVIRONMENT & CONTEXT
- •Multiple tabs, fragmented information, and complex multi-step forms.
EXPRESSED NEEDS
“A high-contrast outdoor mobile app featuring a prominent swipe-to-accept bar, 56px touch targets, and single-tap GPS navigation.”
EXTERNAL INFLUENCES
- •Feedback from peers on platform delays and lost orders.
Rajesh Sharma
Warehouse Logistics Dispatcher • 41 yrs • Fleet Operations Supervisor • New Delhi
COGNITIVE FRICTION
- •Lacking real-time visibility over field driver locations and active delivery statuses.
ENVIRONMENT & CONTEXT
- •Multiple tabs, fragmented information, and complex multi-step forms.
EXPRESSED NEEDS
“A web dispatcher dashboard providing real-time GPS fleet tracking, instant driver messaging, and automated item collection checklists.”
EXTERNAL INFLUENCES
- •Feedback from peers on platform delays and lost orders.
Core UX Challenges & Solved Scenarios
Deep-dive analysis into real-world marketplace bottlenecks, transaction friction, last-mile logistics edge cases, and custom algorithmic quality frameworks.
Delivery Management, Unreachable Customers & Cancellation Protocol
Engineered operational protocols and UI workflows for real-time order dispatching, driver duty management, customer absence handling, and cancellation reconciliations.
Customer Not Available / Unreachable Doorstep Protocol
Field drivers spending 15+ minutes waiting at doorstep when customers do not answer calls, causing cascade delays across subsequent 10-minute deliveries.
Designed an automated 3-step Unreachable Customer flow in the driver app: 1) Trigger 1-tap IVR call attempt & push alert. 2) Driver marks "Customer Unreachable" which initiates a 3-minute grace countdown. 3) If still unanswered, app prompts driver to capture door photo proof & select safe leave location or re-route parcel to warehouse hub.
Mid-Transit Order Cancellation & Return Routing
When a customer cancels an order while driver is en route, drivers were unaware and wasted fuel/time completing the trip.
Implemented instant WebSocket cancellation pushes to the driver app. Sound & vibration alerts notify the driver immediately, updating the screen to "Order Cancelled by Customer" and auto-rerouting GPS directions to the nearest dark store for inventory check-in.
Single-Tap Duty Toggle & Route Batching
Drivers managing multiple delivery drops suffered high cognitive load and navigation friction.
Created an intuitive Duty Status Toggle (Online/Offline) and an intelligent Route Batching screen that groups orders by proximity, reducing total travel distance by up to 28%.
Secure OTP Hand-off & Cash on Delivery (COD) Settlement
Fraudulent delivery claims and cash collection discrepancies between drivers and central dispatchers.
Engineered a 4-digit buyer OTP verification requirement before marking orders delivered. For COD orders, the app tracks exact cash collected in real-time and reconciles daily deposits against dispatcher accounts.
Market Positioning & Key Metrics
Logistics platforms often overcomplicate interfaces. This platform balances powerful web administration controls with lightweight, single-tap mobile execution.
Key Strategic Differentiator
“Unified web & mobile ecosystem featuring high-contrast outdoor UI and instant OTP verification.”
98%
Acceptance Rate
+24%
Delivery Speed
99.4%
Tap Accuracy
4.9 / 5
Driver Rating
Design System Foundations
A unified web and mobile visual design system built for high-contrast outdoor readability and efficient warehouse operations.
Outfit / Inter
Regular (400) • Medium (500) • Semibold (600) • Bold (700)
TOKENIZED COLOR SYSTEM
Curated contrast palette calibrated for dark mode UI readability.
Amber Signal
#F59E0B
Dark Canvas
#09090B
Card Slate
#18181B
Bright White
#FFFFFF
TYPOGRAPHIC HIERARCHY
Proportional font sizes calibrated to Golden Ratio ($\Phi \approx 1.618$).
BUTTON SYSTEM & ACTIONS
Interactive component states engineered for merchant and shopper flows.
Iconography
Domain iconography matrix designed for high-density navigation, action triggers, and metadata badges.
Home Feed
Orders
Driver Profile
GPS Tracking
Payouts
Call Customer
In-App Chat
Notifications
Shift Schedule
Delivery Time
Parcel Box
Processing
Delivered
Filter Orders
Sort Distance
Language
Logout
Driver Rating
User Account
Upload Proof
View Details
Cancel
Delete
Send Route
Email Support
Back
ForwardUser Interface Design
Centralized web control dashboard enabling logistics managers to monitor active orders, assign drivers, verify item collection, and settle COD payments.
Logistics Fleet & Dispatcher Dashboard
Real-time dispatch control center displaying active delivery volume, driver availability maps, and pending order allocations.
Active Delivery Orders Management
Comprehensive order tracking table with status filters, courier assignment dropdowns, and address validation.
Warehouse Item Collection Checklist
Itemized warehouse pick list ensuring zero missed items prior to driver dispatch.
Customer Address & Location Detail View
Granular delivery address inspector with map previews, delivery instructions, and customer contact triggers.
Customer Hand-off & OTP Verification
Secure delivery hand-off interface with real-time OTP confirmation and proof-of-delivery logging.
Cash on Delivery (COD) Payment Collector
Financial reconciliation table tracking daily cash collected by drivers and automated bank deposit settlements.
Dispatcher & Driver Live Messaging Hub
Instant two-way communication channel between warehouse dispatchers and mobile drivers on the road.
Logistics Portal Sign-In
Secure authentication gateway for logistics administrators and warehouse staff.
Mobile Application Interface Screens
High-fidelity mobile app interfaces engineered for responsive touch controls, micro-interactions, and accessible visual hierarchy.
Mobile Sign-In
Driver Duty Dashboard
Active Delivery Orders
Warehouse Item Collector
Customer Address Info
Mark Location Reached
OTP Handoff Verification
Order Delivered Status
Dispatcher & Customer Chat
Push Notifications Hub
Unreachable Customer Report
Driver Profile & Earnings