Snappfood: Order Management Redesign
Executive Summary
This case study documents a comprehensive redesign of Snappfood's desktop order management interface—a mission-critical operational system used by vendors to process, manage, and fulfill orders in real-time. The order management interface is the backbone of Snappfood's marketplace ecosystem, directly impacting order accuracy, fulfillment speed, and vendor decision-making.
Project Scope:
Complete redesign of desktop order management workflows
Implementation of a unified design system (Bonyan) across all operational interfaces
Rigorous usability validation with core vendor personas
Focus on information clarity, task efficiency, and critical decision-making workflows
Key Outcomes:
87% average task success rate across 10 core operational workflows
Consistent 80-100% success rates in critical order processing flows
Complete design system implementation ensuring consistency across all interface elements
Clear pathways identified for refinement in 2 workflows requiring additional iteration
Business Impact: This redesign addresses critical operational requirements: vendors must quickly scan order details, extract key information (customer location, delivery requirements, special instructions), make time-sensitive decisions about order acceptance/rejection, and execute fulfillment actions accurately. Every second of confusion or mis-reading creates cascading delays throughout the marketplace.
The Challenge: Operational Complexity Meets Design Fragmentation
Order management is not a simple feature—it's a complex operational hub where vendors must process multiple simultaneous orders, navigate between different order states, communicate with customers, coordinate with delivery personnel, and make critical business decisions. The legacy interface failed to support this complexity with clarity and confidence.
Business Context: Why This Redesign Was Critical
The order management interface serves as the command center for vendor operations. Every day, thousands of vendors rely on this interface to:
Process orders in real-time: Receive notifications, review complete order details (items, quantities, special instructions, delivery requirements)
Make rapid decisions: Accept/reject orders, flag issues, communicate with customers immediately
Manage complex workflows: Track order status from confirmation through preparation and delivery
Execute coordinated actions: Coordinate with delivery partners, print invoices for kitchen/packing, update customers on delays
Extract critical information: Quickly identify customer location, delivery address, contact information, payment status
When this interface is unclear or inconsistent, the results are immediate and costly: orders are delayed, vendors make mistakes, customers receive wrong items, delivery partners get confused, and marketplace operations grind to a halt.
Legacy Design Problems: Fragmented and Unclear
The existing order management interface suffered from critical usability gaps that directly impacted vendor efficiency and accuracy:
Fragmented Information Architecture
Order details were scattered across unclear sections without consistent hierarchy
Critical information (customer contact details, special instructions, delivery requirements) was difficult to locate quickly
State information was ambiguous—vendors couldn't rapidly determine if an order was confirmed, being prepared, or ready for pickup
Result: Vendors missed critical details and made incorrect decisions based on incomplete information
Inconsistent Visual Language
No unified design system existed across the interface
Different sections used conflicting button styles, color treatments, typography, spacing
Action buttons lacked visual priority hierarchy—vendors couldn't quickly identify what action to take next
Modals, dialogs, and forms had inconsistent patterns
Result: High cognitive load; vendors had to mentally reorient with each interface section
Unclear Contact and Communication Workflows
The ability to request customer contact was buried and unclear
Vendors struggled to understand when and how to initiate contact with customers
Labeling was ambiguous, creating hesitation about action consequences
Result: Communication breakdowns and delayed problem resolution
Ambiguous Order State Tracking
Historical order information lacked clear indicators about what actions had been taken
Vendors couldn't confirm whether their inputs had been saved or registered
State progression (ordered → confirmed → preparing → ready → delivered) was not visually clear
Result: Vendors repeated actions, wasted time, and lost confidence in the system
Inaccessible Secondary Functions
Critical functions like invoice printing were hard to discover
Vendor had to hunt for important operational tools rather than having them readily available
Result: Inefficiency and workarounds
Why This Matters to the Business
Order management is time-sensitive. Vendors operate in a fast-paced environment where seconds matter. Every moment of interface confusion creates a domino effect: a vendor's confusion about order status → delayed acceptance decision → late notification to delivery partner → delayed pickup → customer frustration. The legacy interface's inconsistency and unclear information architecture directly impacted the quality of the marketplace experience for both vendors and customers.
The Solution: Design System-Driven Operational Interface
The redesign took a systematic approach: implement a comprehensive design system (Bonyan) specifically built for operational interfaces, then use that system to rebuild the order management workflows with explicit focus on information clarity, decision support, and operational efficiency.
The Bonyan Design System: Foundation for Consistency
Rather than redesigning individual screens in isolation, we developed the Bonyan Design System—a complete design language covering:
Visual Foundations
Unified color palette with semantic meaning: primary actions, secondary actions, success states, error states, warning states
Consistent typography system with clear hierarchy for different content types
Spacing and layout grid (8px baseline) ensuring visual rhythm across all interface elements
Icon system with consistent stroke weight and visual language
Component Patterns
Standardized button styles with clear visual priority (primary, secondary, tertiary, destructive)
Consistent modal and dialog patterns for all interactions
Form elements with clear states (empty, filled, focused, error, disabled)
Badge and status indicator system for state communication
Consistent tooltip and help text styling
Operational Patterns
Clear patterns for displaying order information hierarchies
Consistent action flow sequences (confirm, select, execute, confirm)
Status progression visualization across multi-step workflows
Alert and notification patterns for time-sensitive information
Redesigned Workflows: Information Clarity and Decision Support
Using the Bonyan system, we rebuilt five core operational workflows to prioritize vendor decision-making:
1. Order Details & Information Scanning
Challenge: Vendors must quickly extract critical information from an order to make acceptance/rejection decisions within seconds.
Solution:
Reorganized order details into clear information sections: items/quantities, delivery requirements, customer information, special instructions
Used visual hierarchy (size, color, spacing) to indicate information priority
Implemented status badges that clearly communicate order state
Created consistent spacing and alignment so vendors can scan information predictably
Highlighted critical information (delivery address, contact details, special instructions) with appropriate emphasis
2. Order Confirmation Flow
Challenge: The order confirmation process must be clear, deliberate, and leave no ambiguity—vendors need to confidently confirm they understand all requirements before committing.
Solution:
Created multi-step confirmation process: review all tabs → understand requirements → confirm order
Used consistent modal patterns with clear call-to-action buttons
Implemented visual progression showing which information areas have been reviewed
Added explicit confirmation badges showing order status has changed
Clear feedback about what was confirmed and when
3. Customer Contact & Communication
Challenge: Vendors must be able to easily initiate contact with customers when issues arise—this is time-sensitive and critical for customer satisfaction.
Solution:
Elevated contact request to prominent, discoverable position
Created intuitive modal flow: select reason for contact → confirm → receive confirmation that request was received
Clear labeling that explains purpose: "Why do you need to contact the customer?"
Explicit success feedback: "Your contact request has been registered. We'll attempt to reach the customer."
4. Order State Progression & Tracking
Challenge: Vendors must understand order progression at a glance and have confidence that their actions are registered in the system.
Solution:
Implemented explicit state badges: Confirmed, Preparing, Ready for Pickup, Delivered
Used consistent visual treatment for each state (color, icon, position)
Created card design that shows state progression clearly
Added timestamps to provide evidence that system is tracking order progression
Clear visual confirmation when state changes
5. Delivery Coordination & Feedback
Challenge: Vendors must easily rate and provide feedback about delivery performance, and this workflow must be straightforward.
Solution:
Automatic presentation of rider performance modal at appropriate time
Clear rating options (positive/negative) with straightforward interfaces
Reason selection when negative feedback is provided
Clear confirmation that feedback was received
Design System Impact on Consistency
Every interaction across the order management interface now follows Bonyan system patterns:
All buttons use the same visual language and respond to user interaction consistently
All modals follow the same layout pattern and interaction model
All status information uses the same badge and color system
All form inputs have consistent appearance and behavior
All transitions and feedback use consistent patterns
Result: Vendors learn the interface once and can apply that knowledge across all workflows. Reduced cognitive load. Faster task completion. Higher confidence.
Usability Testing & Validation: Ensuring Operational Efficacy
Because order management is mission-critical, we conducted rigorous usability testing with actual vendors to validate that the redesigned interface met real operational needs. This wasn't about general usability—this was about ensuring vendors could perform their jobs faster, more accurately, and with higher confidence.
Testing Methodology
Aspect | Details |
|---|---|
Purpose | Validate that redesigned workflows support critical vendor operations and decision-making |
Participant Pool | 5 active vendors representing core operational personas (different restaurant types, order volumes, experience levels) |
Test Duration | 43-45 minutes per vendor |
Test Environment | In-person, moderated sessions |
Platform Tested | Interactive prototype on laptop |
Test Date | September 14, 2024 |
Research Team | Mohamad Nasimi & Setare Ghotbi |
Test Scenarios: Core Operational Workflows
The usability test focused on 10 core workflows representing the most critical vendor tasks:
Order Details Flow: Can vendors quickly scan and review complete order information?
Multi-Tab Confirmation: Can vendors navigate and confirm all order details across different tabs?
Tab Verification: Do vendors understand which tabs represent different order information categories?
Position & Status Badges: Can vendors quickly locate and understand order status indicators?
Coupon/Discount Selection: Can vendors apply available coupons or discounts correctly?
Invoice Printing: Can vendors easily access and print invoices for kitchen/packing teams?
Customer Contact: Can vendors initiate customer contact when issues arise?
Delay Notification: Can vendors quickly identify and act on order delay information?
Order History: Can vendors confirm that their actions have been saved in the system?
Pickup Coordination: Can vendors complete end-to-end order fulfillment through pickup?
Each scenario was designed to reflect real vendor workflows and included natural breakpoints for vendor questions and reflections.
Test Results: Operational Validation
Task / Workflow | P1 | P2 | P3 | P4 | P5 | Success Rate |
|---|---|---|---|---|---|---|
Order Details Flow (Scanning & Understanding) | ✓ | ✓ | ✓ | ✓ | ✓ | 100% |
Confirmation All Tabs (Multi-step verification) | ✓ | ✓ | ✓ | ✗ | ✓ | 80% |
Tab Verification (Understanding information hierarchy) | ✓ | ✓ | ✓ | ✗ | ✓ | 80% |
Position Badges on Cards (Status recognition) | ✓ | ✓ | ✓ | ✗ | ✓ | 80% |
Coupon Selection (Discount application) | ✓ | ✓ | ✓ | ✓ | ✓ | 100% |
Print Invoice Button (Kitchen coordination) | ✓ | ✓ | ✓ | ✗ | ✓ | 80% |
Contact Request Clarity (Customer communication) | ✓ | ✗ | ✗ | ✗ | ✗ | 20% |
Delay Notification (Issue identification) | ✓ | ✓ | ✓ | ✓ | ✓ | 100% |
Order History Entry (Action confirmation) | ✓ | ✗ | ✗ | ✗ | ✗ | 20% |
Pickup Flow (End-to-end fulfillment) | ✓ | ✓ | ✓ | ✓ | ✓ | 100% |
Detailed Findings: What Worked, What Needs Refinement
✓ 100% Success Scenarios: Fully Operational
1. Order Details Flow (100%) All vendors successfully scanned, reviewed, and extracted critical order information without hesitation. The reorganized information hierarchy and clear visual emphasis on critical details enabled rapid comprehension.
Key Success Factor: Clear information prioritization using typography, spacing, and color made scanning natural and efficient.
2. Coupon/Discount Selection (100%) All vendors easily navigated the coupon selection modal and applied discounts correctly. The modal pattern proved intuitive.
Key Success Factor: Consistent modal interaction patterns across the interface.
3. Delay Notification (100%) All vendors immediately identified and understood delay notifications. The alert design was prominent and clear.
Key Success Factor: High-contrast color and clear alert positioning.
4. Pickup Flow (100%) All vendors completed end-to-end pickup workflow seamlessly, including delivery partner coordination and feedback.
Key Success Factor: Clear state progression and obvious next actions at each step.
✓ 80% Success Scenarios: High Confidence with Minor Friction
1. Confirmation All Tabs (80%) Four out of five vendors confirmed all order information tabs. One vendor didn't explicitly verify all tabs but still successfully completed order confirmation.
Insight: Tab structure is clear but could benefit from even more explicit "all reviewed" confirmation mechanism.
2. Tab Verification (80%) Vendors understood that tabs represented different information categories (order items, delivery requirements, special instructions, etc.).
Insight: Tab labeling was successful; one vendor simply didn't feel need to verify all tabs, suggesting confidence in the interface.
3. Position Badges (80%) Vendors located status badges on order cards quickly. One vendor required slight guidance.
Insight: Badge placement and styling are effective; minor improvement in prominence could reach 100%.
4. Print Invoice (80%) Most vendors found and used the print functionality. One vendor required minor assistance.
Insight: Print button is discoverable but remains a secondary feature; current placement is adequate.
✓ 20% Success Scenarios: Identified Refinement Opportunities
1. Contact Request Clarity (20%) Only 1 out of 5 vendors immediately identified the contact request feature.
Finding: Despite new Bonyan design system styling, clear labeling, and prominent placement, the contact request feature remains challenging to discover. Vendors who were directed to the feature understood and completed it successfully (demonstrating the workflow itself is sound), but initial discovery is problematic.
Analysis: This is not a design system failure—the component styling and labeling are clear. The issue appears to be that contact initiation is not an obvious first instinct for vendors. Additional discovery mechanism may be needed: first-time user onboarding, tooltips for new features, or additional visual indicators.
2. Order History Entry (20%) Only 1 out of 5 vendors confidently confirmed that their order history entries had been saved to the system.
Finding: Visual feedback for saved state was insufficient. Vendors could complete the action but remained uncertain whether the system registered it.
Analysis: The workflow itself is clear, but the confirmation feedback is too subtle. Vendors need more persistent, obvious confirmation that actions persisted.
Key Insight: In a fast-paced operational environment, vendors don't have time to wonder if something worked—they need immediate, obvious confirmation.
Key Learnings: What the Redesign Revealed
What Worked Exceptionally Well
1. Information Hierarchy & Scanning (100% Success) The reorganization of order information using the Bonyan design system's typography, spacing, and color hierarchy enabled vendors to rapidly extract critical details. Clear prioritization of information supported the speed required for operational decision-making.
What We Learned: Vendors in operational environments need information prioritized by importance, not just alphabetical or system-logical order. Visual hierarchy isn't aesthetic—it's functional and mission-critical.
2. State Visualization & Status Clarity (80-100% Success) Status badges, color coding, and visual state progression enabled vendors to understand order status at a glance. The progression from Confirmed → Preparing → Ready for Pickup → Delivered was visually obvious.
What We Learned: Consistency in status visualization (same colors, same badge placement, same icon usage) allows vendors to develop mental models quickly and apply them across all orders.
3. Modal & Workflow Patterns (100% Success) Coupon selection, confirmation, and rating workflows all achieved 100% success. The consistent modal pattern reduced vendor confusion about how to interact.
What We Learned: Design systems shine in reducing cognitive load. Once vendors learned the modal pattern, they could navigate new modals intuitively.
4. Alert & Notification Design (100% Success) Delay notifications with clear positioning, color, and typography achieved perfect success. Vendors didn't miss them; vendors understood them immediately.
What We Learned: In mission-critical systems, you can't be subtle. Warnings and important information need high contrast and prominent positioning.
Operational Insights: Where the Interface Falls Short
1. Feature Discoverability (20% - Contact Request) Despite clear design system styling and logical placement, 80% of vendors didn't immediately discover the contact request feature. This suggests that in fast-paced operational environments, features need stronger discovery mechanisms than styling alone.
Why This Matters: When vendors can't find a critical feature, they either: (a) miss it entirely and don't contact customers when they should, or (b) waste time searching, slowing down operations.
2. Action Confirmation Feedback (20% - Order History) Vendors couldn't confidently confirm that their actions persisted in the system. In an operational context, this uncertainty is costly—vendors may repeat actions, wasting time, or worse, might not trust the system for critical tasks.
Why This Matters: Every moment of uncertainty about system state creates wasted time, repeated actions, and eroded vendor confidence.
Design System Validation
The Bonyan Design System proved effective at solving consistency problems:
✓ All buttons follow consistent patterns across all workflows
✓ All modals follow consistent interaction model
✓ All status information uses consistent visual language
✓ All alerts use consistent prominence pattern
✓ Color, typography, spacing, and icons are unified
Impact: 87% average task success rate across diverse workflows demonstrates that consistency itself improves usability. When vendors learn the system once, they can apply that knowledge everywhere.
Overall Performance Assessment
Metric | Result |
|---|---|
Average Task Success Rate | 87% |
Fully Successful Workflows (100%) | 4 of 10 |
High Confidence Workflows (80%) | 4 of 10 |
Requiring Refinement (20%) | 2 of 10 |
Unambiguous Successes | Order details scanning, status understanding, workflow completion, error handling |
Clear Refinement Paths | Feature discovery, action confirmation feedback |
The testing validated that the redesign successfully addresses the core challenges of the legacy interface while identifying specific, solvable refinement opportunities.
