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 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.

From vision to fruition
  • Active, all brands
  • Hover, all brands
  • Selected Avis

Cool Stuff, Abandoned

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 Google www.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.

Other Recent Case Studies from Fi
  • Broadway.com

    iPad App

    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.

  • Kids Choice Awards

    iOSApp

    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.

  • Google Ramayana

    Applications, Strategy, Portals/Microsites

    Fi and OgilvyOne launched Chrome in Asia with an interactive retelling of the epic tale of Ramayana.