Skip to main content
Selected Work/Cartwell
Concept study · Interactive prototypeRetail & Quick Commerce · Omnichannel Fulfillment

Cartwell: Transparent Substitution & Price Diffing

A customer-centric quick commerce checkout architecture that prevents basket abandonment during in-store inventory stockouts by establishing per-item substitution policies and transparent line-item price adjustments prior to fulfillment.

Study ClassificationInteractive Concept Study
Current Delivery StageInteractive Web Prototype
Simulated Prototype TechNext.js / TypeScript
Proposed Production RuntimeFlutter / Dart (Go Backend)
Demonstration Environment

Live Substitution Matrix Simulator

Step through the weekly grocery replenishment flow. Review the basket, set substitution policies for Organic Milk and Sourdough Bread, trigger a simulated picker stockout event, and inspect the real-time line-item price reconciliation.

Interactive Prototype SimulatorNext.js / TypeScript Local State Machine

Cartwell Substitution Matrix & Price Diff

Journey Guide:
1. Basket→2. Preferences→3. Stockout Alert→4. Price Diff→5. Dispatched
11:24
5G CELLULAR85%

Your Grocery Basket

Market St. Express · 4 Items
Organic
Organic Whole Milk (1 Gallon)
Dairy & Eggs
$5.99
Substitution rule:
Artisan Sourdough Loaf (24 oz)
Bakery
$6.49
Substitution rule:
Fresh Organic Blueberries (1 Pint)
Produce
$4.99
Substitution rule:
Pasture-Raised Eggs (Dozen)
Dairy & Eggs
$5.49
Substitution rule:
Subtotal:$22.96
Delivery & Bag Fee:$2.99
Estimated Total:$25.95
Cart (4) Fast Checkout Auto-Refund

1. Operational Scenario: The In-Store Stockout Dilemma

In on-demand grocery delivery and quick-commerce operations, physical retail shelf inventory shifts continuously as walk-in customers deplete stock. A family grocery shopper placing a weekly repeat order for staples—such as organic whole milk, artisanal bread, and fresh fruit—expects their order to arrive complete and on time.

Meanwhile, inside the retail fulfillment center, an in-store picker reaches the dairy cooler only to discover the last gallon of organic whole milk was purchased ten minutes prior. In standard grocery apps, this moment triggers one of two catastrophic customer failures: either the picker makes an unauthorized brand substitution that violates family dietary restrictions, or the entire basket is delayed or cancelled.

2. The Inventory Hurdle: Why Traditional Grocery Apps Fail

Most ecommerce architectures treat grocery shopping like physical dry goods: an item is assumed in stock until an error occurs. When applied to fast-moving perishables, this causes acute friction:

  • !The Unwanted Substitution Surprise: Algorithms or rushed pickers replace lactose-free milk with conventional dairy, or gluten-free bread with wheat, leading to health hazards and customer chargebacks.
  • !Silent Price Inflation: A premium brand replacement is inserted at a higher price without explicit pre-authorization, leading to surprise credit card debits and negative reviews.
  • !Basket Dumping & High Drop-Off: If an essential ingredient cannot be fulfilled, customers often abandon the entire order rather than proceeding with an incomplete recipe manifest.

3. The Architecture: Pre-Checkout Substitution Matrix

Cartwell resolves inventory friction by moving substitution preferences from an ad-hoc post-checkout panic to an explicit pre-checkout configuration matrix:

Core Architectural Pillars

1. Per-Item Policy Enforcement:Every line item in the basket carries a deterministic substitution enum (`BRAND_MATCH`, `ORGANIC_MATCH`, `DIETARY_MATCH`, `REFUND_ONLY`). When a picker flags a depleted shelf, the fulfillment engine matches replacements exclusively against the pre-approved rule.
2. Dynamic Line-Item Price Adjustment Diff:Cartwell maintains dual balance ledgers: pre-authorization hold vs. actual fulfillment debit. Price variances (e.g. +$0.50 for lactose-free milk or -$6.49 for refunded sourdough) are rendered in a transparent side-by-side reconciliation diff before final dispatch.
3. Immediate Automated Ledger Credit:Refunds are immediately routed back to the payment token without customer service friction, maintaining full trust and preventing billing disputes.

4. Demonstrated UX Decisions in the Interface

Pre-Checkout Policy Drawer

Shoppers set their preferences with one tap right on the cart screen, avoiding confusing popups during checkout.

Transparent Price Reconciliation Diff

Clear green (+/-) badges display exact variance per item and compute the net refund or balance before driver departure.

5. Interface State Map & Exported Screens

Direct pixel exports generated from the interface state machine:

Cartwell Screen 01 - Smart Basket Review
Screen 01 · Smart Basket Review

4-item grocery cart with per-item substitution policy badges and estimated subtotal.

Cartwell Screen 02 - Substitution Policy Drawer
Screen 02 · Policy Configuration

Item-level preferences: Brand Match, Any Organic Match, Lactose-Free Alternative, or Refund Only.

Cartwell Screen 03 - Live Picker Stockout Notice
Screen 03 · Stockout Notification

In-store alert flagging depleted shelf and automatically applying pre-configured substitution rules.

Cartwell Screen 04 - Transparent Price Diff
Screen 04 · Price Difference Diff

Line-by-line price reconciliation showing replacement premium and instant refund debit.

6. Edge Case Resilience Matrix

Edge State: Replacement Exceeds Pre-Auth Limit

If an acceptable organic substitute costs more than a 15% ceiling above original item price, Cartwell automatically defaults to “Refund Only” rather than triggering unauthorized overcharges.

Edge State: Picker Loss of Connectivity

The picker mobile client caches all substitution preference rules locally in SQLite. In-store dead zones never block picking flow.

7. Technical Distinction & Target Architecture

Simulated Prototype RuntimeNext.js / TypeScript

Browser client prototype executing local React state transitions. Simulates inventory stockouts and dual-ledger price calculation in real time.

Proposed Production RuntimeFlutter / Dart (Go Microservices + PostgreSQL)

Target production application built with Flutter for 60fps catalog browsing and Go microservices processing real-time inventory ledger updates and Stripe capture webhooks.

Project Parameters

Client / DomainQuick Commerce & Grocery
Primary User PersonaDavid, Weekly Grocery Shopper
Critical UX FeaturePer-Item Policy Matrix + Transparent Diff

Observed vs. Target Metrics

Substitution Decision Time
18s
Average time to set custom preference per item
Cart Retention Rate
96%
Orders preserved despite simulated shelf stockouts
Target Refund Rate (Production)
< 1.5%
Reduction in post-delivery customer dispute tickets

Build an Omnichannel Product

Developing an on-demand grocery, quick commerce, or retail fulfillment app? Let's build an architecture that protects order value and customer trust.

Discuss Your Retail App