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.
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.
Role
UX/UI design, Motion design, Prototyping
Context
CHALLENGE : E-commerce is still stuck in static imagery. AR/VR or 3D implementation is cumbersome and resource intensive.
OBJECTIVE : Re-define product showcase by transforming the experience of visiting a physical IKEA showroom digitally.
Why this beats traditional e-commerce?
1. INTERACTION
From passive scrolling to active exploration.
2. EVALUATION
Apples-to-apples comparison: same scene in both daylight and evening.
3. CONTEXT
Isolated effect: see what a single lamp adds where it sits.
1. https://www.shopify.com/blog/3d-ecommerce
2. Mertens, A. (2022). User Experience Evaluation of B2C E-Commerce Websites Based on Fuzzy Information. Wireless Communications and Mobile Computing, 2022, 1–10. https://doi.org/10.1155/2022/6767960
3. W. You, C.-y. Yang, Z. Zhou, and L. Sun, "PaRUS: A Virtual Reality Shopping Method Focusing on Context between Products and Real Usage Scenes," arXiv.org, 2023. doi: 10.48550/arXiv.2306.14208
Design Solution
INTERACTIVE | INTUITIVE | LIGHTWEIGHT
GEMINI 2.5 (NANO BANANA)
PHOTOSHOP
RIVE
Layers Versioning
Taking an initial image, I used Gemini 2.5 (Nano Banana) to make versions of the image as layers to be used, iterating on prompts to keep framing and perspective consistent.
Then, I used Photoshop to make the layers ready for compositing.
Rive Time!
I used a single Rive state machine to control scene context and hotspots.
Inputs for Day, Night, Visibility, and Add/Remove map through listeners to button clicks and hitbox enter or exit. Transitions move between Day and Night modes, while each hotspot handles its own place and remove logic.
LAMP TOGGLE
Individual lamp control lets the user see exactly how each lamp interacts with the scene.
HOTSPOT VISIBILITY
Show or hide placement markers lets the user evaluate the scene cleanly.
DAY / NIGHT MODES
Switching between the times of the day shows the aesthetic and functional sides of the products.
Prototype
Lightweight interactive embed
Low-friction deployment
Runs as a lightweight web embed, no app install, no ARKit, no WebGL. Loads fast on mobile and desktop.
Prototype to production
State machines handle logic cleanly, so it can be shipped as an interactive module on a PDP with minimal engineering lift.
Performance and scale
Small asset footprint, easy to duplicate across SKUs without heavy 3D pipelines.