Case Study — Marketing Design
Early 2010s
While at Rain, I helped Skullcandy launch one of the earliest AR try-on experiences on the web, letting shoppers virtually wear the just-announced Roc Nation Aviator headphones from their webcam. My focus was the 3D side — a low-poly model of the headphones in three finishes, plus a hidden 3D sculpt revealed at the end — alongside UI critiques and mockup help elsewhere on the team.
3
HEADPHONE FINISHES IN 3D
3
WIDER FITS FOR SKULL SCULPT
2011
SKULLCANDY IPO, ONE YEAR LATER
The Problem
Skullcandy was about to launch the Roc Nation Aviator — a premium, fashion-forward headphone in three distinct finishes — but like any pair of headphones sold online, shoppers had no way to see how they'd actually look on their own head before buying. A product photo on a white background can't answer that question.
The Solution
Skullcandy's “Virtual Room” let a shopper center their face in a webcam window and watch the Aviators appear on their own head in real time — cycling through all three finishes, recording the result, and sharing it out. Augmented reality on the open web was brand-new technology at the time; this was one of the earliest examples of a retailer using it to sell a real product.
The How
I wasn't the lead on this project's UI — I weighed in with critiques and helped with mockups alongside the team — but the 3D work was mine end to end: a low-poly model of the Aviators built to render smoothly in a real-time browser experience, and a second, hidden 3D piece revealed only after you'd finished trying the headphones on.
I built the low-poly 3D model of the Roc Nation Aviator headphones used in the AR view, in all three retail finishes — black, white, and amber — light enough to render live in a browser with no plugin beyond a webcam feed.
A shopper centered their face in the frame; once the experience detected it, the Aviators snapped onto their head and tracked along with them. From there, the arrows beside the product panel cycled through the three colorways I'd modeled, and “Record” captured the moment as a shareable clip.
A second button, “Blow Your Mind,” triggered an explosion effect over the shopper's face — a motion graphic a teammate built — that cleared to reveal a 3D sculpt of the Skullcandy skull sitting where their head had been. I modeled that sculpt myself, working entirely from Skullcandy's flat 2D logo mark.
The whole point of “Record” was what happened after: a shopper could post their try-on straight to social media. This capture went out to Twitter, Facebook, and — this dates the project — MySpace.
Outcome
The Virtual Room gave Skullcandy a genuinely shareable moment for the Roc Nation Aviator launch, at a time when trying on a product virtually — let alone posting the result to social media — wasn't something shoppers expected. It was also an early, hands-on lesson in shipping real-time 3D content for the browser, years before AR try-on became a retail standard.
View More Work
LinkedIn
