Medilip (Active Luxe)

Kontext

Active Luxe runs a high-volume e-commerce operation where fulfillment speed and packing accuracy directly affect customer experience and operational costs. Before this project, packers relied on manual order lookup and visual matching of items, which becomes error-prone as the product catalog grows and as orders include bundles, variants, and similar-looking SKUs. The client needed a system that works on the warehouse floor, on a phone, with the camera as the primary input.

Problem

Packing errors and slow order handling were driven by a few structural issues:

• The order identification step was manual (finding the correct order from a carrier label / shipment reference).
• Item verification relied on human attention rather than deterministic validation.
• Bundles/composite products introduce hidden complexity: one line item may expand into multiple physical SKUs.
• A warehouse-friendly UI must be fast, minimal, and camera-driven.

The client wanted a workflow where the system confirms the order first, then confirms each scanned item against what the customer actually purchased.

Projektziele

• Make order identification instant: scan a courier label and fetch the exact order.
• Display a clear pick/pack list optimized for phone screens.
• Verify packing: scan EAN barcodes and warn immediately if the scanned item does not belong to the order.
• Support quantities (e.g., 2× of the same EAN) and show progress per item.
• Handle composite/bundled products correctly by expanding them into their physical components.
• Minimize warehouse friction (one-hand usage, minimal steps, strong visual feedback).

Rahmenbedingungen & Herausforderungen

• Mobile compatibility: barcode scanning must work reliably on iOS and Android browsers.
• Multiple identification sources: courier labels can be stored under different order meta keys depending on carrier/tooling.
• ERP data mapping: WooCommerce line-items are order-centric, while fulfillment verification needs reliable EANs from the item master.
• Operational speed: scanning must be throttled and robust to repeated detections and camera focus shifts.
• Low training overhead: the UI must be obvious for new warehouse staff.

Lösungsüberblick

We built a mobile-first web application that runs in a standard mobile browser and uses the camera as the primary input.

• Scan courier label → system finds the matching WooCommerce order via metadata.
• The system builds a pack list by enriching WooCommerce line-items with ERP product data (EAN, item code, name), including composite expansions.
• Scan product EANs → each scan increments the matched item counter.
• If an EAN does not exist in the order, the app warns immediately.
• When all required quantities are scanned, the app enables a single submit action.

The result is a deterministic packing workflow where correctness is enforced by scanning, not by memory.

Architektur & technischer Ansatz

The tool is implemented as a lightweight PHP application with a minimal UI and a JSON-based POST API.

Order lookup by scanned label

• Label scan triggers a WooCommerce order lookup via metadata.
• Supports multiple carrier meta keys such as `wgl_labels`, `ParcelNumber`, and `_gls_tracking_codes`.

Product enrichment and EAN source of truth

• WooCommerce provides SKUs and quantities, but EANs come from the ERP item master.
• MiniMax API is used to resolve item code → EAN → display name.

Composite / bundle expansion

• Composite items are expanded into physical components.
• Quantities are multiplied based on the ordered amount.

Mobile camera scanning

• BarcodeDetector polyfill ensures iOS support.
• zbar-wasm adds broader barcode format coverage.
• Scanning is throttled and duplicate scans are suppressed.
• Per-row UI feedback uses red/yellow/green states for progress.

Operational completion step

• Once all required items are scanned, a single submit action becomes available.
• The backend can update the WooCommerce order to a custom fulfillment status.

Technologie-Stack

• PHP (single-page app with JSON POST endpoints)
• WooCommerce REST API (Automattic WooCommerce Client)
• MiniMax API (OAuth token handling + item/invoice queries)
• JavaScript (camera scanning loop + UI state)
• Barcode stack: BarcodeDetector polyfill + zbar-wasm
• UI: Material Design Lite + lightweight table UI

Implementation Process

1. Mapped the real warehouse workflow and reduced it to a camera-first flow.
2. Implemented reliable order lookup from courier labels across carrier meta variations.
3. Implemented product enrichment from ERP to obtain EANs and normalize item identity.
4. Added composite expansion to match physical packing requirements.
5. Implemented mobile scanning with throttling, duplicate suppression, and clear progress UI.
6. Implemented the completion step that advances order status after successful scan verification.

Results & Impact

• Faster fulfillment: less time spent searching for orders and verifying items manually.
• Significantly fewer packing errors: mismatched items are caught at the moment of scanning.
• Lower operational friction: works on a phone, uses the camera, and requires minimal training.
• More predictable operations: composite products are handled consistently and transparently.

Reflection

The core success factor was treating the warehouse flow as a deterministic validation problem: order identification must be unambiguous, item correctness must be enforced, and composite products must be expanded early so the pack list matches reality. This prevents a large class of mistakes without adding operational overhead.

Summary

This project delivered a production-grade mobile fulfillment scanner for Medilip/Active Luxe. By integrating WooCommerce order data with ERP item master data and enforcing packing via camera-based EAN scanning, the system accelerates dispatch and drastically reduces packing errors.