The Setup

With shows like House of Cards and Orange is the New Black, Netflix has proven itself as a formidable original content creator.

So as keepers of the brand, how would a creative advertising agency help further their noble cause?  The creatives at TBWA\Chiat\Day have an idea.

frank
The-Rat-Book-from-PS

The Concept

The creative team came up with the idea to turn a simple digital TV spot into an interactive video “Choose Your Own Adventure”.

The idea was simple: start with an engaging story that gets users hooked. As the tension builds to the climax, the film freezes and gives the user the option to choose what happens.

The end goal was to strengthen the association between the Netflix brand and good, immersive content.

The Story

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

As you can see from the story, although viewers are thrusted in medias res into the scene, they are easily hooked on the story, captivated by the visceral and somewhat uncomfortable honey-ing of Bobby.  There is a masterful build in the tension as viewers hold onto every word as the mobster seems to escalate in anger at Bobby's big mouth.

Over the course of the two minute video, viewers are taken through the clichéd rollercoaster of emotions, shifting from empathy to fear to relief to anger.  Sometimes we side with Bobby, other times we side with William Forsythe's incredibly convincing mobster; either way, emotions have taken the reigns.

It is this internal engagement, this turmoil over who to hate, that we don't want to disrupt.  The feeling of disgust at watching Bobby try to open his eyes through the honey.  The involuntary gasp as the mobster gives Bobby a threatening shove.  The relapse in all the months of therapy dealing with your fear of rats.  Watching this video helped us to understand the table stakes of designing this interactive experience.

"What did Bobby do to deserve this?"
"OMG those rats are going to rip him apart."
"Wait... did he just spoil OITNB for me?"
-You, probably

As with any agency work, we knew that the place to get started was in better understanding the constraints and the goals given to us by our clients at Netflix.

The Task

Create a Choose-Your-Own-Adventure on social media platforms using one video intro and two possible endings.

The campaign will run on Facebook and YouTube, being posted by the official Netflix accounts.

Stakeholder Needs

Social media metrics (views, completions and shares), positive press and general online sentiment are all important.

Viewers must be able to choose an ending and see what percentage of people chose that ending.

This experience must be 100% native to that social media platform (e.g. no external website)

Problem #1

What if the interactive platform isn't that interactive?

Problem #1

What if the interactive platform isn't that interactive?

facebookthumb

With a brand experience campaign like this, it's hard to do "user research" in the traditional product sense.  With a product, a designer's goal is to best understand the user's needs in order to better create a solution.  This typically works better when you have a very specific problem in mind so that you can develop an intimate understanding of those users.

On the other hand, in the case of experiential advertising, the core "user" is more of a general marketing target.  The parameters could be as broad as a demographic or general behavior.  This time, it was something even more general: Facebook Users.

FacebookMan

Facebook Users

It's hard to generalize with what is effectively a quarter of the world's population.  However, Facebook has done immensely well in forming people's behavior.  Facebook users are:

Mobile-first: 90% of users are on mobile with 47% only ever using mobile
Addicted: Users spend on average 50 minutes a day on Facebook
Skimmers: 59 percent of links shared without having been clicked on

The biggest thing to keep in mind here (and with most digital advertising) is that brands are competing on a saturated field with low share of attention.  Engagements are short, quick and easily distracted.  Therefore, understanding the structure of the narrative was incredibly important.

The biggest thing to keep in mind here (and with most digital advertising) is that brands are competing on a saturated field with low share of attention.  Engagements are short, quick and easily distracted.  Therefore, understanding the structure of the narrative was incredibly important.

Stucture of a Story

story

Rising Action

Climax

Falling Action

The story actually jumps right into the rising action "in medias res", so the users are immediately hooked.  However, in order for narrative climaxes to have an impact, the rising action needs to build enough emotional investment in the story.  This goes double for a Choose-Your-Own-Adventure.  The climaxes are interaction points where the viewers must make a choice that results in one falling action or another.  But in order for this interaction to be interesting and ultimately rewarding, there needs to be something on the line, such as emotional investment.

So, how does this line up against a Facebook post?

facebookpost

The Anatomy of a Facebook Post

Looking at the Facebook post, there are three parts, in order:

Body content (copy)
Video (one CTA at the end)
One-way User-interaction (likes, comments)
Unfortunately, the only place to link out to two different endings was first in the order: the body content.

*Note: At the time there were no advanced Facebook interaction offerings such as stories, canvas or even the <3 buttons

Rising Action

Climax

Falling Action

Comparing the narrative story structure against the anatomy of a Facebook post, it is obvious that there is a disconnect.  The only customizable interactive part in the Facebook post is in the body text, which is more or less the first section.  This means that with a Facebook post, the Falling Actions are displayed first, followed by the video (Rising Action/Climax sequence) which would require some sort of CTA to go back to the body copy to select a Falling Action.  This is what it would look like:

Best Case Scenario for 100% Native

There's an emotional rollercoaster, for sure.  Just pure drop.  No matter how engaging the content is, there is bound to be significant dropoff.  This flow requires a high level of engagement from the user before even introducing them to the rising action and it goes from bad to worse.

After spinning our wheels on the problem (and believe me, this was the least-shoddy solution we could come up with) we finally thought to ask the question:

Why Native?

It's easy with client work to assume that the client fully understands the constraints they've laid out and therefore take their word as gospel when building their vision.

Really asking "Why?" when looking at their need to present this natively, we understood that the true need was preserving cinematic experience through absolute removal of friction.  This campaign was simply another battleground for Netflix to prove to the world that they, the Binge company, could make immersive and engaging content.

With this in mind, we focused less on the platform constraint of being "native" and leaned into the idea of "immersion".  This helped us to focus on what were considered natural Facebook behaviors. These turned out to be common behaviors like engaging with content not "native" to the Facebook app platform but still within the familiar Facebook browser.  Behaviors like looking at a preview picture, tapping with an easy push navigation for a few seconds, checking out external content and coming back

Facebook's mobile application design had streamlined the hunting-and-pecking behavior of going from feed to website within the Facebook app. The push navigation as well as the pattern of saving the user's spot in the feed reduced cognitive load through assuring users that they wouldn't lose their place in the feed. Overall, it made it so that even a couple of seconds of loading (for a slow internet connection) might be percieved as invisible to the average Facebook user.

Once we expanded the definition of "Native" to "seamlessly in line with Facebook behavior", we were able to visualize an ideal scenario for the flow.

Not 100% Native

We called this a "Decision Portal"

Decision-Portal

Decision Portal

A way to empower individual disciplines to make decisions in alignment

Imagine a team of designers, developers, art directors, copywriters, project managers, sound editors, film directors... dozens of people who have never met needing to align on the same vision

"Developers, I need a clean handoff within the Facebook browser"
"Editors, I need you to cut just right so the handoff has a smooth transition."

One of the most important jobs of the user experience designer is to align the product team around the user's needs.  It's easy to become siloed in our respective fields and not consider the overall picture. In this case, calling this a "Decision Portal" instead of a "microsite", the user's cinematic experience became the entire product narrative and we were able to empower each respective team to strive towards the best possible handoff.  

Decision Portal

Problem #2

What if the platform's growing pains become ours?

Problem #2

What if the platform's growing pains become ours?

Youtube-Logo
ytman

YouTube Users

Generally speaking, YouTube is not as much a social media platform as it is an eternal content rabbit hole.  Their design team has done an amazing job in pre-loading triggers to encourage chaining together content. This also means that typically people don’t like leaving the app for any reason, so the above "Decision Portal" approach would not work.

However, general app behavior followed the same trends as Facebook: it is heavily mobile (around 50% at the time); a significant number, but not enough to where the 80/20 rule would enable us to rule out desktop.  We needed to make sure that we were addressing three distinct groups: Desktop Web, Mobile Web and Mobile App users, each with their own technical needs.

The Ideal YouTube Flow

In order for us to understand what we were working with, we first needed to understand what the same "Choose-Your-Own-Adventure" would look like on the YouTube platform.

1. What interactive elements do we have to play with?
2. Where do the viewership percentages come from and how do we update them?
3. How do we make sure what people share is the whole video (and not just one of the endings)

These were all great questions that came out of the flow.  At the same time, YouTube had two different interactive products which would throw a wrench into the plan:

The State of YouTube Interactivity

Platform-Quirks-1

No need to get into the nitty-gritty about how complex our trial-and-error process was to find out these constraints (imagine a wasteland of YouTube accounts and dummy videos).  But to answer those questions:

  1. What interactive elements do we have to play with?

    We had to use both annotations and cards to try to cover off on at least 90% of potential viewers based on reported usage stats.
  2. Where do the viewership percentages come from and how do we update them?

    We had one video as our entry point and used video view counts to determine percentages, which we displayed and updated regular via YouTube annotations.
  3. How do we make sure what people share is the whole video (and not just one of the endings)

    See below for some magic

The Wizard Behind the Curtain

wizard

I called this process "The Wizard Behind the Curtain". This reference to the Wizard of Oz was my way of hiding the complexity of the four-video system that we needed to setup to make everything work seamlessly.

We needed four videos in order to have the setup video, a "push" and "save" ending as well as preserve view counts by linking at timestamps (try to follow along a path without getting a headache).

There was absolutely no reason that the users needed to know any of the machinations behind the curtain in order to really believe in the magic; a common principle of service design.  The only real way to pull the curtain back would be to actually pay attention to the URLs after clicking (an attention to detail I would be more impressed by than disappointed).

WorstCaseYoutube

How Did We Do?

The Press

The advertisement was picked up by a lot of advertisement publications.  Adweek mentioned the experience and listed me by my pseudonym “Alen Shen” which is interesting, because that seems like the most unique way possible to spell it.

The Comments

Viewers generally found the experience engaging, with a lot of people taking sides and feeling really strongly about Pushing or Saving Bobby (okay let's be honest; we're all sadists here #teampush).

The Awards

This experience made it to the 2016 Cannes Lion shortlist.

It was also nominated for the 2016 Online Commercial Webby award, being beaten out by the “Like a Girl” campaign, so, not even mad. 

But Most Importantly...

Not a single person mentioned a break in the immersion.

The best UI is, after all, invisible.

Special Thanks

Matt and Dave for coming up with this kooky idea
Sarah and Steve for likely spelling my name wrong
Bassett, Kmac and Stephanie for keeping us in line
Ro and Lauren for freaking out over this strategically
Anders and Robbie for making it look spiffy
JB and Armen for making the tech stuff happen
Wally and LB for making sure it worked
Lester for believing in me
 

Selected Works

Code-Responsible DesignRapid Prototyping

The Best UI is InvisibleMulti-Platform Design

Copyright © 2017 - Alan M Shen