Citi gets you pumped for the 2012 Summer Games in three-dimensional fashion with a muscular custom cube ad that wins gold on the Yahoo! homepage.
Are you ready for the 2012 Olympics? Citi sure is, and they’re here to get you in the sporting spirit with a custom cube homepage ad as part of their “Together Every Step of the Way” campaign to pole-vault you “inside the mind of a Team USA athlete.”
The second panel features an action shot of Christie Rampone, a defender from Team USA’s soccer team. Should the user click on Rampone during the four seconds her panel remains static, the cube grows and fills up the rest of the Olympic pool wallpaper before spinning another 90 degrees on the y to present the user with a six-athlete navigation panel.
Each athlete is rendered as a button that, upon mouseover, expands into a video clip. Upon click, the cube spins along the y another 90 to the video unit that plays the full video of the selected athlete in action. If the user doesn’t click, the cube reverses 90 to the live homepage panel where the 300 x 250 unit on the right and the 972 x 60 sliver along the top resolve and await user interaction.
The cube is made up of a few SWF files (ShockWave Flash), a common Flash format used for ActionScript and other rich media languages. Such a large hunk of vectored graphics could easily crash browsers, not to speak of computers themselves, so the Ad Tech team huddled up and put their heads together and concocted a system optimized and scalable enough to agree with most CPUs without requiring too much RAM.
Ad Tech had to contend with more technical hurdles in devising how the user would go from the initial experience, before the page cubes itself, to the second experience of the rotating cube. While in theory it is fairly easy to let the second experience open upon user click, in execution Ad Tech had to figure out how to overly the second experience seamlessly over the initial.
It wouldn’t be much of an issue if the two experiences were the same size (i.e. equal number of pixels), but that’s rarely the case in these rich media high jumpers, what with the very limited real estate on auto-initiated overlays contrasted with the nearly limitless real estate on second experiences. If the user clicks the first experience, it may seem like the ad grows. It doesn’t. Ad Tech loads a framework over the initial experience and lines up the assets and their respective pixels to ensure the full experience is cross-browser consistent.
For the final lap, Ad Tech had to figure out how to meet Citi’s wallpaper requirements while adhering to Yahoo!’s Display ad policies. The original wish list featured wallpaper as part of the initial experience, which isn’t allowed. So Ad Tech had to figure out a way to integrate minimal wallpaper inside the ad unit, satisfying the client while staying in bounds with our policies. Ad Tech crafted a “smart” system to engage the minimal swimming pool wallpaper inside the unit when the fullwallpaper wasn’t filled in.
It goes without saying that Citi’s Team USA custom cube required a herculean team effort from Ad Tech. Special shoutout to campaign managers Margaret Clark and Lloyd Rivera, engineer Igor Zingerman, and Flash dude Lawrence Deguzman.
Click here to spin the cube and meet Team USA.
--Thomas T. Lady