Ray-Ban & Meta

Overview

• Develop augmented reality software for users to try on Ray Ban glasses
• In order to make the product more accessible, allow users to utilize the software through the webpage
• Develop a website that incorporated an interactive 3D model of the glasses that explains the hardware

Project Scope

• Augmented Reality Development
• 3JS Website Development
• 3D Modeling

The Challenge

3D visualization and visual try-ons can help familiarize and educate users on a physical product. Meta and Ray-Ban reached out to us because they wanted a way to engage customers more interactively and informatively. The challenge was to create a seamless WebAR experience that would work efficiently across various devices and browsers, providing a high-quality visualization and try-on experience for the users.

Ray-Ban's existing LMS (Learn Management System) needed to be supplemented with a web browser experience that allowed internal staff and potential customers to visualize and interact with the product digitally. The solution required innovative approaches to combine 3D modeling, AR, and web technologies.

Our Approach

Understanding the complexity and scope of the project, we began with a comprehensive analysis of the requirements and challenges. We focused on creating a user-friendly interface and an immersive AR experience. Using Three.js, we developed a highly interactive 3D model of Ray-Ban Stories smart sunglasses, allowing users to rotate the product and explore its features through various hotspots.

The webAR face-tracking application was another critical component, enabling users to virtually try on all available models of the glasses in different colors. This functionality was developed to be intuitive and responsive, ensuring a smooth user experience across different web browsers.

The Process

Creative Brief

The project began with a detailed creative brief, where we collaborated with Meta and Ray-Ban to understand their vision and goals. This step involved gathering all necessary information about the product, target audience, and desired user experience. We discussed the brand's identity, key messages, and the specific features of the Ray-Ban Stories smart sunglasses that needed to be highlighted.

Capabilities Discussions

Following the creative brief, we held capabilities discussions to align our team's technical expertise with the project requirements. This stage involved brainstorming sessions with our AR developers, 3D modelers, web developers, and UX/UI designers. We explored various technologies and tools, such as Three.js for 3D rendering and WebAR for augmented reality, to determine the best approach for achieving the desired outcome.

Pen and Paper Sketching

Before diving into digital design, our team engaged in pen and paper sketching to visualize the user interface and interactive elements. This step allowed us to quickly iterate on different design ideas and layout options. Sketching helped us conceptualize the flow of the user experience, ensuring that the navigation was intuitive and the interactive features were easily accessible.

3D Modeling of the Glasses

With a clear vision in place, our 3D modelers began creating a highly detailed digital twin of the Ray-Ban Stories smart sunglasses. Using advanced 3D modeling software, they meticulously crafted each component of the glasses, ensuring accuracy and realism. The model included various hotspots that users could interact with to learn more about the product's features.

Wireframe

Parallel to the 3D modeling, our UX/UI designers developed wireframes for the website. These wireframes outlined the structure and layout of the web pages, focusing on the placement of interactive elements, navigation menus, and content sections. The wireframes served as a blueprint for the development phase, ensuring that all design components were aligned with the project's goals.

Combining Design and Development

Once the wireframes and 3D models were finalized, our design and development teams collaborated to integrate the visual elements with the website's functionality. This phase involved converting the wireframes into responsive web designs and incorporating the 3D models using Three.js. The teams worked closely to ensure a seamless transition from design to development, maintaining consistency and quality throughout the process.

Incorporating the 3D Glasses Object into the Website Utilizing Three.js

Utilizing Three.js, our developers integrated the 3D glasses object into the website, allowing users to interact with the model in real-time. This integration involved coding the interactive hotspots and ensuring that the 3D model could be smoothly rotated and zoomed. The use of Three.js enabled us to create a visually stunning and highly interactive experience that captivated users.

Developing the AR Experience into the Website

The final step was to develop the webAR face-tracking application, allowing users to virtually try on the glasses. Our AR developers leveraged the latest WebAR technologies to create an intuitive and responsive face-tracking system. This system accurately mapped the glasses onto the user's face in real-time, providing a realistic try-on experience. Ensuring compatibility across various devices and browsers was crucial, and extensive testing was conducted to achieve optimal performance.

Our Solution

We created a dual experience:

• A 3D visualization experience that included a detailed digital twin of the Meta and Ray-Ban Stories smart sunglasses. This interactive website allowed users to rotate the product and learn about its features by clicking on different hotspots.
• A webAR face-tracking application that enabled users to virtually try on all available models of the glasses in various colors.

The solution was designed to be easily accessible via web browsers, making it convenient for users to explore the product without the need for additional software or apps. We ensured that the 3D models were highly detailed and the AR functionality was accurate, providing a realistic and engaging experience.

Implementing the solution involved several steps:

• Designing and developing high-quality 3D models of the glasses.
• Integrating Three.js for creating interactive 3D visualizations.
• Developing the webAR application with precise face-tracking capabilities.
• Testing across various devices and browsers to ensure compatibility and performance.

Project Results

The project exceeded expectations, with significant user engagement and positive feedback. The interactive 3D model and webAR try-on experience successfully educated users about the product features and enhanced their overall experience. The seamless integration of AR in a web browser showcased the potential of combining these technologies to create innovative solutions.

Testimonial

"The [team] exceeded expectations. They were able to be flexible and turned tough challenges into exciting problem-solve opportunities. They were on top of timelines and were extremely quick to make edits. I appreciate how the team is genuinely intrigued by immersive technologies. Every roadblock felt like a fun problem-solve opportunity, rather than a chore. Additionally, their turnaround time is incredible. It felt as if I would make a note and within the next few hours a new build was pushed." 

Elena Piech
Experiential Producer

‍