Netflix (& Recommend)

Designing a social function for those that binge.

Introduction

If you watched the 2015 Emmy’s, you probably saw Andy Samberg lock himself away in a bunker to catch up with the many shows that are acclaimed as must-see TV. When you click on the broad “TV” category on Netflix, you can see where that bunker was needed as hundreds of show cards populate the screen. With more and more shows being added (including Netflix original series), the question may be less of what shows does Netflix have to what shows a user should bother with.

My team was tasked with finding the source of what drove people to the shows they do end up watching, and how Netflix can create a feature to expand on that. After user research, data analysis, usability testing, and iteration, my team came to the conclusion that Netflix users care about what their friends watch. Therefore, when we found Netflix’s hidden “Recommend” function in their native app, we chose to bring it to the forefront as incorporate it into their web platform.

Survey and Data Analysis

Plus, when demographics aren’t king (or queen).

Visual representation of our survey data I created in Sketch3.

We sent out our survey (which you can view here) to find out about viewer demographics and their behavior. As you can see with the graph to the left, friends were the driving factor in how people chose a show. We also found that when it came to media engagement, many of our younger (20s) respondents reported enjoying texting their friends during and after watching a show. Nearly everyone reported that they watched streaming services alone sometimes, too.

I think one mistake our team made was the phrasing of the question “Would you use a social feature?”. I think that was left a little vague on our end, because “social” encompasses a lot. But, vague question or not, nearly 70% of people weren’t interested in the kind of feature we were tasked to create. While a tough pill to swallow, it just meant we needed to really re-think what “social” meant, and also how to incorporate friend suggestions.

Demographics + Persona

The most interesting finding, in my opinion, was that almost all behavior was pretty correlated even when you took into account the age, sex, location, and job of the respondent. There were some small differences, such as (unsurprisingly) college students reporting streaming daily while working professionals streamed weekly. But, at the end of the day, people were deriving their suggestions from their friends first, whether it be a 20 year old student or a 50 year old executive. Even Netflix’s VP of Product Innovation, Todd Yellin, announced that Netflix was more or less disregarding “almost useless” data on demographics as it didn’t correlate to user behavior.

Our persona uniquely doesn’t have set demographics — Netflix themselves write off demographic research now stating that young men watch “Dance Moms” and grandma’s watch gritty dramas.

Competitor and Company Research

While we were waiting for survey results, we started to do some competitive and comparative analysis. Netflix definitely had a large portion of the audience already, but it was interesting to see where other sites were trying to incorporate social and that Netflix essentially had ignored it. However, the social features that were used on sites like Hulu weren’t often used. On popular TV shows, the counts for sending links or sharing on Facebook were sometimes only in the double-digits, which is a low number compared to the 9 million people on the site. Comparing Netflix to their competitors was really helpful in seeing how the same content (video) could be presented differently and helped us come up with ideas to later confirm or reject with user research and interviews.

We also had received the results from our survey that most people were watching on their TV or laptop. However, we did see that Netflix was reporting an increasing number of people going to the mobile app. We wanted to keep that in mind when creating a feature because we wanted our feature to be applicable across all platforms. We didn’t want to develop something that people loved on their laptop but lost if they made the hop to watching primarily on their phone.

Brainstorming Features + Interviews

Feature ideas in order: Content creation, gamify, notifications, co-watch, real time watching, social media sharing, chat, following, live communication, voting, friend-generated content, annotate, more content, viewing history, and recommendations.

Before getting our survey results, we brainstormed feature ideas. We derived them from gaps Netflix seemed to have compared to competitors (like seeing friend activity) or that none of the platforms had but other social services did. After getting the survey results, we did another round of brainstorming to address the results and pain points people reported. We used affinity mapping to group similar ideas, too.

What we did then was make a column titled “Data/Survey”. If our survey data rejected that feature, we would cross it off. If we felt like the user survey supported an idea, we filled it in.

Some feature ideas weren’t supported or rejected outright and needed to be explored further. So, we conducted four user interviews of people who fit the behavioral patterns of the average survey respondent. I personally interviewed a senior in college and a 50-year old banker (again, we found demographics do not affect behavior, so we had a range). One of our original ideas had been to do a Facebook-type feed of activity — what people were watching and commenting on. However, both of my interview subjects were really uncomfortable with people seeing their watching history, but they were interested in seeing what their friends were watching.

After the group got back together, we found that all of us had received feedback that people would love friend-generated content, and had said things like they would love to send or receive shows to each other. There was also a strong want for more content (more trailers, specifically) and notifications. So, with that in mind, we defined our MVP.

Recommend with Friends

Our MVP

We decided that based on our research and user interviews that we would incorporate a recommend feature where a user could send media recommendations to their friends. Also, the receiver would manage those recommendations in a new queue that is similar to the current “My List” feature that Netflix has.

In user interviews, people had stated that Netflix’s site design was their favorite of the streaming services they subscribed to, so we wanted to make sure we kept the aesthetic and current information hierarchy in place. Our goal was to make this new feature seem as natural as possible in an existing framework.

Using Existing Frameworks

The show page for Gotham. You can add to My List (which in the app, will be added to a carousel on the homepage, but in the website would have it’s own separate section). You can also recommend the show or just start watching.

Interestingly, Netflix already does have a “Recommend” feature, but it’s only in the “Show Page” part of the app and it’s not incorporated to the website at all. By tapping on “Recommend” currently, it will ask a user to connect their Facebook account and then allows them to send the recommendation to Facebook friends. When someone receives that recommendation, they see a little notification with the image of the show, which if they click brings them to the “Show Page” to watch, add, or also recommend the show. It’s not a bad set-up, but we wanted to include a recommend button in more places. Also, we wanted users to be able to quickly manage their recommendations within a list instead of having to click on each recommendation and then add to My List. We noticed that the existing “My List” feature was also only in a long carousel on the app homepage. We user tested three people by asking them to find a show (that we knew was about 3/4’s into the carousel) and they gave up on scrolling through titles pretty quickly and said they’d use the search bar before going through so many titles. For that reason, we found the current “My List” carousel to not be ideal and needing it’s own separate area on the app, where we would also incorporate the new Recommendation List.

Building and Iterating

Our team did a round of ‘design studio’, where we conceptualized the look of both the web and app screens. We digitized our sketches in Balsamiq to do user testing.

I personally wanted the feedback of working professionals, so I took our wire frames to a “Los Angeles User Experience” Meetup group peer-to-peer feedback event. I presented what we had while also providing some user research. Right away, I got feedback that was essential to designing a better product. Someone pointed out that we had a lot of buttons in our design. There was a exit, accept, and reject button in a small area. That same person pointed out revealing options would help keep the simplistic design that Netflix has. This led us to re-design the screen so users would slide the title to the left to add or pass on the recommendation.

Incorporating the design changes. The left shows that you can multi-add to list or pass like a Google mailbox. The right shows how you can slide, instead of use buttons, to add or pass on a recommendation.

I also was asked what would happen if multiple people recommended a title, which absolutely would happen when a show becomes popular. Initially, we just had the name, which could quickly become problematic to list out a bunch of names. Since users already have to connect to Facebook, we decided to re-design so that the profile pictures show up at the bottom of a recommendation and would just stack as people continued to recommend the show. We derived that design from the current Facebook messenger app.

User Testing

During our user testing, we had people run through a scenario where they were to recommend a show to their friend. We also had people run through a different scenario where they were receiving a recommendation and did want to add it to their list. One thing I noticed was people were taking a bit to find the feature, and they had been specifically tasked to share it. It worried me that someone not explicitly aware they could do that would never see the new feature. I told my team we should incorporate some sort of on-boarding. However, the good news was once people found the My List and My Recommendation page, they easily navigated it. My favorite quote of the user testing was:

I literally didn’t even have to think.

That was perfect to hear, because it meant it was seamlessly in the design once someone knew where to go. Incorporating on-boarding was the next step. We took the existing notification and made it so the first time someone uses the app after the new feature it added, they will get a notification that tells them there is a recommend button and what it looks like. Also, on the hamburger menu, we made red notification dots by the My List and Recommendations. It gets the attention of the user using color and was inspiration we derived from how many apps, like Snapchat, don’t have it go away until you tap the new feature. We had a user say she “has to clear notifications” mentally, so she would definitely tap on it to at least clear it, but then would be taken to the new feature.

Prototype

The App

[Will have to locally host the Axure file, for now show on local drive]

The new My List page on the app.

Our team used a mix of Sketch3 and Axure to create the native app prototype. Axure allowed the animations of being able to swipe, as well as clearing notifications when they had been tapped. Like stated before, we wanted to add more options of where you can recommend from, so we added the recommend icon to the video player itself.

The Website

While most of our process was focusing on the native app, adding the feature to the website had to also be taken into consideration. We added the same on-boarding to the website notification system. Thankfully, the web version already has a separate, grid-view My List page, so we just added the My Recommendation page as an option to toggle to in the same space. We added the recommend feature to the video player like the app, but we also incorporated it into the title cards right above the “Add to List” icon. By clicking it, a user then expands the same Facebook integration that the app has.

You can view the web prototype here.

Next Steps

After prototyping both the app and the website, there were a few things that we would want to iterate and user test further.

First, the My List screen and the My Recommendations screen on the app have different views. The My List is a grid, like it is on the website, and the Recommendations are cards you can slide. I would A/B test to see if people want to toggle between views or just prefer one all together. If people didn’t like the card view compared to the grid, we would have to redesign the adding and passing functionality to the My Recommendation page, as it wouldn’t be able to slide anymore. One idea would be to hold the screen and the title slides would shake like when one deletes an app from the iPhone.

Also, we had not taken into account the keyboard size when you recommend in the app. Our prototype clicks through selecting someone, but in real life you would need to type and that could take up the full landscape screen. We would need to test to see if people want an additional step to stay in landscape or would be okay with flipping their phone vertically quickly to suggest to friends.

In our prototype, we forgot to add the keyboard! Would need to redesign to see how much space it takes and if another screen would be needed.

I also would like to incorporate hot spots to see if people are clicking on the right icons or sort of guessing around. It would help validate the icon itself as well as the placement.

Final Thoughts

Overall, I felt that our team created a feature for a site that is already the king of streaming content and has designed a site that people already love. Incorporating a new feature without disrupting the existing design was challenging but helped focus the scope of our feature. The user needs were to get suggestions from friends, but not to where they had to share personal viewing information. By keeping the recommendations internal and private, we were able to make it more comfortable for users to get on board. By taking the recommendations out of staying in the notification tab and bringing them into their own list, a user is now able to manage recommendations at once without it disrupting the content they already approved for their queue.

[ Stats/testing on why we placed things where we did ]

[ Business benefits ]

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.