April 3, 20161 Comment


The Rat:
Immersive Native Storytelling

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.

April 3, 2016No Comments


Testing a Social Network

Click for TL;DR (Summary)
We were tasked with phase one of a two-phase social network rollout for H&M.  Phase one was meant to establish a publishing platform and would need a lot of research and testing to figure out not only strong branded presence to distinguish itself, but also to flesh out the taxonomy for all content moving forward.  Through a lot of legwork done in user research, rapid prototyping and user testing, we were able to create a relevant phase-one platform for H&M employees.  Tools used: Optimal Sort, Sketch (Bohemian Coding) and Axure RP Pro.

Why an H&M Social Network

H&M has a massive international presence with a work force numbering well into the six digits.  Many of these employees, whether working in stores or office buildings, joined H&M in order to get a foot in the door in the fashion industry.

In order to provide employees with the resources to grow as well as foster camaraderie among coworkers, H&M decided to create an internal social network to interact with fellow H&Mers.  The approach would be simple: phase one would be a read-only content platform requiring store logins.  This would establish the site as a valuable source of information prior to implementing individual logins.  By minimizing the requirements for opt-in, we would be lowering barrier to entry and increase the rate of adoption.  After the platform has become established in everyday use, phase 2 would be rolled out to encourage user generated content and the real value of the network would grow.

Information Architecture

The key to establishing a content platform is understanding the content.  Because of the phased approach, we were able to approach the information architecture without having to deal with the intricacies of a true social network.  Through card sorting based on content types the clients gave us, we were able to flesh out various categories of content: H&M, Fashion, Hot, Fun and Career-level.  The structure was very flat, with equal emphasis on the categories; our strategy was to establish a simple and accessible taxonomy with the H&M network early on as it would guide the content creation moving forward:

Screen Shot 2016-04-02 at 7.24.09 PM

Additionally, we identified the key user journey that matched typical behavior flows around media consumption.
Screen Shot 2016-04-02 at 8.16.55 PM

Explorations in UI

As a fashion brand, the expectation was that a digital product by H&M would be as fresh as the latest fashion trends.  We did a lot of discovery into the mobile realm, trying to discern between up-and-coming UI patterns and experimental fads.  Eventually we translated our discovery into an exercise in prototyping various mobile navigation methods; below you'll find some of our explorations into just the navigation:

v2: X-Y Offset 

v3: Bottom Expand 

v5: Context Shift 

v6: Bottom Half Tray

v10: Header Category Navigation Shift 

As you can see, this was a series of explorations for just a single UI element.  Our design approach was to rapidly iterate, get feedback and refine the product.  With daily check-ins with teams in New York, Florida and Stockholm, Google Hangouts became our best friend (or worst enemy depending on the wi-fi).  The same iterative process was done for each screen on both mobile and desktop until each phase one screen was wired out.  Below you can find a sample of one of the mobile screens (the document ended up being dozens of pages):

Screen Shot 2016-04-02 at 8.26.18 PM

 

User Testing

By the time User Testing came around, we had a fleshed out prototype with more visual elements reflective of the H&M brand.  We began to integrate realistic content into the prototype along with realistic functionality like searching and filtering using Axure's pseudo-database.  Eventually we were able to work with this:

 Because the prototype was so fleshed out, we were able to test various tasks:

  • Open menu
  • Find other categories
  • Open an article
  • Find related articles
  • Find the career section
  • View a job listing

Additionally, we were able to get feedback on the importance of subcategories, the use of tags, content discovery, the nomenclature of the filters and overall impressions of the UI.  While we were at it, we surveyed users on things that would help content strategy moving forward.

Launching a social network to over a hundred thousand employees is no small task; it makes sense to do your homework beforehand to avoid any confusion and face potential failure on a large scale.  Testing helped uncover usability and taxonomy insights well prior to locking the design.

October 12, 2015No Comments


Imagination Made Real

Disney is a brand synonymous with magic. Everything that Disney touches must provide a sense of wonder and excitement.


Click for TL;DR (Summary)
The nature of advertising is that there is a lot of red tape, a lot of stakeholders and timelines that don't lend themselves to fast approvals. However, when it came to the Disney/Marvel Avengers/Playmation product, there were too many stakeholders to be able to do UI interactions in a traditional advertising waterfall way. Instead of going the Adobe After Effects (static) or Development (interactive) route, I provided a middle ground to iterate towards the best possible UI for the clients with conservatively 5x the speed of either of the other solutions.

It's hard not to get excited when working on a project with Disney. As a user experience designer with a background in film production, I can never get enough projects that involve motion design. For this project, I was brought in to design and prototype the interactions of the Playmation Avengers site .

Understanding the role of the site

As with any project, the first step is understanding the user. In this case, it us an understanding of the marketing ecosystem. The site was slated to be launched with a TV campaign featuring the spot below running on children's TV channels:

From there, the kid would navigate to the Playmation site on their tablets as our key advertising target. The marketing team's hypothesis was that if the kids were immersed in the Playmation and Marvel experience, they would be the deciding factor in encouraging their parents to buy the product. Therefore the strategy was to tow the line between having a magical, immersive experience while still providing drivers into the lower-funnel sales page.

Composing the Interactions

Art Director Nate Ripp had done a fantastic job in leveraging the Marvel Avengers assets in weaving a rich, visual comp for me to work with. The site was structured like a mission briefing with a not-so-subtle red banner at the top with the phrase "The Avengers Need Your Help!"

ultron_split_final_01_d294830f

CTA leading into immersive Avengers experience

I knew that I had a lot of work to keep up with Nate's impressive visual design, so I immediately got to sketching out the animations and interactions which would quickly be visualized into an interactive prototype via Axure. The goal of my designs were as follows:

Provide Feedback

There is little more frustrating than having expectations end in disappointment. In my opinion, this is one of the most obvious detractors from an "immersive" experience. Therefore, each UI element was designed to respond to an interaction-- a scroll, a swipe, a click or tap.  The very first navigation version was an animated expand/collapse on scroll-- in the vein of Ultron's robotic look-and-feel.

Seamless Discovery

Long page loads are one of the worst enemies of a seamless experience. As a visually rich product, the site would have a lot of pixel-dense imagery and every new page load could mean a serious roadblock in discovery. The initial recommendation was to have all elements load within the same page in full-page overlays for deeper content. However we compromised with the marketing and SEO teams and separated the main one-page scroller from the marginally deeper product-level pages. Our recommendation involved only 4 pages: Main, Heroes, Villains and Gear to allow at the very least seamless discovery within each product group.  This was a compromise we were willing to make as we understand that there's a context shift when going between each of these content groups (for instance when going from villains to heroes).

The Affordance of Spatial Awareness

One of the benefits of sketching on paper is the natural fit with designing for spatial awareness. Outside of the clicks out to the product page for deeper discover or out to the e-commerce page for conversion, the interactions all have to animate within the landing page itself. The strategy was meant to avoid any finality in the decision-making and therefore reduce the cognitive load of open discovery. Swiping through the heroes and miss the one you were looking for? That's fine, it's just as easy to swipe back. Accidentally click on the left gear item instead of the right? When the gear page loads, the navigation carousel order and interaction style has parity with that of the main landing page, just as easy to find out more about AvengersNet.

Results

This rapid prototyping process was pivotal not only in composing the direction, but in helping the content strategy of the site. We were able to make recommendations with a fully functional prototype to back it up.

This product had stakeholders in Disney, Marvel and Playmation as well as all of the associated legal teams, so having something that represented a real-world design was key in moving quickly. The initial prototype was done and ready for viewing over a short matter of days and my Axure chops made it ripe for rapid iteration. At the point we handed the project over to the development team at Disney's Matterhorn, I had prototyped at least nine versions of the site-- something that would never have been possible jumping right into development or even static animation via After Effects.

Prototype Link

Special Thanks

Art Director: Nate Ripp
Creative Director: James
UX Lead: Lester Dizon
Design Agency: TBWA\Chiat\Day Los Angeles
Development: Disney Interactive "Matterhorn" Product Group
Client: Disney Consumer Products, Marvel, Playmation

 

Like what you see?

I'm always looking for people to connect with.

Feel free to email me at alanmshen@gmail.com

Note: Although I'm always happy to help, I tend to miss shotgun requests.
If you want to connect please let me know what your favorite Star Wars movie was and why.

Or, there's always LinkedIn

Copyright © 2017 - Alan M Shen