Augmented Reality Web App

3D & AR personality test

The client, an innovative Learning & Development training agency, aimed to create an engaging and interactive experience that would go beyond traditional personality tests. Their vision? A fun, immersive personality test where users discover their dragon type—Red, Blue, Yellow, or Green—and visually transform into their dragon form using cutting-edge 3D and Augmented Reality (AR) technology. The challenge was to craft an intuitive, browser-based web app that could seamlessly combine psychological profiling with 3D animation and AR, providing users with an unforgettable personalized experience.

Project Scope

Our task was to design, develop, and deploy a web application that offers:

• Interactive Personality Test:
  A series of questions that categorize users into one of four dragon types based on psychological traits.

• 3D Dragon Models:
  High-quality, animated dragons representing each type—Red (fierce), Blue (calm), Yellow (energetic), and Green (wise).

• Augmented Reality Transformation:
  A final reveal where users can see themselves as their dragon using their webcam, integrating their test result with real-time AR visuals.

Challenges

Building a project like this posed several technical and creative challenges:

- Seamless Integration of 3D and AR

Ensuring smooth transitions between the test results and the AR experience without losing visual fidelity.

- Cross-Platform Compatibility

Ensuring that the 3D and AR features work seamlessly across different browsers and devices, particularly mobile.

- User Experience

Balancing complexity with ease of use—ensuring the app’s rich visual effects and interactivity didn’t compromise its accessibility or speed.

Development Process

Our development process began with thorough research into personality types and dragons as archetypal symbols. We then moved into the design and technical phases, ensuring that both the aesthetics and functionality delivered a captivating user experience.

Personality Test Design

We worked closely with the client to develop a personality test that categorizes users into four types. Each question subtly relates to the dragon archetypes:

• Red Dragon: Bold, courageous, and action-oriented.

• Blue Dragon: Thoughtful, calm, and logical.

• Yellow Dragon: Energetic, playful, and creative.

• Green Dragon: Wise, introspective, and nurturing.

Each type was connected to distinct characteristics, colors, and behaviors that are revealed in the test results and reflected in the dragon designs.

Answer to 24 questions by selecting the card that fits your personality most. That reveals the Dragon in you...

3D Dragon Modeling

We created four distinct, animated 3D dragon models to represent the different personality types:

Red Dragon

• Fierce and powerful, with fire-breathing animations.

Blue Dragon

• Elegant and smooth, with calming, watery movements.

Green Dragon

• Wise and majestic, with slow, thoughtful gestures.

Yellow Dragon

• Playful and bright, with quick and energetic animations.

Each dragon was modeled with fine detail and optimized for web performance to ensure the experience felt premium without causing lag.

Augmented Reality Integration

After completing the test, users could access their webcam, which overlays their face with a real-time AR dragon filter:

• Using WebGL and AR.js, we ensured that users could see themselves as the dragon type they scored on the test.

• Facial tracking technology was employed to map the dragon features (e.g., horns, eyes, scales) onto users' faces, maintaining alignment even with head movements.

• The AR filters were customized to match the color and animation of each dragon, offering a unique transformation for each result.

Cross-Platform Functionality

To ensure the web app worked seamlessly across all devices and platforms, we conducted rigorous testing on:

• Desktop and mobile browsers (Chrome, Firefox, Safari).

Various mobile devices, to ensure the AR feature functioned smoothly regardless of the camera quality or performance capacity of the device.

We also ensured that users who couldn’t access AR (due to device or browser limitations) would still receive a fully rendered 3D model of their dragon and the personality results.

Key Features

- Engaging User Journey

The user moves from the quiz, to learning their dragon type, to becoming their dragon through the AR experience.

- Rich Visuals

Beautifully designed dragons with distinct characteristics and behaviors in 3D models.

- Immersive AR

Real-time facial tracking and AR overlays that allow users to transform into their dragon selves.

- Seamless Performance

Fast loading times, smooth animations, and no lag, even during the AR experience.

End result

The end result was a captivating, fully interactive web app that combined entertainment with psychological insights. Here’s how the app worked:

1. The Test: Users are presented with a series of questions. The answers determine whether they’re a Red, Blue, Yellow, or Green Dragon.
2. Results Reveal: After completing the test, users are shown their dragon type, along with personality traits explaining why they’re best suited to that dragon.
3. Dragon AR Experience: Using the webcam, users can view themselves as the dragon—complete with colored scales, horns, and animated expressions that match the type. The AR dragons react to their movements, creating an immersive experience.