Gillette Uncut
Digital hub for Gillette's music film series featuring Tim McGraw, Mark Hoppus, All American Rejects, and Will.i.am with backstage shaving tutorials.
Project Snapshot
Proctor & Gamble (via Hooky Interactive)
Consumer Goods & Marketing
December 2009 - January 2010
Front-end developer
Adobe Flash, ActionScript 3, HTML, JavaScript, Performance Optimization
Frontend Development, Flash Animation, Performance Optimization, Marketing Website Development
Two developers, one designer
What It Was
Gillette created a music film series to promote their brand featuring Tim McGraw, Mark Hoppus, All American Rejects, and Will.i.am. We created the website for the project. While most brands focus on the lights and glamour of center stage, shaving is part of an artist's preparation. So we brought Gillette's audience backstage in the UNCUT film series, capturing the pre-show rituals of Will.I.Am, Tim McGraw, Mark Hoppus and the All-American Rejects.
The films premiered on Fuse TV and were promoted throughout SPIN, Pandora, LastFM and YouTube, garnering over 14MM views and spending 4 weeks on Ad Age's Viral Tracker Top-5 chart. Viewers were then driven to a digital hub on Gillette.com for shaving tutorials where they learned to Shave Like a Rock Star.
Demo of the Flash-based music film hub
What I Did
- Programmed the site and the interactions alongside one other developer
Main interface showcasing the music film series
Shave Like a Rock Star tutorial section
What Came Out of It
- Successfully delivered the digital hub that supported the campaign's 14 million views and 4 weeks on Ad Age's Viral Tracker Top-5 chart
What I Learned
This project created a very heavy Flash file. There were a lot of objects on the screen. So the panning screen transition chugged badly. So we developed a trick to swap the site and all of the objects with snapshot. Panning a bitmap image is way faster. That way we got a smooth 60fps transition animation.
Want to Make Your Site Animate at 60 FPS?
Let's talk about performance optimization techniques for smooth animations.