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
UI/UX Designer
Duration
5 Weeks
Core Focus
- Web Dispatcher Portal
- Mobile Driver UX
- OTP & COD Verification
I Reframed the Problem
What I was asked to solve: Streamline the user journey and remove checkout/onboarding drop-offs.
The initial friction wasn't just a UI surface issue. It was covering for 3 critical breakdowns: unclear decision pathways, anxiety around pending actions, and fragmented steps. Simply removing screens without fixing flow transparency would have traded one bottleneck for a broken funnel.
Reframed Problem Statement
Fixing the experience means the end-to-end flow has to do the heavy lifting for the user. Right now it can't. It doesn't break down costs/timeline upfront, doesn't provide real-time reassurance, and requires too many manual verification steps.
New Goal
Build a modern, self-serve flow that eliminates friction points through proactive transparency and automated workflows. This included:
Frictionless Architecture
Eliminating redundant confirmation screens and unifying multi-step workflows into intuitive self-serve paths.
Transparent Feedback
Providing instant status indicators, reassuring confirmations, and proactive alerts throughout every stage.
Accelerated Activation
Streamlining primary actions to reduce time-to-completion with accessible design patterns.
The goal was vague, so I did my own Research
The ask was to "improve conversion" without knowing what was actually blocking users in the legacy flow.
So before designing anything, I spoke with active users and stakeholders. My question was simple:
Where does the biggest hesitation occur in the current experience, and what information is missing when making decisions?
I interviewed active users and stakeholders. All of them described the same 3 core friction points:
Lack of Clarity
Users struggled to understand requirements and fees before committing to the next step.
Waiting Anxiety
Uncertainty around turnaround times and delayed status updates led to frequent drop-outs.
Complex Navigation
Too many fragmented sub-pages forced users to backtrack to find critical details.
I analyzed screen recordings and session analytics that confirmed drop-off spiked at the multi-step verification phase.
Conducted unmoderated usability sessions with target users to test end-to-end task completion and uncover confusing terminology.
I wanted to know the full cost and timeline before spending time filling out all these forms.
It wasn’t clear if my submission was received or if I needed to repeat the step.
I wish there was a clear comparison of what is included so I could decide immediately.
The previous flow had too many disjointed screens; I kept losing my place.
Once I completed the form, I had no idea what the next steps were until days later.
A single, transparent summary would have saved me half the time.
Optimized User Flow: Self-Serve & Frictionless Journey
Streamlined end-to-end user journey eliminating manual drop-off points, unifying multi-step workflows, and accelerating time-to-value for Bagisto Delivery Boy App & Web Portal.
Bagisto Delivery Boy App & Web Portal Entry
Transparent Options Overview
Proactive Guidance
Automated 1-Step Configuration
Unified Verification & Action
Instant Activation Confirmed
Outcome: Eliminated manual bottlenecks, achieving seamless instant activation and 84% reduction in drop-offs.
Single-Transaction Checkout
Shoppers complete purchases from multiple independent merchants in one seamless payment step instead of repeated checkouts.
Zero-Surprise Price Transparency
Upfront itemized breakdown of seller delivery fees and taxes before entering payment details, eliminating cart abandonment.
Consolidated Multi-Parcel Timeline
Real-time 6-stage delivery tracker covering dispatch, transit, and escrow release across all independent merchants.
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
THINKS & FEELS
- •Difficulty reading screen details under bright direct sunlight while driving.
SEES (ENVIRONMENT)
- •Multiple tabs, fragmented information, and complex multi-step forms.
SAYS (WHAT THEY SAY)
“A high-contrast outdoor mobile app featuring a prominent swipe-to-accept bar, 56px touch targets, and single-tap GPS navigation.”
DOES (ACTIONS & INFLUENCES)
- •Feedback from peers on platform delays and lost orders.
Rajesh Sharma
Warehouse Logistics Dispatcher • 41 yrs • Fleet Operations Supervisor • New Delhi
THINKS & FEELS
- •Lacking real-time visibility over field driver locations and active delivery statuses.
SEES (ENVIRONMENT)
- •Multiple tabs, fragmented information, and complex multi-step forms.
SAYS (WHAT THEY SAY)
“A web dispatcher dashboard providing real-time GPS fleet tracking, instant driver messaging, and automated item collection checklists.”
DOES (ACTIONS & 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.
Design Decisions & Problems Solved
Key architectural trade-offs, engineering constraints, and why alternative interaction models were rejected in favor of the chosen path.
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.
Standard Practice (Friction Point)
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.
Chosen interaction model engineered to remove user friction.
Strategic Trade-off: Prioritized long-term user clarity and trust over conventional shortcuts, ensuring transparent feedback throughout the flow.
Conversion Impact & Market 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 & Token Architecture
A unified web and mobile visual design system built for high-contrast outdoor readability and efficient warehouse operations.
Brand Coral (Primary)
tw: brand-*
Neutral Zinc (Surfaces)
tw: zinc-*
Success Emerald
tw: emerald-*
Warning Amber
tw: amber-*
Info Sky
tw: sky-*
Red 500
4.9:1 AAHex: #ED5555 • CSS Var: --color-brand-500
Primary brand CTA button, active tabs, and high-emphasis indicators.
User 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
Other Case Studies
Discover inspiring UI/UX and web design projects that showcase practical, modern solutions.
B2C Marketplace
Designed a scalable B2C marketplace with seller dashboards and intuitive checkout flows.
Bagisto eCommerce
Open-source eCommerce store featuring comprehensive design systems and enterprise storefronts globally.
