UX Case Study: The Netflix Screening Room on Behance

The Brief: Netflix is looking to significantly increase social activity and sharing between members on their site.
The Team: Hannah Atkin | Andrew Camp | Abigail Crispin.
The Tools: Omnigraffle | POP | Typeform | Invision.
The Duration: Nine days.
Skills: Research, UX and UI Design.

Topics: Competitive Business Analysis, User Interviews and Survey, User Personas, Sitemap, User Flows, User Journey, Sketching, Wireframes, Prototype

In order to guide the process of creating a new social feature, we looked at other leaders in the media streaming space - Hulu Plus, Vudu, and Amazon Prime - to see how they were approaching the issue. We found that, like Netflix, companies such as Hulu Plus and Vudu rely on the user’s willingness to link their viewing accounts with their Facebook profiles in order to connect socially. We examined the reviews and ratings process as well as features such as Vudu’s ‘Share My Queue.’

On the whole, we found that media streaming sites are stagnated when it comes to creative ways to catalyze social engagement.

One study by Time Warner revealed a particularly valuable insight: a viewer’s emotional engagement with television content is 1.3 times higher when watching with others than when watching alone. Here’s the fascinating part: the same increase in engagement is found when a viewer is physically alone but interacting on social media (live tweeting, chatting, etc.) while watching.

We expanded the scope of our inquiry and began looking at sites like Google Hangout and Twitch. Research into the realm of ‘social television’ or co-watching revealed how powerful the phenomenon is becoming and the rich possibilities it offers to fostering connections.

Using Typeform, we created a survey to find out more about the Netflix user - what they like, what they hate, how they watch, and how they interact online. (One of the survey participants said it was the ‘prettiest survey’ they’d ever taken - thank you to Typeform for the lovely customization options.)

The response to one question in particular became our strategic focal point and encapsulates the essence of the social problem. Of the 150 responses we received, we found that 92% of Netflix users were unwilling to link their Netflix account to their Facebook profile.

My favorite part of the UX process is giving life to the people who are using your product. The faceless mass of 'users' gradually took on substance and importance as we developed these unique composites, each a representative of a certain subset of the Netflix member population.

The questions we asked ourselves: who, what, where, when, why, and how?

What does a day in the life of a Netflix member look like? What are his or her pain points in the browsing and viewing process? What do they love about Netflix? How can we make it a better experience for them while answering the business needs, as well?

As we fleshed out the bios and behaviors of Ian, Heather, and Isabella, they gradually took shape as unique personalities. We referred to them (by name, no less) continually throughout the design process. We found ourselves asking one another, "Yeah, but would Ian like that?" Or, "Isabella would totally use that." They each took on a more palpable reality as the project continued.

Putting ourselves in Ian's shoes as he tries to find something to watch. With empathy mapping, we tracked Ian's emotional shifts as he navigates through Netflix.

Before deciding what the screens would look like, we needed to understand what steps the user would need to take to use the feature. What pages would we need to create and how would they be integrated into Netflix's existing site? Using Omnigraffle, we built the foundation for our feature.

Taking what we had learned about the Netflix member, particularly how they interact socially on the web and what they love and don’t love about Netflix, we started brainstorming about our proposed feature.

So we came up with the Netflix Screening Room.

Appropriating elements from Google Hangout, we envisioned the Screening Room as a virtual movie theater where friends can set up movie dates with one another and watch together remotely in real time. With optional video chat and text chat, including the ability to send the chat to your cell phone while continuing to stream content on the primary screen, it’s the next best thing to being in the same room.

With some neon Post-Its, a Sharpie, and the use of a blackboard, we started playing with some ideas. Ultimately, we decided the following: give the user something fun and easy to use - chances are, they’ll probably like it.

Sharpies and sketchbooks: getting started. After a Design Studio session, where the three of us rapidly got our ideas for the feature onto paper, we created a clickable paper prototype in Pop to test the viability of our idea.

Skinned wireframes of the virtual screening room.

Text chat can be sent to the viewer's phone if they want to save screen real estate for the content he or she is watching. Similarly, the video chat can be disabled easily or muted.

We made all the wireframes using Omnigraffle and then skinned them to integrate Netflix's branding and visual schematic as seamlessly as possible.

Wireframes of the party page: the Netflix member picks the movie, the date and time, create a custom title for the event, have the option to add a message to the invitation, and choose the friends they'd like to invite.

Because of the aforementioned aversion to linking one's Netflix account with Facebook, we want to provide members with multiple options in how they choose to create his or her Netflix circle.

Once we built our wireframes in Omnigraffle, we used Invision to create a clickable prototype. We then sat with users to observe their interaction with the prototype. Noting pain points and paths each person took as they navigated our feature, I jotted it all down on paper while Hannah guided each tester through the process. Instructions were kept to a minimum, but we asked each person to complete the task of setting up a viewing party and then going into the screening room.

The feedback we received pointed to some confusion regarding the features in the screening room and problematic copy on the home page.

Testing brought to the fore how important the iterative process is in making a usercentric, high quality design. We took what we learned and went back into Omnigraffle to reimagine the homepage, tweak the layout of the screening room, and made changes to the invite process.