AR try-on for cosmetics brand

§ 01Brief

The brief was simple: let customers try on lipstick and eyeshadow before purchasing. The constraint was harder — it had to work in a web browser on Android and iOS, and natively inside their iOS app. One product team, two platforms, zero budget for duplicated effort.

We chose a shared AR engine that compiled to WebAssembly for the browser and Swift bindings for the iOS native app. The SKU colour library was maintained once in a JSON feed consumed by both targets.

§ 02Approach

1. 01
   R&D

   Face-tracking evaluation

   We benchmarked 4 AR SDKs across latency, anchor stability in variable lighting, and WebAssembly bundle size. The winner was 40% smaller and 2× more stable under low-light conditions.

2. 02
   SKU system

   Colour pipeline

   Each product shade was expressed as a set of render parameters — hue, saturation, opacity, blending mode. A single asset file drove both the iOS and WebAR renders without duplication.

3. 03
   Platform

   iOS native + WebAR bridge

   The AR engine ran as a native module in iOS via Swift Package Manager and as a WASM module in the browser. A thin JavaScript / Swift facade made the product-selection API identical on both.

4. 04
   QA

   Device matrix testing

   18 devices, 3 lighting conditions, 18 SKUs = 972 test cases. We scripted the visual regression tests and ran them in CI on every build.

§ 03Outcomes

§ 04Gallery