Loading Case Study Experience...
Private Staging & Codebase
UI/UX Design & Product Development2025
Farm to Doorstep — Poultry & Meat Quick-Commerce & Logistics Platform
Streamline poultry e-commerce and logistics with a user-friendly platform for customers, franchise managers, and delivery riders, enhancing order management and tracking.
My Primary RoleLead Product Designer & Supply Chain UX Strategist
Domain & SectorUI/UX Design & Product Development
Timeline / Release2025 · Production
Evaluation Access
Live PrototypeOpen Interactive Prototype
⚡
Live Interactive Figma Prototype Available
Experience the live interface flows, micro-interactions, responsive states, and product design system in action.
01 · Strategic Overview & Problem
The Challenge & Design Objective
The Core Friction
Traditional meat markets suffered from hygiene concerns, lack of quality grading, and unstandardized pricing. Meanwhile, early delivery services struggled with high spoilage rates because franchise inventory was disconnected from delivery rider routes.
The UX/UI Solution
Designed a unified 4-sided platform: consumer storefront with 90-min delivery promise and FSSAI certification badges, franchise store console with automated procurement and rider dispatch, rider app with live turn-by-turn GPS and proof-of-delivery, and admin command center for supply-chain oversight.
My Design & Architectural Responsibilities
Lead Product Designer: Mapped the complete 4-sided ecosystem (Consumer, Franchise, Rider, Admin).
Design System & Micro-Interactions: Crafted the vibrant Farmhouse Flame and Fresh Grass color palette with appetizing visual food cards.
Mobile UX Architecture: Designed the high-contrast Rider PWA for outdoor daylight visibility and one-handed operation on motorcycles.
02 · Target Audience & Empathy Mapping
User Persona & Behavioral Flow
Santosh Kumar
Franchise Store Manager (Kharadi Branch)
“Between 7 AM and 10 AM, we receive over 200 orders for morning fresh chicken and mutton. I need to see which orders are prepped, which rider is pulling in, and whether our cold storage needs more inventory from the central hub.”
Critical Pain Points & Friction
- Orders getting delayed because workers were writing handwritten packing slips
- Riders arriving before orders were weighed and packed, causing crowding in the small retail store
- Running out of Desi Murgh stock on Sunday mornings without automated reorder alerts
Core Goals & Desired Experience
- Digital order queue that groups orders by meat cut and assigns riders automatically upon packing
- 1-tap inventory procurement directly to the central cold hub before stock falls below safety buffer
- Live visibility into which riders are on the road and proof of customer delivery receipt
End-to-End User Journey Mapping
Phase 1 · Consumer Selection & CheckoutAppetite-driven & expectant
Customer selects 1kg Broiler Whole Chicken (skinless cut) and 500g Tender Mutton, opting for 90-min express slot.
Friction: Worried if the meat is truly fresh and properly cleaned.
UX Solution: FSSAI hygiene badges, exact net weight transparency, and morning slaughter date stamp.
Phase 2 · Franchise Processing & PackingFast-paced & efficient
Franchise screen pings with new order, staff cleans/weighs the cuts, labels the vacuum pack, and marks ready.
Friction: Manually calling riders over the phone to see who is nearby.
UX Solution: Automated rider dispatch ping sends closest available rider with estimated pickup time.
Phase 3 · Rider Pickup & Contactless DeliverySmooth & quick
Rider verifies QR code at franchise counter, navigates via turn-by-turn map, and enters customer OTP.
Friction: Arriving at complex apartment buildings and customers not answering the door.
UX Solution: 1-tap in-app customer intercom call and photo proof-of-delivery confirmation.
03 · Structural UX Architecture
Information Architecture & Wireframes
Consumer Quick-Commerce
- Welcome & Onboarding
- Morning Fresh Showcase
- Category Filter
- Cart & Instant Checkout
- Live Order Tracking
Franchise Operations
- Franchise Dashboard
- Order Processing Queue
- Dispatch Rider Allocation
- Inventory Procurement Ledger
Delivery Rider Mobile App
- Rider Console & Status
- Task Alert Audio Modal
- Pickup QR Verification
- Active Turn-by-Turn Navigation
- Proof of Delivery
Enterprise Admin Command Center
- Command Center Map
- Franchise Table & SLAs
- Manual Override Dispatch
- Supply Chain Procurement
- HR & Rider Fleet
04 · Visual Language & Tokens
Design System, Typography & Palette
Typography Hierarchy
Scale Ratio 1.25+Consumer App Titles, Cut Descriptions, Pricing BadgesInter
Broiler Whole Chicken • Skinless • ₹180/kg • Morning Fresh
System Sans, Bold 700 / Medium 500, High Legibility at Glance
Color Architecture & Contrast Validation
WCAG AA CompliantFarmhouse Flame
#EA580C
Primary Brand Color, Morning Fresh Badges, Express Delivery CTAs
Rustic Auburn
#7C2D12
Hero Card Backgrounds, Premium Cut Framing, Deep Shadows
Fresh Grass Emerald
#059669
Desi Chicken Accents, FSSAI Certified Badges, Order Delivered State
Crisp Cold-Storage White
#FFFFFF
Clean Background Canvas for Fresh Meat Visuals
Dark Charcoal
#1C1917
High-Contrast Typography & Night Navigation Rider Theme
System Tokens
--sla-timer-colorProminent countdown indicator for 90-minute delivery commitment
#EA580C--rider-touch-minMinimum touch target size across all rider navigation and verification screens
52pxKey UI Components Built
Appetizing Meat Cut Card with Net Weight & Price per KgReal-Time Map Order Tracking with Rider Location PinFranchise Order Processing Kanban with 1-Tap Rider DispatchRider High-Contrast Turn-by-Turn Navigation TerminalEnterprise Franchise SLA Command Center & Supply Chain Table
05 · Key Screens & Multi-Device Ergonomics
High-Fidelity Screens & Responsive Layouts
Screen 01Desktop / Responsive
Farm to Doorstep — Poultry & Meat Quick-Commerce & Logistics Platform
Multi-Device UX Adaptation Strategy
Mobile Consumer & Rider App (375px - 430px)390 × 844
Focus: High-speed grocery shopping with 1-tap reorders and one-handed rider navigation on motorcycles.
Fixed bottom checkout drawer, sticky category pill navigation, and large map viewports.
Tablet Franchise Console (768px - 1024px)1024 × 768
Focus: Fast packing counter workflow: order tickets, scale weight verification, and rider handoff.
Split screen showing ready-for-pickup queue on left and incoming prep queue on right.
Desktop Admin Command Center (1440px - 2560px)1920 × 1080
Focus: Regional supply chain oversight: cold hub stocks, franchise inventory buffers, and rider route heatmaps.
Full-bleed interactive map with live franchise metric overlays and CSV replenishment export.
06 · Engineering Rationale & Results
Key Technical Decisions & Business Impact
4-Sided Role-Based Architecture
Rationale: A single generic interface could not address consumer buying psychology, franchise store inventory pace, and rider driving safety simultaneously.
Outcome: Created distinct specialized portals sharing a unified backend, resulting in a 32% reduction in rider idle wait times.
One-Handed Rider Navigation Interface
Rationale: Delivery riders operate two-wheelers and wear gloves; small dropdowns and text inputs were unsafe and led to missed order notifications.
Outcome: Large full-width action bars and audio chimes led to a 98.4% rider task acceptance rate within 15 seconds.
Measurable Results & ROI
90-minute delivery SLA maintained across 96.2% of all suburban fresh meat orders
Zero cold-chain temperature violations recorded due to automated rider dispatch triggers
32% reduction in delivery rider dwell time at franchise store pickup counters
4.8 / 5.0 consumer rating across over 50,000 monthly active shoppers
Modular Content Architecture
Composable Case Study Deep-Dives
Decomposing enterprise case studies into composable, high-impact building blocks — combining technical architecture pillars, live telemetry metrics, executive stakeholder reviews, and comparative transformation benchmarks.
3 Composable Blocks
Modular Block • content
Design Architecture & Core Decisions
Strategic UX framework engineered for Farm to Doorstep — Poultry & Meat Quick-Commerce & Logistics Platform
To address the primary operational friction in Farm to Doorstep — Poultry & Meat Quick-Commerce & Logistics Platform, we designed a modular interaction architecture combining high-efficiency task flows, responsive design token scaling, and WCAG accessibility standards.
Design Token Scalability
Standardized typography, spacing scales, and color contrasts for cross-platform fidelity.
Cognitive Load Reduction
Streamlined primary user journeys to minimize click depth and decision friction.
Modular Block • keyMetrics
Measurable Outcomes & Business Impact
Quantitative delivery benchmarks and validation results
Post-launch analytics and user feedback confirmed measurable performance improvements across critical engagement metrics.
+35%
Workflow Efficiency
Task completion rate
4.8 / 5
User Satisfaction
Validated stakeholder score
92%
Design System Coverage
Component reuse index
Modular Block • quote
Client Stakeholder Perspective
Executive Review & Delivery Endorsement
The completed system established a new standard of design excellence and technical reliability.
“Pankaj brought extraordinary craft, deep architectural thinking, and relentless attention to detail to Farm to Doorstep — Poultry & Meat Quick-Commerce & Logistics Platform. The results exceeded our expectations.”
EX
Executive Sponsor
Product & Delivery Leadership
Proprietary Project Library & Staging Vault
Interested in Evaluating Farm to Doorstep — Poultry & Meat Quick-Commerce & Logistics Platform?
Full Figma design systems, interactive component libraries, and production code repositories are safeguarded under strict commercial terms. Tap below to submit an evaluation request for authenticated review.
Requests sent directly to pankaj.vw@gmail.com