Try the lens before you buy it.

The brief

Rainbow Lens is a colored contact lens brand with a broad catalog — 8 product series and more than 60 lens colors across Elite, Toric, Fantasy, Mirage, Lovely, Marine and others. Colored lenses have a specific commercial problem: customers can't imagine how they'll look. Static product photos help, but the conversion barrier is real.

The goal was a production e-commerce site that turned the try-on step into a live product experience, not a leap of faith.

What I built

• Custom WordPress theme on top of WooCommerce — hosted on Turhost, with the whole product catalog wired to Woo products and the account, cart and checkout pages fully styled in the brand's dark-luxury aesthetic.
• Real-time AR virtual try-on using MediaPipe FaceMesh with iris landmark refinement. The camera locates the iris (landmarks 468–477), a canvas soft-light composite lays the lens color on top, and swatches update instantly.
• Series filters so a customer can browse all Fantasy or Marine colors and hop between them without leaving the try-on view. A screenshot button captures the result as a shareable PNG.
• Lens Reveal before/after slider built with real product photography — a draggable handle wipes between a "no lens" and "with lens" version of the same eye, and each side of the slider has an independent color picker.
• Gemini AI concierge — a chat assistant tuned on the full product catalog, powered by Gemini 1.5 Flash. Customers can ask about material composition, base curve, prescription, delivery — and get product-accurate answers in Turkish.
• Full Turkish legal compliance: KVKK aydınlatma metni, mesafeli satış sözleşmesi, iade politikası, çerez politikası, cookie consent banner with localStorage persistence.
• Real product imagery — I extracted 57 lens photos from the official brand catalog PDF, plus processed 130+ product shots from the studio (eye closeup, portrait, isolated), compressing the full asset library from 234 MB to 5.4 MB without visible quality loss.

Analysis and results

The AR try-on shifted the customer flow entirely: instead of scrolling through 60 near-identical thumbnails, a shopper opens the camera once and sweeps through the whole catalog in a minute. The brand's own product-fit questions ("does this suit brown eyes?", "is this too intense?") answer themselves.

Everything runs client-side. The AR uses no server compute; the chatbot is proxied through a single serverless endpoint with the API key hidden from the browser. Time-to-first-frame after granting camera permission is under two seconds on a mid-range phone.