How a Google-led Creative Force United to Recreate Classic Ads for the Modern Web.
Project Re: Brief was conceived as an experiment to re-imagine what advertising can be, and push the boundaries around the marriage of
creativity and technology. We're all very proud of the results, so please read on to learn the rest of the story behind the Project...
The core challenge for Fi was to plan, design and develop an interactive experience that smoothly delivered a wide array of content across four clearly branded sections.
Four complex sets of branded content, a feature-length documentary, and the requisite global navigation elements combined to present a unique challenge for our UX & Design teams.
How do you craft a digital experience that delivers all the wonder and beauty of a disparate array of creative content without crowding the interface or confusing the user?
Creative fuel
Three agencies, four iconic brands, and the ad legends that brought them to prominence once upon a time… Featured here are the core players from Fi.
Code Master
Technical Ninja
Design Dominator
Production Pirate
UX-pert
Development DJ
The Concept
Google, Johannes Leonardo, and Grow Interactive started by consulting with the creatives behind the classic campaigns for Alka-Seltzer, Avis, Volvo and Coke. Then they set forth to re-imagine those ads in the context of modern technology, while carefully preserving the emotional resonance of the original work.
2. Re-Imagined - A Worldwide Endeavor
So what if you really could buy the world a Coke? That was the question that spawned the creative execution behind the banner-ad version of the classic campaign. Pushing modern technology to its very limit, the
team developed a multi-layered process built on Google’s display advertising platform and a series of specially-developed vending machines set to deliver special messages from one user to another.
1
Display & interaction
The user engages with the display AD on desktop or mobile device.
2
Message Recording
The user records a video or text message to send along with his Coke.
3
Moderation
The message goes through automated and manual moderation.
4
Vending Machine Queue
The message and Coke are queued for delivery, waiting for a customer to interact with the vending machine.
5
Dispense And Deliver Message
The recipient interacts with the vending machine, viewing the sender's message and then receiving a dispensed Coke.
6
Reply Recording
The recipient records a video or text reply message.
7
Moderation
The message goes through automated and manual moderation.
8
Dynamic Video Compositing
The reply message is dynamically composited into a video telling the story of the interaction. That video is dynamically uploaded to YouTube.
9
Email (optional)
If the sender entered their information into either the desktop or mobile ad, they will be sent an email notification linking them to the composited video on YouTube.
10
Reply Received
The sender receives notification that his Coke has been delivered and can view his reply message in the composited video.
Strategy & UX
Every digital project begins on paper; rough sketches morphing toward more formal concepts. In this case, an intuitive navigation strategy presented the biggest challenge, and we tackled it with vigor.
Desktop Sitemap
Tablet Sitemap
Mobile Sitemap
1
Brainstorming & Ideation
It starts with blue-sky, where anything is possible.
2
Project Requirements
Target audience, delivery format, technical parameters: this is where it starts getting real.
3
Features & Functionality
What’s possible? What’s appropriate? What will really make it sing?
4
Wireframes
Refining the best stuff into a blueprint for success.
5
Annotations
Keynotes and highlights pave the way.
Wireframe 01
Wireframe 02
Wireframe 03
Wireframe 04
Wireframe 05
The Design
Hitting on a design theme that equally served both classic and modern styles took several rounds of iteration. In the end, a muted palette and custom photography allowed the brand entities to shine within their respective sections without overpowering the project as a whole.
Comparison of wires and final design.
Custom Configurations
Each branded campaign featured a set of banner ads with varying degrees of user-customization available. Our design had to incorporate and display the ads in real-life scenarios, including an array of settings, and all had to end up working together in harmony.
Target Audience
Gender:
Male
Age:
15-45
Interests:
Music, Movies, Sports
Affluent urban dwellers are Volvo's primary customer base. Use ad settings to see how it can reach this audience with Google.
Sure, we create tons of cool stuff on the regular, but not all of it makes it to the finished product… These are just a couple examples of early iterations that didn’t quite make the cut.
An old-school desk blotter was one approach we tried.
Then we tried the blotter's modern equivalent.
The Final Design
Each branded campaign featured a set of banner ads with varying degrees of user-customization available. Our design had to incorporate and display the ads in real-life scenarios, including an array of settings, and all had to end up working together in harmony.
Home | Project Re: Brief by Googlewww.projectrebrief.com
Select brand page
The Tech
The technology is meant to pick up where design leaves off, delivering on the promises made by the wireframes. Often the unsung heroes, our technology and development teams ensure the vision is realized in the digital space. From the start, technology is top-of-mind as our ultimate delivery mechanism.
Responsive Design
Designing for three platforms, each with seemingly infinite combinations of size, speed and orientation, is tricky business. But in order to reach the widest possible audience, it was critical that our design worked in a huge number of user scenarios.
Different Devices, Unique Experiences
We used semantic tags like section, footer, header and nav to enhance accessibility, searchability and interoperability across formats and environments.
CSS3 Transitions
CSS3 transitions are smoother than traditional means of animating elements, so we used them in several key areas within the site to improve and enhance user experience.
Custom YouTube Player
Beyond the custom look and feel, the use of an animated scrubber bar means the player has to communicate with Javascript, and pause/play depending on whether it’s visible or not.
Runs on Google AppEngine
We used Python to detect different devices, and setup routing, but AppEngine’s template language was used to render the pages. AppEngine includes a simple web application framework called webapp that makes it easy to deploy and create quick edits on the fly.
The Takeaway
A fleet of creatives set out to re-imagine four iconic campaigns in the modern world of Google and web technology. In the end, that marriage of creativity and technology was at the core of the experience, and the heart of the Project. We are now, as ever, proud to call Google a trusted partner, and look forward to continually co-creating the future of the modern web.
Broadway.com tapped Fi to produce a one-stop-shop for the latest Broadway buzz, information, pictures, and a seamless interface for snagging seats to any live performance.
The #1 entertainment brand for kids approached Fi looking for an iOS application for the 25th anniversary of their Kids' Choice Awards, and we jumped at the chance to play with them.
