IKEA Digital
GENERATIVE AI
INTERACTIVE EMBED
E-COMMERCE
IKEA Digital
Transforming IKEA's physical showrooms to digital. An interactive experience that allows users to experience lighting in a virtual room, in a lightweight, web friendly way.
Transforming IKEA's physical showrooms to digital. An interactive experience that allows users to experience lighting in a virtual room, in a lightweight, web friendly way.
For full process and other projects, please open on desktop.
The physical STORE is the
best product
page IKEA has.
I fit it in a web embed.
Re-engineering the IKEA digital product experience to eliminate the "Imagination Gap."
ROLE
UX/UI Design · Motion Design · Prototyping
TOOLS STACK
Gemini 2.5 (Nano) · Photoshop · Rive
OUTCOME
Zero third-party plugins, ARKit dependencies, or WebGL requirements. Runs as a native web embed.
The Challenge
70%
Of home goods shoppers abandon carts due to the "Imagination Gap",the inability to visualize how products behave in their specific environments.
Shopify 3D Commerce Report · 2023
The Constraint
50MB+
Traditional AR/VR solutions require heavy payloads and app downloads, creating massive friction, causing adoption rates for "immersive" features to plummet.
The Solution
1.9MB
Replaced the heavy 3D pipeline with a 60fps native Rive state machine. High-fidelity, photorealistic immersion with a payload lighter than a 3-second lifestyle video.
01 - THE CONTEXT
Users don't buy objects.
They buy atmospheres.
Traditional product pages strip away every dimension that makes products worth buying.
- Core Design Insight
That is the entire reason IKEA stores are enormous. The showroom floor is the product detail page that actually works, and it only exists offline.
AR and VR attempted to close this gap but failed at the deployment layer.
The Engineering Challenge
How do you pack the
immersion of a physical
showroom into a
web embed smaller
than a 3s video?
02 - THE ARCHITECTURE
Kill the 3D pipeline.
AI Layers + State Machines.
01
Generative AI - Gemini 2.5
Asset Generation & Additive Light Extraction
Bypassing the 3D Pipeline: Generated foundational room states (Day/Night, specific lamps) using Gemini 2.5 by strictly locking the camera perspective across all prompts.
Light Isolation: Isolated the exact visual contribution of each lamp. By darkening unaffected areas, I extracted only the pure light spill and reflections, creating highly compressible, additive lighting layers.
02
Rive State Machine
State Architecture & Dynamic Compositing
Dual-Tier Logic: The environment runs inside a single Rive file. The base layer uses masked visibility to seamlessly cross-fade between ambient Day and Night environments.
Screen Blending: Lamp overlays sit on top using a Screen blend mode. When toggled, darkened pixels mathematically drop out (rendering transparent), naturally casting light over whichever base state is currently active.
Tech Lead Note: Zero JavaScript event listeners are required. The entire interaction model is self-contained.
03 - THE PRODUCT
Interactions that change
purchase decisions.
Action 01 - Day / Night Toggle
The Apples-to-Apples Evaluation
A seamless Day/Night toggle lets users instantly cross-examine the aesthetic appeal of a sunny room against the functional mood of dusk. The question "but what does it look like at night?" is answered in one tap.
Action 02 - Individual Lamp Control
The Granular Focus
Users don't just look. They orchestrate. Individual controls isolate the contribution of each specific lamp. Toggle one off to see what the room loses. Toggle it back on to see precisely what €79 is buying.
Action 03 - Hotspot Toggle
The Clean Evaluation
One tap strips the interface away entirely. Hiding the interactive hotspot markers lets users evaluate the pure spatial aesthetic without UI noise. The interface disappears and the room becomes the product again, as it should be.
Prototype
04 - THE VALIDATION
Not a concept.
Production ready.
Total Interactive Payload
1.9MB
The entire interactive state machine, all layers, all states, all animations, weighs less than a 3 second lifestyle video that shows similar interactions.
0
Third-party plugins, ARKit dependencies, or WebGL requirements. Runs as a native web embed.
Zero engineering friction to deploy
1 tag
Deployment requires a single embed tag. No developer hand-holding, no bespoke integration, no CI pipeline changes.
Prototype to production path
60 fps
Smooth native performance on iOS Safari, Chrome desktop, and mid-range Android. No dropped frames in testing.
Native Rive renderer · no WebGL
∞
SKU scalability. The same pipeline :
AI generation → Photoshop layers → Rive state machine
Duplicates across the entire catalogue without a 3D artist.
Scales across the full IKEA lighting range