Cover for the App

Coca-Cola-Filtro

Desarrollé una experiencia interactiva en realidad aumentada para Coca-Cola utilizando 8thWall.

Desarrollé una experiencia interactiva en realidad aumentada para Coca-Cola utilizando 8thWall.

Coca-Cola Flavor Selector AR Experience

Desarrollé una experiencia interactiva en realidad aumentada para Coca-Cola utilizando 8thWall. El usuario responde a un breve cuestionario inmersivo mediante inclinación de cabeza para elegir entre opciones como comida, acompañantes y preferencias de bebida. Al final, se genera una pantalla personalizada con los resultados, donde el usuario puede tomarse una foto con marca de agua, guardarla y compartirla. La lógica se gestiona dinámicamente para mostrar diferentes combinaciones de respuestas y adaptar el contenido visual.

La experiencia de Coca-Cola desarrollada en 8thWall consiste en un cuestionario interactivo en AR que guía al usuario a través de tres preguntas clave relacionadas con su momento ideal para disfrutar una Coca-Cola: comida preferida (pizza o tacos), con quién compartirla (familia o amigos), y cómo la prefiere (fría o por sabor).

La mecánica principal se basa en el movimiento de la cabeza, detectado por el módulo xrface, permitiendo seleccionar opciones al inclinarse hacia la izquierda o la derecha. Tras completar el recorrido, la aplicación muestra una pantalla de resultados personalizada con imágenes y textos dinámicos según la combinación elegida. También se presenta una marca de agua personalizada que cambia automáticamente de acuerdo con las elecciones del usuario.

El usuario puede entonces tomarse una foto con la experiencia, guardarla y compartirla. Todo está preparado para una navegación simple, visual y divertida.

En cuanto a la lógica técnica, el sistema:

  • Usa una estructura de objetos para definir preguntas, imágenes y respuestas.
  • Registra las selecciones en orden (firstChoice, secondChoice, thirdChoice) y obtiene el índice de combinación con una tabla lógica que da como resultado una imagen de marca de agua específica.
  • Utiliza eventos personalizados y postMessage para comunicarse con otros sistemas, como análisis (DataLayer).

  • Permite reiniciar la experiencia con un solo clic para fomentar la rejugabilidad.

English version------------------------------------------------------ Coca-Cola Flavor Selector AR Experience is an interactive WebAR questionnaire developed with 8thWall. The experience invites users to make choices by tilting their heads, selecting between food options (like pizza or tacos), social preferences (family or friends), and taste preferences (cold or flavorful). Once the user completes the three questions, they receive personalized feedback with images and texts based on their choices. They can also take a photo with a custom Coca-Cola watermark and share or save it. This project leverages face tracking to offer a hands-free, engaging way to interact with branded content, merging interactivity, personalization, and social sharing in a playful and immersive way.

⚙️ Technical Summary (Logic Overview)

The Coca-Cola AR experience is structured around a three-step decision-making system using head tilting as input (via face rotation tracking). Here's how it works:

Dynamic Options

Each step presents two visual options (left and right) tied to a category:

  • Food: Pizza vs. Tacos
  • Company: Family vs. Friends

  • Preference: Flavor vs. Cold

Head Tilt Selection

The experience tracks the user’s head rotation on the X-axis:

  • Left tilt (< -0.1) selects the left option.
  • Right tilt (> 0.1) selects the right option.

Selection Recording & Logic

Selections are stored and matched with one of 8 predefined combinations to:

  • Display custom feedback visuals.
  • Load associated texts and images.
  • Set a personalized watermark for photo capture.

Final Interaction

Users can:

  • View their unique combination result.
  • Take a photo with their result and a Coca-Cola watermark.
  • Save or share their result.
  • Restart the experience at any time.

Event Tracking

All selections are pushed to the dataLayer and communicated via postMessage to allow analytics integration and engagement tracking. **

Featured screenshot
Featured screenshot
Featured screenshot
Featured screenshot