The Rat:
Immersive Storytelling

In Prototyping, UX Design, UX Strategy
Click for TL;DR (Summary)
We were tasked by Netflix to create social media platform-native immersive experiences. As a UX designer trying to understand how to best achieve immersion, I needed to understand the behavior of people within those platforms and then the technical capabilities of those platforms. In the end, we created similar consumer-facing experiences with very different back-end structures, thereby creating a “wizard behind the curtain” web of sites, redirects and duplicate videos.  The real sign of success was that the critical and consumer reception of the campaign was about the content and not about the platform that we designed.

The Setup

Netflix has made itself a household name by providing easy-to-binge content with minimal friction stopping users from chaining episodes together.  With shows like House of Cards and Orange is the New Black, it has taken strides towards establishing 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 Concept: Create more awesome content in the form of an ad

The digital team was approached with a simple and relatable concept for a TV spot: an old-school mobster is angered at his subordinate, Bobby, for spoiling Orange is the New Black.  In gripping cinematic fashion, he pours honey over Bobby (dubbed “The Rat”) and gives the audiences a choice: either push him into a pit of rats or let him go free.  Not only can the viewers choose Bobby’s fate (thereby seeing their choice through to fruition), but they can also see if they shared the popular opinion.  Easy enough, right?  Famous last words.

The digital team was tasked with creating an engaging and immersive experience, a task commonly done through the flexibility of web design.  However, the brief had a specific criteria: the experience must be run entirely within the native Facebook and YouTube platforms and without the help of a microsite.  Underneath the deceptively simple idea lay a plethora of frustrating technical problems.  In order to fully understand the issues with each platform, it was important to understand the user behaviors on each.

Facebook

THE USER

Netflix has the multi-million Facebook following to have substantial reach– but the problem with Facebook (and nearly any other social media platform) is engagement.  Facebook is like the wild west where every post is gunning for eyes.  Arbitrary algorithms aside, people scan posts really quickly and make snap judgements about whether or not to engage (or even to stop scrolling).  This would be an uphill battle for eyes.  Secondary research showed us what we needed to increase engagement; here’s how we stacked up:

  • Posts with rich content (Videos or Photos) – Check
  • Shorter posts – We can do that
  • Shorter video – No-go, 3 minutes does not fit the bill, but that decision had been made
  • Question – Check (Push Bobby or Save Bobby?)
  • Most People are on Mobile –We’ll need to plan for that
The Platform

At the time, Facebook Video was a relatively new product, so the only interaction was a link out at the very end of the video.  We had approached our reps at Facebook to see if there were any new beta products, and there were hints at a “Project “Faraday” which would eventually become Canvas, but we didn’t have the media spend for that type of preview.

Let’s take a look at the structure of a Facebook Video in the feed.

Screen Shot 2016-04-02 at 10.34.05 PM

As you can see the structure is:

  1. Copy
  2. Video
  3. Like/Comment/Share
  4. Comments

 

The Problem

It’s a little tricky to design an interactive element when you lack any real interactivity.  Our in-platform options were below:

  1. Leverage one of Facebook’s ~10 CTAs after the video ends linking out to a website
  2. Facebook’s representatives recommended putting URLs for each ending in the comments, after the post itself
  3. Because of the structure of a Facebook post, it was unintuitive to provide the actual decision fork in the copy before the video (e.g.” Watch the video below, skip over the links– we’ll tell you what they’re for in the video…”).  Besides, this would probably go against the “Shorter Posts” best practice.

 

THE Solution

I am of the firm belief that a UX professional is responsible for understanding and maintaining the relationship between a brand and its users.  In this particular case, option 2 and 3 were clunky and lacked polish– something that we would not allow to reflect the Netflix brand.

On the other hand, option 1 put us in a tricky place, because the idea of a microsite was ruled out early on by other stakeholders. However, we gave the idea of immersion some more thought and considered the rational for not leveraging a microsite in the first place: leaving a platform for a separate web experience breaks immersion, requiring an extra-experiential level of engagement.  However, the users reaching the CTA at the end have already opted-in to the video experience, and we already required a level of interaction by asking the audience “Push Bobby” or “Save Bobby”…

And that was how the “Decision Portal” was born.

Screen Shot 2016-04-02 at 10.43.27 PM
Why does the decision portal moniker matter?  Because it differed from a microsite in two ways: the prior opt-in and the seamless handoff.  The CTA is timed to require interactivity after hooking the user through gripping narrative; the spot is setup very well to pause right before a climax.  Imagine a Facebook app user watching on the edge of their seats when all of a sudden the video freezes on Bobby’s terrified face.  A CTA then appears, linking out to a website to see more.  This opens an experience within the Facebook browser with an identical background and with a simple mobile-first UI that matches the mood of the spot.  Plus, the user can share the link to this “Decision Portal” via Facebook’s browser because there is still a CTA at the bottom for anyone coming without having seen the video.

Screen Shot 2016-04-02 at 10.32.25 PM

What really allowed this “Decision Portal” to be sold through was proving the concept through a rapid prototype which could be tested with Facebook. During the experimentation phase of the project, I was able to whip up a placeholder site in Axure for the clients to walk through the flow.  On paper, it might look as though taking a user to an external site would ruin the immersion.  Yet, when you really think about it, Facebook has reduced the cognitive load with their integrated browser through motion, spacial awareness and the trained behavior that users can open a site and come  back to the feed right where they left off.

View Prototype

YouTube

The User

The behavior of YouTube users is vastly different from that of Facebook users.  Success on Facebook relies on capturing eyes with an engaging newsfeed “preview” , thereby earning the opt-in click to have 100% engagement for a few minutes.  By contrast, YouTubers don’t discover content on a feed.  They typically don’t subscribe to big brands, but instead original content creators and indie influencers.  However, once watching a video, viewers chain watch, usually drawn by thumbnails and engaging title copy on the side bar.  Netflix’s sub-million subscriber count wasn’t going to draw in many viewers, so the understanding was that YouTube’s TrueView product would be used, supported by paid media.  Therefore the main focus at this point was leveraging the platform’s interactive capabilities for immersion rather than to increase reach.

The Platform

YouTube is the industry standard for online video– however its video product was in a transition phase.  With a legacy interaction element called “annotations” on its way out and a new one called “cards” on its way in, there were a lot of micro-problems to be solved.

Annotations

  • Typically annoying with low engagement
  • Does not work on mobile video
  • Does not work on app
  • Clicks open videos in a new tab
  • Being sunsetted by Google– and therefore with little support

annoying annotations

Cards

  • Google’s new platform which features a slide-out window on the right that contains thumbnail links
  • Works on app (90% of mobile users)
  • Can be set to auto-open on desktop but mobile only has an (i) prompt requiring user action
  • Can only link to websites associated with the YouTube account
  • Can only link to each YouTube video once and cannot link to itself
  • Incredibly limited visual control

The Problem

Sometime in 2014, Honda put out an interactive YouTube video which became a case study for the power of interactive video.  Every agency wished they did it and every marketing client wanted it.  The problem is that it was a one-off.  That level of interactivity was the marriage between a large advertising budget and YouTube being open to the idea of a custom media buy.  But according to our YouTube reps, they don’t do that anymore, a fact completely unknown to the stakeholders who decided to do a completely YouTube native experience.

The Solution

Without getting into the nitty-gritty, I came up with a magical flow which I would henceforth refer to as “the wizard behind the curtain”:

Screen Shot 2016-04-02 at 10.43.11 PM

Great design isn’t always just in what the users see, but sometimes in what goes on behind the scenes.  The workaround for interactivity involved four videos (carded and annotated) with the following setup: Setup Video (first 2 minutes) > Decision > Ending Clip.  Clicking on the decision would take the user to another copy of the video at a specific timestamp at the specified ending.

The solution needed to be this complicated and involved four separate videos because of a few reasons:

  1. Shareability – The process could have been done with one “Setup” video and two ending videos.  But if someone decided to share after watching one of the ending videos, all they would be sharing is that specific ending with absolutely no context.  This solution linked to another full video via timestamp, so every video had a Setup > Decision > Ending flow no matter what.
  2. Feasibility – One of the main restrictions of the YouTube Cards is that it could only point to each other YouTube video once (and can’t link to itself).  Therefore, there needed to be an origin video as well as two other videos (one for each ending).  The fourth video was added so that there would be an endless loop– no matter how many times the videos were watched and re-shared, there would always be a video ending to link to.
  3. Preserving the payoff – The idea was floated around that maybe we should just autoplay the alternative ending after the selected ending (e.g. Setup Video > Decision > Ending 1 > Ending 2).  But the whole idea behind showing the percentage that voted was to make people pick sides and feel a part of something bigger than themselves.  Therefore at the end of each ending, in addition to showing a percentage of people that shared the decision, we also included a CTA to see the alternate ending.  We “scratched the itch”, if you will.

 

Screen Shot 2016-04-03 at 11.35.27 AM

We decided that in order to cover all bases, both annotations and cards would be used.  We froze the video at the climax, where viewers were already hooked and eager to see the ending, so the combo of clear annotations over hard-edited graphics as well as a card CTA at the top right were relatively subtle and effective ways to encourage interaction.  Even if users didn’t take action in the 10 seconds the video froze, the video would continue playing one of the attached endings.  This whole process, however crazy on the backend, allowed the user’s experience to be frictionless
Screen Shot 2016-04-02 at 10.46.08 PM

Some might wonder why we didn’t use a combination of Facebook and Youtube.  This can be split into two parts:

Why not not go from Facebook to YouTube?

Let’s be honest about what Facebook and Google are: advertising platforms that sell our attention to brands.  One of their more prominent battlegrounds as of late has been video.  Not only are both platforms trying to out-do each other in terms of feature sets, but Facebook has building the de-prioritization of YouTube links into their newsfeed algorithm as well as UI:

Screen Shot 2016-04-02 at 10.49.52 PM

Most importantly, YouTube just doesn’t work on mobile web.  Typically, if a user has YouTube installed and they access a YouTube video via browser, the user would be prompted to open the YouTube app– which would give the experience some level of interactivity.  However, we did not feel confident in that app-to-app handoff happening for every person.  Even if it did happen, the native OS notification is certainly not native to the Facebook experience and would be a significant deterrent to real immersion.

Why not go from Youtube to Facebook?

Absolutely not. No one on YouTube wants to leave YouTube; they want to go down the YouTube rabbit hole and chain videos together.

The Results

The response was overwhelmingly positive, from clients, viewers and the press.  Viewers generally found the spot engaging and immersive, many expressing disappointment in finding out that the spot was not an actual show.  Some commenters were very animated in picking a side.

Push-or-Save-Censored
The spot was talked about in publications, my favorite being my very first Adweek mention under my apparent pseudonym “Alen Shen”.  It was even nominated for a Webby (being narrowly beaten out by an ad that was empowering to girls).

However, I think the largest victory for me was the lack of any discussion over the UI of the “choose your own adventure”.  The focus should and always be on the experience, and in my humble opinion, the best UI is invisible.

Slight Aside: you may wonder, “Is doing the platform/feasibility discovery really the role of a UX designer?”  My answer is, “Absolutely.” The UX person should be chasing the solution that best fits the user within the specified parameters.  Part of the job title is designing responsibly by understanding the reality of production. Whether it is social media or web or iOS, it is irresponsible to create something in a vacuum and hand it off to be created by magic developers.