Interactive Product Tour
The Interactive Product Tour is a scalable, 3D module that brings hardware products to life. Users can rotate, zoom, and explore key features through interactive hotspots that reveal detailed information. When a hotspot is clicked, the model dynamically animates—rotating, moving, and zooming into the area of interest.
Designed for flexibility, this module enables Meta to seamlessly integrate any hardware product while supporting unlimited hotspots and diverse media types. It has become the standard for all future product pages at Meta.
ThreeJS, GSAP, Web, Motion
As Meta embraced the metaverse and prioritized immersive technologies, its corporate site needed to reflect this shift. To enhance learning engagement, improve add-to-cart metrics, and bring immersive experiences to the web, we developed a suite of interactive modules. The Interactive Product Tour was the first 3D experience in Meta’s corporate stack, setting the foundation for future modules with scalable code, reusable libraries, and comprehensive documentation.
Things to keep in mind
The Reasoning
Top-down desire for immersive experiences on web surfaces. This is in an effort to closer align goals to company initiatives which revolved around the metaverse and digital immersion.
Bottom-up desire to grow and implement WebGL codebase. I needed a good excuse to greenlight a ThreeJS proof of concept.
THE DYNAMICS
Limited resourcing.
Tight deadline.
Short testing window.
Limited access to product teams.
Inability to import large packages to existing web app,
The Goals
Successfully implement Three JS experience without causing regression across the web app. Don’t break anything.
Replace existing carousel module and improve on it’s learning engagement metrics.
Sell headsets…. Increase Add to Cart metric. Profit.
The Context
PRO: Companies like IKEA and Wayfair boosted sales by 35% and 20%, respectively, after integrating 3D experiences into their e-commerce platforms.
PRO: 3D previews has been linked to a 40% increase in customer satisfaction.
CON: Every second of delay in loading time can reduce conversions by up to 7% and increase bounce rates by 32%.
Let’s conceptualize
Throughout the design process, we worked closely with engineering, product, legal, and marcomms to ensure our solutions aligned with technical, business, and brand requirements. We designed a solution that lets users select the hardware they want to explore, accommodating a wide range of use cases.
Our flexible hotspot framework enables precise placement of interactive hotspots on any piece of hardware, seamlessly integrating additional content that appears upon selection. This allows for an intuitive and immersive user experience, enhancing product exploration and engagement.
Results
The results of this module were significant. We contributed to the goal of creating more interactive and immersive experiences while also substantially improving key metrics. The average time spent on the page increased by over 30%, the learning engagement metric improved by over 40%, and the add-to-cart rate increased by 3%.
Time Spent
+30%
Learning Engagement
+40%
Add to Cart
+3%
Bounce Rate
-8%
Design and Engineering Lead for Web @Meta
Bay Area California
Featured Work
001 /007
Company
Meta Platforms
Involvement
- UI Design
- Front-end Eng
- 3D Modeling
Project Info