Reducing Delivery Friction: From Checkout to Customer Notifications
Role:
UX Designer & Strategist
Client Industry:
E-commerce
Duration:
2 months (Part of a 6-Month E-Commerce Platform Upgrade)
Summary
We partnered with a raw dog food retailer to transform their e-commerce experience through service design, aligning customer needs with operational realities. This case study highlights Phase 2 (Delivery Experience & Workflow Optimization), where our cross-functional team approach brought together design, marketing, and sales teams to drive measurable improvements.
3X higher delivery adoption
15%+ of orders now use delivery (up from 5%)
Business Growth
50% of delivery orders come from new customers
70% less staff time wasted
Saved 30+ hours/week previously spent on manual coordination
Background
To balance immediate impact with technical constraints, we split the upgrade process into 3 strategic phases, each delivering measurable benefits while de-risking the project.
Business Goal
Short-term: Increase conversion (Phase 1: Branding + Navigation)
Long-term: Boost repurchases (Phase 3: Loyalty Program)
⭐ Phase 2’s Role: Reducing delivery friction, from checkout to customer notifications
Challenge
Business owner wanted to expand delivery reach to distant customers, but manual processes (e.g., calculating fees, SMS updates) limit the order volume, and the lack of systematic delivery also increases delivery costs. At the same time, customers abandoned carts when shipping options were unclear or missing.
Constraint
Technical & Budget Limits: WooCommerce limited customized development.
Business Realities: Owner expected a “perfect” system immediately, but we needed to de-risk the project with incremental wins.
Tight Timeline: Phase 2 and phase 1 have overlap, the phase 2 is start running when phase 1 visual design is process. phase 1 & 2 launch at a similar time.
Research & Discovery
1. Discovering the Delivery Problem
A. Quantitative Data Analysis: The Delivery Adoption Gap
To identify delivery adoption trends, I analyzed 6 months of order data with the marketing team to better understand the customer behavior. We focused on data such as order type, geographic distribution, order amount, and found out the correlation between them.
Key Metrics:
Delivery vs. Pickup Ratio: Only 5% of orders used delivery (vs. 31% grocery industry benchmark).
Delivery Zone Performance: Orders concentrated in Scarborough; limited coverage beyond.
- Heatmap Insights: Customers clicked on a shipping method but ultimately did not select it.
B. Qualitative Research: Customer Inquiry & Operational Realities
To understand key pain points and growth barriers, I conducted interviews with the business owner and store managers. Due to the small size of the retail team, I was only able to interview two employees who were responsible for delivery. The focus of the interview was:
- Understand pain points in the end-to-end delivery experience
- Map operational workflows to identify inefficiencies
- Uncover barriers to digital growth and new customer acquisition
💡Key Findings
- Customer Behavior & Frustrations
- 90% of online orders came from existing in-store customers (new customers avoided delivery).
Hidden fees: No transparent cost calculation before checkout led to inquiries and distrust.
- Operational Inefficiencies
- 30+ minutes/order wasted on manual coordination (calls/SMS).
- No standardized pricing: Fees inconsistently calculated (distance + order value).
Define: Customer Pain Points & Operational Barriers
After organising research findings, I mapped these insights into two complementary visuals: a customer journey map to expose pain points across the end-to-end experience, and an operational workflow to reveal the backend root causes. Together, they pinpoint where and why breakdowns occur, creating a clear blueprint for opportunity prioritization in the next phase.
Customer Journey Map
Operational Flowchart
Customer Pain Points
- Unclear delivery pricing
- Unpredictable delivery times
- Limited delivery coverage
Operational Barriers
- Manual order updates
- Inconsistent pricing model
2. Competitive Benchmarking: Learning from Others
To identify relevant best practices, I focused my analysis on:
- Direct competitors: Similarly-sized raw pet food brands (Naturaw, Big Country Raw) with comparable business models and order volumes
- Indirect benchmarks: Meal-kit services (HelloFresh) for innovative perishable delivery patterns
I excluded large retailers to ensure actionable insights, as their operational scale differed significantly from our client’s capabilities. My research method involved:
- Mystery shopping: Experiencing the full delivery flow as a customer would
- Interaction mapping: Documenting key touchpoints through screenshots
- Feature analysis: Comparing systems through a structured matrix
3. Synthesized User Needs & Potential Solutions
To ensure we focused resources on the highest-value solutions, I conducted a structured analysis of potential delivery improvements by evaluating each idea against two key dimensions: customer/business impact and implementation feasibility. I visualized the results in a 2×2 prioritization matrix to align stakeholders, ultimately sequencing initiatives into phased rollouts: addressing urgent needs first while laying groundwork for scalable growth.
💡 Prioritized Solutions
Transparent Pricing Engine:
Display the shipping rate table clearly and early on the product page.
Fees are calculated based on zip code + order value.
Automated Notifications:
Reduce manual work with SMS/email alerts
(e.g., “Your order is out for delivery”).
Delivery Zone Optimization:
Start with high-demand areas, then expand.
How might we build customer trust through upfront delivery transparency while automating backend workflows?
Design & Build
Design the Invisible through Service Blueprint
To systematically improve the delivery process, I created a service blueprint to define and align customer needs with operational capabilities. This blueprint established three core pillars of the redesigned workflow: (1) customer-facing improvements including automated fee calculators and prominently displayed shipping policies, (2) operational efficiencies through system-triggered SMS notifications that eliminated manual updates, and (3) technical foundations built on WooCommerce’s shipping rules and Twilio integration.
The blueprint served as both design guide (for UI flows) and implementation roadmap (for backend changes), ensuring the redesigned experience worked seamlessly for users and staff.
Architected Dynamic Fee Calculator
Step 1: Plugin Evaluation
To streamline shipping options without extensive custom development, I evaluated 3 WooCommerce plugins against critical criteria: user experience, feature completeness, and implementation cost. Our goal was to find a solution that met business requirements (like dynamic pricing and free shipping thresholds) while minimizing UI customization effort.
Decision: “Chose Flexible Shipping for its balance of features and UI flexibility.”
| Criteria | Flexible Shipping | WooCommerce Shipping | Table Rate Shipping |
| User Experience (UX) | ⭐⭐⭐⭐☆ (Customizable UI, but complex settings) | ⭐⭐⭐☆☆ (Basic, limited UI control) | ⭐⭐☆☆☆ (Outdated interface) |
| Functionality | ✅ Zones, weight/price rules, free shipping thresholds | ✅ Flat rates, local pickup | ✅ Table-based rules (complex setups) |
| WooCommerce Sync | Real-time rates + API | Manual rate entry | Real-time rates |
| Customization Feasibility | Easy CSS/HTML overrides | Limited (core plugin) | Requires heavy tweaking |
| Cost | Free (basic) | Free (basic) | $79 one-time |
Step 2: Optimizing Checkout UX Through Strategic Customization
Customizing the Flexible Shipping Plugin Within WooCommerce’s Constraints
With the Flexible Shipping plugin’s core functionality in place, I focused on refining the shipping selection on Checkout Page
- Redesigned shipping option labels to build trust
- Added policy links and store locator icons while maintaining mobile responsiveness
- Visual Hierarchy Improvements
- Applied HTML, CSS overrides to Bold pricing information, Italicize ,Color
Automating Customer Notifications to Reduce Operational Work
To eliminate time-consuming manual updates, I designed a notification system where WooCommerce order status changes automatically trigger delivery SMS via Make.com and Twilio. By adding a new order status “Out of delivery”, the staff can update the order status on the admin panel, and the system will send SMS messages to the customer.
(1) Staff can change order status to “Out of delivery” on admin panel
(2) Webhook configuration parsing WooCommerce data for Twilio
(3) Customer received delivery SMS
Results & Strategic Impact
While Phase 1 launched concurrently, Phase 2’s delivery automation showed measurable standalone impact within 8 weeks, proving operational efficiencies could be achieved mid-redesign. Customer and staff feedback confirm these improvements were distinctly attributable to delivery changes.
Delivery Automation Impact:
😄 Customer Impact
3X higher delivery adoption
15%+ of orders now use delivery (up from 5%)
Proves demand for the feature post-optimization
⚙️ Operational Efficiency
70% less staff time wasted
Saved 30+ hours/week previously spent on manual coordination
🚀 Business Growth Metrics
First-time buyers dominate delivery
50% of delivery orders come from new customers
Shows expanded geographic reach is acquiring untapped markets
Cross-Phase Amplification
Phase 1+2 Combined Effect
✓ 0.75% conversion lift across all checkouts
Smoother IA + transparent delivery pricing reduced friction
Unified branding built credibility for new delivery options
Phase 2’s Hidden Foundations for Phase 3
✓ Enabled 50% loyalty signup rate through:
Reliable frozen deliveries → built trust for membership commitment
- Streamlined checkout → Made joining frictionless
Lessons I learned
Heading
Strategic Wins
- 🎯 “Shipping transparency drove 3X more impact than aesthetics alone”
- 🤝 “Involving customer support earlier improved SMS templates”
Technical Tradeoffs
⚙️ “WooCommerce constraints forced simpler solutions that still delivered 80% of ideal functionality”
“Plugin limitations require creative UX compromises—early technical audits are critical.”
“Stakeholder buy-in needs data + competitor benchmarks.”