Wingel Portfolio

Reducing Delivery Friction: From Checkout to Customer Notifications

My Role:

UX Designer,
UX Researcher

Type:

Service Design,
Project Management

Platform:

Responsive Web,
Communication
(emails, SMS)

Duration:

2 months of a 6-month project

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 
of manual coordination

Challenge & Constrint

Scaling delivery services with constraints

  1. Operational Limits

    • There isn’t much manpower to handle the delivery order.

  2. Technical Constraints 

    • Budget restrictions ruled out a full rebuild, but WooCommerce customization is limited.

  3. Client Management

    • Business owner “perfect system” expectations vs. MVP.

    • Aggressive timeline: Phase 2 overlapped with Phase 1.

Goals & Milestones

Phase 2: Balance quick wins with long-term growth

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. 

  • Phase 1: Increase conversion (Branding + Navigation)
  • Phase 2: Reduce key friction points (Delivery Feature)
  • Phase 3: Drive retention (Loyalty Program)
 

💰 Business Goal

Expand market coverage to reach more new customers

😃 User Goal

Provide an excellent experience from checkout to product delivery

How might we provide customers with a seamless delivery experience while automating workflows?

Research & Discovery

Uncover delivery adoption barriers through customer data

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 Insights:

  • Low Delivery Adoption:Only 5% of orders used delivery (vs. 31% grocery benchmark).
  •  
  • Geographic Limits: Orders are concentrated in Scarborough, with coverage in other areas being sparse.

  • New customers avoided delivery: 90% of online orders came from existing in-store customers.

Understand operational realities through stakeholder interviews

To identify key pain points and growth barriers, I conducted in-depth interviews with all delivery-facing staff (owner + 2 managers) to map pain points, time workflows throughout the delivery process, and collect existing customer complaints.

💡 Key Insights:

  • Manual Coordination: 30+ minutes wasted/order on customer coordination.
  • Inconsistent Pricing: Fee calculations vary due to distance and order value.
  • Lack of Transparency: Leads to customer confusion and inquiries of order status.

Find gaps and opportunities through competitive analysis

To identify relevant best practices, I focused on analyzing 4 direct competitors with similarly sized raw pet food brands and comparable business models and order volumes, as well as indirect benchmarks of a meal kit service that innovated its perishable food delivery model. 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

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.

Customer Journey Map

Customer Frustrations

  • No delivery information available
  • Lack of transparency in shipping costs
  • No order status updates after purchase

Operational Flowchart

Operational Barriers

  • Manual customer coordination (calls/SMS)
  • Inconsistent fee calculations 
  • Arrange driver delivery routes

Customer Pain Points

  • Unclear delivery pricing 
  • Unpredictable delivery times
  • Limited delivery coverage

Operational Barriers

  • Manual order updates 
  • Inconsistent pricing model

Design & Build

Prioritize high-impact solutions

To balance customer needs with technical limitations and business realities, I evaluated potential solutions from two perspectives:

  1. Impact: Customer value + revenue potential
  2. Feasibility: Development effort + operational readiness
 
I presented the results in a 2×2 prioritization matrix to align stakeholders, ultimately rolling out initiatives in phases: addressing urgent needs first while laying the foundation for scalable growth.

💡 Top-Priority Solutions

  1. Clear shipping instruction

    Show the shipping rate table early on the PDP.

  2. Dynamic rate calculator:

    Accurately calculate fees based on postal code and order amount.

  3. Automated Notifications:

    Automatic status notification via SMS/email.

Map service blueprint for frictionless delivery

With stakeholder priorities confirmed, I mapped a service blueprint to ensure operational and customer needs were addressed. The blueprint codified three core pillars:

  1. Customer trust: Automated fee calculators and prominently displayed shipping policies
  2. Operational efficiency: System-triggered SMS notifications that eliminated manual updates
  3. Technical foundations: Modular WooCommerce shipping rules + API integrations

Evaluate Existing Plugin Solution

To streamline shipping options without extensive custom development, I evaluated 3 WooCommerce plugins against critical criteria: user experiencefeature 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.

CriteriaFlexible ShippingWooCommerce ShippingTable 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 SyncReal-time rates + APIManual rate entryReal-time rates
Customization FeasibilityEasy CSS/HTML overridesLimited (core plugin)Requires heavy tweaking
CostFree (basic)Free (basic)$79 one-time

Align UI with brand through code customizations

Despite the rigidity of the plugin framework, I enhanced the checkout experience through targeted front-end overlays using HTML and CSS. I optimized conversion rates through two key levers:

  • Visual Hierarchy & Branding: Consider variations in font weight, italics, and brand colors
  • UX Writing Optimizations: Rewrote shipping labels and error messages directly in the plugin’s templates, injecting brand voice

Solution: Customer-oriented

Shipping Transparency: Building Trust Before Checkout

Proactive shipping information touchpoints on Product Detail Pages by adding clear shipping policy links next to “Add to Cart”.

Intuitive Checkout Process: Smart Shipping Displays

Dynamic shipping options now update based on zip code and cart value, and only relevant options with clear explanations are displayed.

Reliable Delivery Experience: Status Update Notifications

Automated email + SMS notifications at every order milestone (in progress, shipped, out for delivery), so customers knew their order status without having to ask.

Solutions: Operations/Workflow

Reduce Operational Effort: Automatic Notifications

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

Solution

Touchpoints On Product Detail Pages

Clearly show the shipping policy on the product detail page.

Intuitive Checkout Process

Shipping options will be displayed on the checkout page based on the zip code + order amount entered by the customer.

Conclusion

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 that these improvements were distinctly attributable to delivery changes.

 😄 Customer Impact

  • 3X higher delivery adoption

    • 15%+ of orders now use delivery (up from 5%)

    • Proves demand for the feature post-optimization

🚀 Business Growth Metrics

  • First-time buyers dominate delivery

    • 50% of delivery orders come from new customers

    • Shows expanded geographic reach is acquiring untapped markets

⚙️ Operational Efficiency

  • 70% less staff time wasted

    • Saved 3+ hours/week previously spent on manual coordination

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

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.”