Gabriel Neila Artist Portfolio

Times Square · Creative technology

McDonald’s Times Square Bacon Poll

A live hashtag poll animated for Times Square billboards, built to be understood in 15 seconds.

Animated bacon poll on a Times Square billboard
Role
Senior Product Designer
Client
McDonald’s
Format
Digital out-of-home, starting in Times Square
Built with
Sprinklr Display, CSS keyframe animation

The 30-second version

Short on time? These four cards are the whole case study.

  • Problem

    McDonald’s wanted a live public vote on Times Square billboards. At the time, Sprinklr Display had no animation capability for it.

  • My role

    Senior Product Designer. I designed the experience and built the animation.

  • What I did

    Storyboarded the sequence, then animated it with CSS keyframes around a chart fed by live hashtag counts.

  • What changed

    The poll launched in Times Square as an animated chart showing live results for #TeamClassics and #TeamBacon.

01

Context

McDonald’s wanted more attention for its bacon campaign and had an idea: ask the public whether its burgers are better with bacon, and show the vote live.

Classics or bacon campaign banner
The campaign question.

As a long-time Sprinklr customer, McDonald’s asked us to produce it with Sprinklr Display and run it on digital out-of-home screens, starting with Times Square.

02

The constraint

A Times Square billboard slot shows your content for 15 seconds each hour. The audience is on foot, moving, with dozens of other screens in view.

Whatever we made had to explain the vote and show who was winning inside that window.

03

Approach

A simple data model

We proposed two hashtags, #TeamClassics and #TeamBacon. Rules in Sprinklr counted mentions of each automatically and filtered out spam and bot posts.

Storyboard first

Display could not yet animate the way McDonald’s expected, so I started on paper. A storyboard set the order and timing of every beat before any build work.

Storyboard frames for the 15-second sequence.

Building the motion Display lacked

I went back to my rich media background. I broke the scene into elements and animated them with CSS keyframes, tuning the timing until it ran smoothly. The centerpiece was a chart that updated with the live poll results.

The animation, with the live chart for #TeamClassics and #TeamBacon.
04

Outcome

The animated poll ran on Times Square billboards with live results from the two hashtags.

Poll results on the Times Square billboard
The poll on screen in Times Square.
05

What I learned

  • A 15-second slot allows one message. Everything that did not help someone read the result was cut.
  • Code can cover for a missing feature. Hand-built animation delivered the project and showed what Display would need to do natively.