For Google I/O 2014 I lead the development and worked with my team to plan and build an animation- and community-driven LED display for Google+. The display showcased Google’s new Material Design brand styleguide and the newly released Google+ Stories feature.

I lead, planned and executed the technology side and worked out the concept together with my team at Big Spaceship.

Responsibilities

  • Tech Lead
  • UX and Concepting
  • Hardware Setup
  • Client Coordination

Technologies

  • Cinder
  • NodeJS

Agency


Challenges

With a timeframe of only six weeks and high exposure at Google’s flagship event the pressure was on. Our goal was to deliver an equally robust and beatiful experience that celebrates every aspect of I/O. To achieve that we built a system that would be simple enough for stability and flexible enough to drive various conversations.

The space one day before the event.

Eco System

To ensure stability we made two baseline requirements we chose to build the front-end experience in Cinder and create a separate, local NodeJS CMS and API. The NodeJS app would feed the front-end with content, which would be pulled from Google+ and stored locally including user comments, images and post meta data.

Blending Material Design with Stories

To celebrate both a visual system and narrative we needed a structure that would give equal amounts of dedication to both.

First, we divided user- and Google-content into different chapters. Each chapter would be introduced by a big title slide, followed by a stream of Google+ posts and their user-comments grouped together by topic. Special posts could be marked and featured to take over the display for a minute.

We then combined each chapter with particles inspired by Material Design. The particles were animated in three different types of animations:

  1. Elaborate Title Slide Animation
  2. Transition Animation
  3. Ambient Animation

Prototyping

Once we had our base structure of chapters defined we dove into prototyping and animation testing. This was a crucial step that paved the way for a modular system of particle animations combined with structured content.

Early Animation Prototype

Creating a System

I designed and built two core systems to allow for modular particle animations and a variety of different post types.

1. Display List

One of the systems was a display list that would allow for any custom combination of display objects like images (loaded in background thread), videos, flattened FBO nodes (for faster rendering or large but static sub-trees), simple shapes and text nodes.

Using this system we could effortlessly swap out, change and re-organize components even a few hours before the event opened its doors.

2. Particle Animations

All the particle animations were composed of two main components: Particles and Particle Animations. Each particle animated different flat flaps and have its own lifetime with a seamless intro and outro animation. Animations all consisted of an intro, outro and an ambient animation.

A central Particle Controller managed the transitions between different animations, allowing each animation to live as long as it still had particles to animate.

To make the system more modular, animations could take over particles managed by other animations, which allowed us to create individual classes for transitions, for example, that could blow all particles on screen, no matter what kind of animation style they currently had.

Configuration

Staying flexible and open to changes even until the very last minute was crucial to this project’s success. That’s why we put a lot of emphasis on making the animations, content and structure as flexible as possible.

Final tweaks on-site one day before the event.

A variety of debug interfaces and keyboard shortcuts allowed us to tweak nearly every aspect of the animation. Hardware fallbacks like a static screenshot of the animation paired with automatic relaunching gave us a safety net in case we needed it.

Team

  • Naim Sheriff (Design)
  • Thomas McCabe (Technology)
  • Karen Peng (Technology)
  • Matt Carver (Technology)
  • Dabney Donigan (Content & User Experience)
  • Lesley Melincoff (Production)
  • Alexander Rea (Technical Production)
  • Charlie Whitney (Cinder Consultation)

Photo Credit