XR x AI Businesscards @ YORD
Challenge
During my AR/VR Development internship at YORD, I was handed a project with both urgency and creative potential: the agency’s business cards no longer worked. Their QR codes linked to an outdated AR experience that had been discontinued.
The task?
To replace it with a cutting-edge, mobile-first WebXR experience that blends AI-generated videos with interactive elements, engages the team through an internal AI video challenge with voting and experimentation, surfaces the best content for client meetings, and reflects YORD’s reputation as an innovative, tech-forward studio while staying lightweight, branded, and impactful.
Problem Statement:
A potential YORD client with limited time needs a quick but impactful glimpse into the studio’s capabilities because an immersive XR interaction with branded 3D and AI content delivers a clear “wow” in seconds.
During my AR/VR Development internship at YORD, I was handed a project with both urgency and creative potential: the agency’s business cards no longer worked. Their QR codes linked to an outdated AR experience that had been discontinued.
The task?
To replace it with a cutting-edge, mobile-first WebXR experience that blends AI-generated videos with interactive elements, engages the team through an internal AI video challenge with voting and experimentation, surfaces the best content for client meetings, and reflects YORD’s reputation as an innovative, tech-forward studio while staying lightweight, branded, and impactful.
Problem Statement:
A potential YORD client with limited time needs a quick but impactful glimpse into the studio’s capabilities because an immersive XR interaction with branded 3D and AI content delivers a clear “wow” in seconds.
During my AR/VR Development internship at YORD, I was handed a project with both urgency and creative potential: the agency’s business cards no longer worked. Their QR codes linked to an outdated AR experience that had been discontinued.
The task?
To replace it with a cutting-edge, mobile-first WebXR experience that blends AI-generated videos with interactive elements, engages the team through an internal AI video challenge with voting and experimentation, surfaces the best content for client meetings, and reflects YORD’s reputation as an innovative, tech-forward studio while staying lightweight, branded, and impactful.
Problem Statement:
A potential YORD client with limited time needs a quick but impactful glimpse into the studio’s capabilities because an immersive XR interaction with branded 3D and AI content delivers a clear “wow” in seconds.
Process
I approached the project by combining rapid design iteration, asset optimization, and modular WebXR development — ensuring the final experience was both visually engaging and mobile-ready.
Tech & Tools: Figma, Blender, Google Veo 2, 8th Wall (A-Frame), SheetDB
Team & Roles:
Nathalie Claire Huppert – Concept, UX/UI design, 3D asset optimization, WebXR front-end development, API integration.
Markéta Machová – Technical development support, 8th Wall/A-Frame troubleshooting, API integration.
Natália Rajnohová – Branding advisor, ensuring visual and interactive elements stayed aligned with the studio’s identity.
Team Challenge for Content Creation:
To create standout content for the XR experience, I launched an internal AI video challenge with Google Veo 2, where colleagues created and voted on their own generative videos that would play on the business cards. I built a streamlined submission and voting system with a likes–dislikes score and real-time tracking in Google Sheets via SheetDB, making results and winners instantly clear. The initiative not only boosted team engagement and generative AI skills but also made sure that only the top-ranked videos were showcased to clients.
I approached the project by combining rapid design iteration, asset optimization, and modular WebXR development — ensuring the final experience was both visually engaging and mobile-ready.
Tech & Tools: Figma, Blender, Google Veo 2, 8th Wall (A-Frame), SheetDB
Team & Roles:
Nathalie Claire Huppert – Concept, UX/UI design, 3D asset optimization, WebXR front-end development, API integration.
Markéta Machová – Technical development support, 8th Wall/A-Frame troubleshooting, API integration.
Natália Rajnohová – Branding advisor, ensuring visual and interactive elements stayed aligned with the studio’s identity.
Team Challenge for Content Creation:
To create standout content for the XR experience, I launched an internal AI video challenge with Google Veo 2, where colleagues created and voted on their own generative videos that would play on the business cards. I built a streamlined submission and voting system with a likes–dislikes score and real-time tracking in Google Sheets via SheetDB, making results and winners instantly clear. The initiative not only boosted team engagement and generative AI skills but also made sure that only the top-ranked videos were showcased to clients.
I approached the project by combining rapid design iteration, asset optimization, and modular WebXR development — ensuring the final experience was both visually engaging and mobile-ready.
Tech & Tools: Figma, Blender, Google Veo 2, 8th Wall (A-Frame), SheetDB
Team & Roles:
Nathalie Claire Huppert – Concept, UX/UI design, 3D asset optimization, WebXR front-end development, API integration.
Markéta Machová – Technical development support, 8th Wall/A-Frame troubleshooting, API integration.
Natália Rajnohová – Branding advisor, ensuring visual and interactive elements stayed aligned with the studio’s identity.
Team Challenge for Content Creation:
To create standout content for the XR experience, I launched an internal AI video challenge with Google Veo 2, where colleagues created and voted on their own generative videos that would play on the business cards. I built a streamlined submission and voting system with a likes–dislikes score and real-time tracking in Google Sheets via SheetDB, making results and winners instantly clear. The initiative not only boosted team engagement and generative AI skills but also made sure that only the top-ranked videos were showcased to clients.
Design
Design
User Flow
User Flow
User Flow
Lo-Fi Prototype
Lo-Fi Prototype
Lo-Fi Prototype
Hi-Fi Prototype
For clarity in this screenshot, only select connection lines are shown to reduce visual clutter — in the actual prototype, all interactions are fully connected and functional.
Hi-Fi Prototype
For clarity in this screenshot, only select connection lines are shown to reduce visual clutter — in the actual prototype, all interactions are fully connected and functional.
Hi-Fi Prototype
For clarity in this screenshot, only select connection lines are shown to reduce visual clutter — in the actual prototype, all interactions are fully connected and functional.
Asset Optimization
Asset Optimization
Reduced 3D asset poly counts in Blender by over 60% to improve load times and ensure smooth performance on mobile devices without losing visual quality.
Compressed AI-generated videos in Adobe Media Encoder by over 80%, preserving clarity while reducing bandwidth demands for faster, smoother playback.
Reduced 3D asset poly counts in Blender by over 60% to improve load times and ensure smooth performance on mobile devices without losing visual quality.
Compressed AI-generated videos in Adobe Media Encoder by over 80%, preserving clarity while reducing bandwidth demands for faster, smoother playback.
Reduced 3D asset poly counts in Blender by over 60% to improve load times and ensure smooth performance on mobile devices without losing visual quality.
Compressed AI-generated videos in Adobe Media Encoder by over 80%, preserving clarity while reducing bandwidth demands for faster, smoother playback.
Development
Development
Built the experience in 8th Wall (A-Frame) with image tracking and seamless AI video playback to deliver an interactive XR experience directly in the browser with no app download required and integrated the SheetDB API to store votes directly in Google Sheets for real-time ranking and easy result tracking.
Main Components:
SheetUpdater – Saved votes in real time to ensure immediate feedback and an up-to-date leaderboard.
Dispose Materials – Freed unused 3D resources to free up memory and keep the app running smoothly on mobile devices.
Controller – Displayed a “scan the business card” prompt when tracking was lost to guide users back into the experience and improve UX.
Modular Video & UI Logic – Kept the app easy to maintain, update, and expand with new features or content.
Built the experience in 8th Wall (A-Frame) with image tracking and seamless AI video playback to deliver an interactive XR experience directly in the browser with no app download required and integrated the SheetDB API to store votes directly in Google Sheets for real-time ranking and easy result tracking.
Main Components:
SheetUpdater – Saved votes in real time to ensure immediate feedback and an up-to-date leaderboard.
Dispose Materials – Freed unused 3D resources to free up memory and keep the app running smoothly on mobile devices.
Controller – Displayed a “scan the business card” prompt when tracking was lost to guide users back into the experience and improve UX.
Modular Video & UI Logic – Kept the app easy to maintain, update, and expand with new features or content.
Built the experience in 8th Wall (A-Frame) with image tracking and seamless AI video playback to deliver an interactive XR experience directly in the browser with no app download required and integrated the SheetDB API to store votes directly in Google Sheets for real-time ranking and easy result tracking.
Main Components:
SheetUpdater – Saved votes in real time to ensure immediate feedback and an up-to-date leaderboard.
Dispose Materials – Freed unused 3D resources to free up memory and keep the app running smoothly on mobile devices.
Controller – Displayed a “scan the business card” prompt when tracking was lost to guide users back into the experience and improve UX.
Modular Video & UI Logic – Kept the app easy to maintain, update, and expand with new features or content.
Organized project structure with modular classes, components, and styles.
Organized project structure with modular classes, components, and styles.
Organized project structure with modular classes, components, and styles.
sheetUpdater.js:
Handles real-time syncing of likes and dislikes between the app and Google Sheets via the SheetDB API
sheetUpdater.js:
Handles real-time syncing of likes and dislikes between the app and Google Sheets via the SheetDB API
sheetUpdater.js:
Handles real-time syncing of likes and dislikes between the app and Google Sheets via the SheetDB API
Testing
Testing
Tested marker detection under varied lighting and angles to ensure reliable tracking in real-world conditions.
Refined UI for instant feedback, make interactions feel smooth and responsive and improve UX.
Tested marker detection under varied lighting and angles to ensure reliable tracking in real-world conditions.
Refined UI for instant feedback, make interactions feel smooth and responsive and improve UX.
Tested marker detection under varied lighting and angles to ensure reliable tracking in real-world conditions.
Refined UI for instant feedback, make interactions feel smooth and responsive and improve UX.
Solution
The final WebXR experience launched instantly from the business card’s QR code, opening right in the mobile browser with no downloads needed. When scanned, the card came to life through image tracking, projecting only the top-voted AI videos from the team challenge directly onto its surface — turning an ordinary business card into an interactive showcase.
The final WebXR experience launched instantly from the business card’s QR code, opening right in the mobile browser with no downloads needed. When scanned, the card came to life through image tracking, projecting only the top-voted AI videos from the team challenge directly onto its surface — turning an ordinary business card into an interactive showcase.
The final WebXR experience launched instantly from the business card’s QR code, opening right in the mobile browser with no downloads needed. When scanned, the card came to life through image tracking, projecting only the top-voted AI videos from the team challenge directly onto its surface — turning an ordinary business card into an interactive showcase.
Looping autoplay demo of the XR experience (camera permission prompt not shown due to sensitive data).
Looping autoplay demo of the XR experience (camera permission prompt not shown due to sensitive data).
Looping autoplay demo of the XR experience (camera permission prompt not shown due to sensitive data).
Several videos scored high in the vote — here are four standout entries, with the Lightsaber experience earning the highest score overall and ultimately emerging as the winner of the team challenge.
Several videos scored high in the vote — here are four standout entries, with the Lightsaber experience earning the highest score overall and ultimately emerging as the winner of the team challenge.
Several videos scored high in the vote — here are four standout entries, with the Lightsaber experience earning the highest score overall and ultimately emerging as the winner of the team challenge.
Impact
Tangible Results
Reviewed 30+ AI-generated videos, surfacing only the most impactful pieces for client-facing demos.
Reached 85% team participation in the internal AI video challenge.
Delivered a lightweight WebXR experience accessible instantly via the existing business card QR on nearly any modern smartphone — no app download required — restoring a working scan-to-experience flow after the previous AR link was discontinued.
Optimized 3D assets and AI-generated videos, cutting file sizes by over 60% to improve mobile load speed and ensure smooth playback without sacrificing visual quality.
Business & Cultural Impact
Turned the business card into an interactive conversation starter in client meetings.
Boosted team energy and learning with a playful, studio-wide competition, building hands-on generative AI skills.
Demonstrated the studio’s ability to merge XR, AI, 3D and narrative design in a branded, client-ready package — strengthening its positioning as an innovative, tech-forward studio.
Created a reusable system that can easily be adapted for:
➤ Different card designs to keep the experience fresh and customizable.
➤ Easily exchangeable 3D models to quickly update or tailor content for different audiences.
➤ Real-time AI video generation once processing speeds improve — even allowing clients to enter their own prompts for a fully personalized experience.
➤ Personalized QR codes linking directly to the contact details of individual studio team members to streamline client follow-ups and networking.
Tangible Results
Reviewed 30+ AI-generated videos, surfacing only the most impactful pieces for client-facing demos.
Reached 85% team participation in the internal AI video challenge.
Delivered a lightweight WebXR experience accessible instantly via the existing business card QR on nearly any modern smartphone — no app download required — restoring a working scan-to-experience flow after the previous AR link was discontinued.
Optimized 3D assets and AI-generated videos, cutting file sizes by over 60% to improve mobile load speed and ensure smooth playback without sacrificing visual quality.
Business & Cultural Impact
Turned the business card into an interactive conversation starter in client meetings.
Boosted team energy and learning with a playful, studio-wide competition, building hands-on generative AI skills.
Demonstrated the studio’s ability to merge XR, AI, 3D and narrative design in a branded, client-ready package — strengthening its positioning as an innovative, tech-forward studio.
Created a reusable system that can easily be adapted for:
➤ Different card designs to keep the experience fresh and customizable.
➤ Easily exchangeable 3D models to quickly update or tailor content for different audiences.
➤ Real-time AI video generation once processing speeds improve — even allowing clients to enter their own prompts for a fully personalized experience.
➤ Personalized QR codes linking directly to the contact details of individual studio team members to streamline client follow-ups and networking.
Tangible Results
Reviewed 30+ AI-generated videos, surfacing only the most impactful pieces for client-facing demos.
Reached 85% team participation in the internal AI video challenge.
Delivered a lightweight WebXR experience accessible instantly via the existing business card QR on nearly any modern smartphone — no app download required — restoring a working scan-to-experience flow after the previous AR link was discontinued.
Optimized 3D assets and AI-generated videos, cutting file sizes by over 60% to improve mobile load speed and ensure smooth playback without sacrificing visual quality.
Business & Cultural Impact
Turned the business card into an interactive conversation starter in client meetings.
Boosted team energy and learning with a playful, studio-wide competition, building hands-on generative AI skills.
Demonstrated the studio’s ability to merge XR, AI, 3D and narrative design in a branded, client-ready package — strengthening its positioning as an innovative, tech-forward studio.
Created a reusable system that can easily be adapted for:
➤ Different card designs to keep the experience fresh and customizable.
➤ Easily exchangeable 3D models to quickly update or tailor content for different audiences.
➤ Real-time AI video generation once processing speeds improve — even allowing clients to enter their own prompts for a fully personalized experience.
➤ Personalized QR codes linking directly to the contact details of individual studio team members to streamline client follow-ups and networking.