The Rat:
Immersive Native Storytelling

In Prototyping, UX Design, UX Strategy
Click for TL;DR (Summary)
We (TBWA\Chiat\Day) 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 how the technical limitations of each platform as well as cater to each platform’s user behavior. In the end, we created similar consumer-facing experiences with very different back end structures, thereby creating a complex structure under a simple UI in order to eliminate friction and do the Netflix brand proud.  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 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.  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 quickly and make snap judgments about whether or not to engage or stop scrolling.  This would be an uphill battle for eyes.

The Problem

It’s a little tricky to design an interactive element when you lack any real interactivity. Those familiar with Facebook understand that it is nearly impossible to control how content is portrayed; they have extensive ad guidelines which dictate a set of rules and are extremely judicious with those that break them.  The concept of “choose-your-own-adventure” followed a simple narrative structure: Consume the video content first, then make a decision.  However, the structure of the Facebook post was the opposite: copy/URL followed by video.

Screen Shot 2016-04-02 at 10.34.05 PM

 

At the time, Facebook Video was a relatively new product, so the only interaction was a link out to an external website at the end of a video.

 

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, the immersion started the moment a user read the copy above the video (or if we’re being honest, the user skipped the copy altogether and started to watch the video).  Putting the “choose-your-own-adventure” choices in the copy would have been tacky and awkward– something that we would not allow to reflect the Netflix brand.  This project hinged on this narrative immersion, so we needed to be a little creative.

We initially shied away from the idea of a microsite because we thought that the hand off from native content to a web view (in the Facebook app) would break immersion, requiring an extra-experiential level of engagement.  However we tried to abstract the user’s journey in this scenario, marking areas of friction.

  1. User passively opts to watch a video (something marketers don’t like to hear but honestly know deep down)
  2. Engagement grows as the user is taken in by the Scorsese-esque TV spot
  3. Towards the end, the user is at peak engagement; they’ve forgotten where they are at as they gasp at the climax: the mobster is about to kill the Rat!
  4. The video freezes and a CTA comes up to “learn more”– effectively giving the user a cliffhanger itch to know what happens
  5. The user is taken to a microsite with the two choices to pick back up where they left off
  6. The chosen “ending” plays and the user’s itch is scratched

 

One of the hardest decisions I’ve had to make up to this point was to really admit to myself that #5 was out of my control; there was going to be a potentially jarring experience because that “Replay Video/Learn More” CTA was going to pop up and that was the only interactive option available on the platform.  However, if the user had to drop of out immersion, I could help control how they landed within the microsite itself.

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

Screen Shot 2016-04-02 at 10.43.27 PM
If my marketing background ever came in handy, this was it.  I coined our microsite a “decision portal”.

Now, you might be asking yourself, “Why does the decision portal moniker matter?”  This was absolutely crucial because I needed to convince every stakeholder involved that this experience needed to be seamless.

Taking a step back, we need to understand just how many parties were involved with this project. In addition to the standard PM/UX/Visual/Developer digital team, there was our internal creative team, the commercial film company who shot the spot, the post production studio putting it together, a separate sound team, and potentially just as many people from the Netflix side all trying to work on one project.  Imagine if I called this a “microsite”. The traditional creatives might check out, because honestly their bread and butter is TV spots.  The editors might not have worked so hard on fine-tuning the video to synchronize properly between the cuts.  Our front end developer would not understand the importance if mirroring UI elements with the video and pre-loading video content to make the immersion seamless.  Rebranding a microsite as a “decision portal” is probably my best contribution to the advertising industry.  And it worked.

Imagine a Facebook app user watching this video on the edge of their seat as the mobster pours honey over Bobby’s head with a swarm of rats scurrying in the background.  You can feel the tension in the air as the mobster ramps up to kick Bobby into the pit 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, one that opens the same exact freeze frame with a simple mobile-first UI to “Push Bobby” or “Save Bobby.”  Selecting either option plays the video right where the user left off.

 

Screen Shot 2016-04-02 at 10.32.25 PM

To be totally fair, the process of selling the “decision portal” wasn’t just fancy marketing speak.   On paper, it might look as though taking a user to an external site would ruin the immersion. What really allowed this to be sold through was proving the concept through a rapid prototype which could be tested with a real Facebook Video. During the experimentation phase of the project, I was able to quickly create a placeholder site in Axure for all parties to walk through the flow to make sure we were all on the same page and working towards the best solution.

When you really think about it, Facebook has teams of dozens if not hundreds of designers working to create sticky products.  They’ve worked to reduce the cognitive load of interacting with external content by building an integrated browser that has trained users to trust they can open a site and come back to the feed right where they left off.  All we did was understand that a modicum of friction was okay in the Facebook mental model; we just had to make sure there was a decent payoff.

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 PRoblem

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

Understanding both of these limitations would be absolutely key for the success of this project.

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 with mobile, desktop and app users, 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 back end, allowed the user’s experience to be as frictionless as possible through a native experience.
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: competing 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 hand-off 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. Look up kitten videos on YouTube and time how long it takes to stop chaining together “just one more video”.

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 a few 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, which in this case was the user being brought into a real-world Netflix experience. And, of course, 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.  This was a messy and unorthodox process, but it’s the type of work that I’m proud of, not because I think the end result is pretty but the outcome was something that was experienced by many.