Marvel

Web AR

Marvel

Web AR

Marvel

Web AR

Services

Web AR Dev, FE Dev

Client

The Coca-Cola Company × Marvel

Year

2024

Links

https://www.coca-cola.com/us/en/offerings

(01)

(01)

(01)

The Story

Coca-Cola partnered with Marvel to create an innovative augmented reality experience that transformed ordinary product packaging into portals for superhero adventures. Users could scan Coke cans and bottles to unlock their favorite Marvel characters, collect heroes, and witness epic matchups right in their hands.

As one of the developers on this project, I was responsible for ensuring the AR flow worked flawlessly across devices, fixing critical bugs that affected user experience, and maintaining pixel-perfect UI consistency with the original designs. From resolving Android-specific navigation issues to optimizing product recognition algorithms, my work helped millions of fans seamlessly interact with their favorite heroes through cutting-edge web AR technology.

This project was developed for The Coca-Cola Company in collaboration with Marvel, where I served as a 3D Web Developer throughout 2024. The technical stack centered around WebAR and 8th Wall, built with TypeScript and React.

(02)

(02)

(02)

The Concept

The technical execution focused on three core pillars: reliability, accessibility, and polish. I addressed critical user flow blockers that prevented progression through the AR experience, such as non-functional retry buttons, overlapping UI elements on Android, and navigation dead-ends when camera permissions were denied. The product scanning system was refined to reduce false-positive "Turbulence Detected" errors that frustrated users trying to unlock characters. Device and browser compatibility checks were implemented to gracefully handle unsupported configurations, while orientation restrictions guided users toward optimal scanning conditions. Every interaction was scrutinized to ensure pixel-perfect alignment with design specifications, creating a premium AR experience that felt as polished as the Marvel brand itself. The result was a robust web AR application that scaled to millions of users while maintaining the magic of bringing superheroes to life through everyday Coca-Cola products.

(03)

(03)

(03)

The Brief

Create a stable, cross-platform augmented reality experience that allows users to scan Coca-Cola products and unlock interactive Marvel character content. The experience needed to work seamlessly across iOS and Android devices, support multiple browsers (Safari and Chrome), handle various product sizes (12oz cans, 20oz bottles), and maintain design fidelity while accommodating different screen sizes and orientations. Critical requirements included reliable camera permission handling, accurate product recognition, smooth navigation through character collection flows, and localized content for international markets.

LET'S BUILD SOMETHING AMAZING TOGETHER

OR TALK ABOUT FUTURE COLLABORATIONS,

DON'T FADE AWAY, STAY IN TOUCH!

LET'S BUILD SOMETHING AMAZING TOGETHER

OR TALK ABOUT FUTURE COLLABORATIONS,

DON'T FADE AWAY, STAY IN TOUCH!

WANT RENDER A
FUTURE PROJECT TOGETHER

OR SKETCH OUT SOME
FUTURE COLLABORATIONS,

DON'T FADE AWAY, STAY IN TOUCH!