Guiding arrows
Micro-animated guiding arrows show users where to go without cluttering the 3D scene with UI chrome. They appear contextually, pointing toward the next zone or product cluster. The animation draws the eye without demanding attention.
The brief
A no-code builder for 3D retail - with a real client to prove it
Metadrob is a SaaS platform that lets retailers build immersive 3D virtual showrooms without writing a line of code. Drag, drop, customise, deploy. The pitch: give every retailer access to the kind of virtual shopping experience that previously cost hundreds of thousands to build custom.
Perfora - an oral care brand - was a real client. The ask was to design the complete virtual shopping experience: from the moment a customer lands on Perfora's page to the moment they complete a purchase inside a 3D world. This was the showpiece. If it worked, it would demonstrate what the Metadrob platform was capable of.
A first for me
It was also my first time designing for a 3D spatial environment. There were no established patterns to reach for.
The central tension
Every new environment needs familiar footholds
The moment a user enters a 3D virtual store, two things are true simultaneously: everything feels new and interesting, and everything familiar about online shopping has disappeared. The navigation is gone. The product grid is gone. The "add to cart" button - the one interaction every online shopper has completed thousands of times - isn't where they expect it to be.
The principle
The outer layer - exploration, movement, discovery - can be immersive and spatial. The inner layer - product decision, checkout - needs to feel like home.
This distinction shaped every design decision in the Perfora experience.
Before the first screen
The flowchart was the real design work
Before any screen was opened in Figma, I mapped the complete product logic as a flowchart. Not just the happy path - every decision node, error state, and exit point. What happens if a user skips the tutorial? What if they click a product without completing onboarding? What does "leave the world" mean in terms of state?
Working with a Blender and Unreal Engine team meant the spatial layout of the showroom was being built in parallel. The flowchart was the shared contract - it told the 3D artists what zones needed to exist, in what order, and what triggers needed to be possible inside each. I had to sit with them to align on product placement: where a user would naturally walk, what they'd see first, and how to make discovery feel intentional rather than accidental.
The entry experience
Five screens to move someone from website to world
Entering a 3D virtual store is a fundamentally different act from clicking into a product category. The user needs to be mentally transported - from browsing mode into exploration mode. That transition takes more than one screen.
The entry sequence for Perfora moves through:
- A dark, cinematic brand landing
- A welcome screen
- A visual portal gateway
- Avatar selection
- A brief tutorial
- The first glimpse of the 3D world
The avatar selection was in the product brief, but its placement matters: it happens before entry, not after. Giving someone a choice that represents them in the world - even a small one - increases their sense of ownership before they've seen a single product. By the time they enter, they're already invested.
Inside the world
Three problems no standard design pattern solves
Once inside the 3D environment, three things need to happen that have no established UI precedent in conventional e-commerce: the user needs to move through the space, discover which objects are products, and learn more without leaving the environment.
Hotspot dots
Hotspot dots sit on each product in the 3D space. Clicking one surfaces product information in context - name, description, stats. The animation I designed for the stats panel cycles through information on click rather than showing everything at once, keeping the experience spatial rather than list-like.
The world stays visible
When a user decides to buy, the product panel slides in as an overlay. The 3D world stays visible behind it. This was a deliberate choice - most e-commerce would jump to a separate product page here, breaking immersion completely. Keeping the world visible in the background maintains the context the user has been building for the last few minutes.
Most e-commerce breaks immersion exactly at the moment a user is most engaged. The overlay exists to prevent that.
The checkout
Where the design deliberately goes conventional
The checkout is the one part of this experience that looks like every other checkout you've ever used. No 3D elements. No immersive layout. Standard form fields, familiar order review, conventional payment screen.
This was a choice, not an oversight.
Novelty earns trust in exploration. At the moment someone is about to give you their money, familiarity is the better design decision.
Reflection
What this project taught me
This was my first time designing for a 3D spatial environment. I didn't come in with a framework for it, I had to build one as I went, through conversations with Blender and Unreal artists who thought about space very differently from how I thought about screens.
What I understand now that I didn't then: in a novel environment, your job as a designer is not to make everything new. It's to decide precisely where the new thing lives, and to protect the familiar everywhere it matters most. The guiding arrows, hotspots, and overlay panel are new. The checkout is not. That line is the whole design.
The flowchart taught me something else: in a product with this many moving parts 3D artists, developers, a client, multiple user states the most valuable design artefact is often not a screen. It's the shared document that tells everyone what the system is supposed to do before anyone builds anything.
Designs
Take a look at the designs
Next case study