-
-
A premium, minimalist storefront designed to initiate the spatial commerce journey.
-
Intuitive dual-mode navigation showcasing a diverse ecosystem of brand collaborations.
-
Dynamic pricing and tailored digital/physical rewards based on each brand's market positioning.
-
Solving user pain points with custom External EyeSight options and a glassmorphism control panel.
-
Real-time 3D text engraving with dynamic surface alignment and custom typography.
Inspiration
My journey started with a consumer research study conducted on marketing strategies for the Apple Vision Pro. After surveying and interviewing potential users, I discovered fascinating consumer needs and purchase motivations: people who are motivated by self-expression and novelty responded overwhelmingly well to co-branding and personalization strategies. However, the current Vision Pro lacks deep hardware personalization and has a real-world privacy issue with its external "EyeSight" display when used in public. I aimed to bridge this gap by developing a high-fidelity e-commerce prototype designed to simulate and drive authentic purchasing behaviors.
What it does
AVP Studio: Collab & Custom is an interactive 3D web configurator that redefines how users shop for spatial computing devices. I built a dual-track experience. The first track focuses on social identity, allowing users to explore conceptual luxury collaborations with brands like Rolex or Porsche. Selecting these dynamically unlocks exclusive virtual rewards and updates the price. The second track focuses on privacy and individual expression. I introduced a hardware concept to solve the EyeSight privacy pain point, letting users upgrade to a "Privacy Mirror Glass" or a "Dynamic Cyber-Aura." I also built an advanced 3D engraving tool where users can type custom text and dynamically bend it to wrap around the headset's curved glass. Everything is tied together by a real-time JavaScript pricing engine that updates the cost instantly.
How I built it
I focused on creating a sleek interface using HTML5, CSS3, and Tailwind CSS to match Apple's premium design language. For the core experience, I integrated Google's <model-viewer> component to render a highly detailed 3D model of the headset using WebGL directly in the browser. The logic, including the dynamic pricing calculator and the complex math for the drag-and-drop 3D text overlay, was written entirely in vanilla JavaScript.
Challenges I ran into
One of the biggest hurdles was balancing high-fidelity visuals with accessible performance. Rendering a massive, Apple-quality 3D model in a web browser can easily cause severe loading bottlenecks or crash mobile devices. To ensure this prototype felt like a seamless, consumer-ready e-commerce site, I had to heavily optimize the code to guarantee a smooth and lightweight interactive experience.
Another massive challenge was the UI/UX design of the custom engraving feature. When an operator puts standard 2D web text over a 3D object, it naturally creates a "billboard effect"—the text stubbornly floats and stares directly at the user's screen, rather than curving along the physical product. This completely broke the illusion of a premium, engraved glass surface.
The traditional technical fix is to permanently "bake" the text into the 3D texture file. However, from a product perspective, doing this in real-time on a website would demand massive computing power, instantly crashing mobile browsers. To solve this, I engineered a lightweight optical illusion. I anchored the text to a specific 3D coordinate on the glass and wrote a custom script that mathematically counter-rotates and bends the flat text exactly as the user spins the headset. This hybrid approach successfully delivered the high-end aesthetic of genuine etching while maintaining flawless, cross-platform performance.
Accomplishments that I'm proud of
I am incredibly proud of bridging the gap between core user needs and product development, turning market research into a market-ready tech prototype. By identifying exactly what consumers crave through the survey data and actually building the digital tool that satisfies that desire, I created a product with deep, research-backed market validation.
What I learned
I learned a tremendous amount about the intersection of UI/UX design and WebGL 3D rendering, and gained practical experience in version control and serverless deployment.
What's next for AVP Studio
Moving forward, I want to integrate WebXR so users can place their customized Vision Pro in their actual physical space using Augmented Reality. I also aim to connect the pricing engine to a real backend database and a payment gateway to complete the entire e-commerce loop.
Log in or sign up for Devpost to join the conversation.