Netflix App Design

 
Netflix_landing.png
 
 

Brief

This project was developed for one of my UX design capstone courses. The initial goal of this project was designing new social features that embed within the mobile app of an existing product. As a big fan of Netflix, I challenged myself to rethink the social experience of the Netflix app.

Team: Ming An - UX Designer & Researcher

Duration: Nov 2017, 2 Weeks

Tools: Sketch, Principle, InVision, Photoshop, Illustrator, Premier, Pen, and Paper

 
 
 

Secondary Research

I started with reviewing articles, statistics, and reports to gain pieces of knowledge to understand the context and define problems and opportunities.

Failures

I found that Netflix has tried to go after social several times, and none of them worked well. (Source links: Netflix SocialFacebook Integration.)

Neil Hunt, former CPO at Netflix, stated “We have played with social components for a long time. We have had three major attempts at it, and none of them have worked well, so we’ve retired them all.”

Why did they fail?

One of the attempts was to collaborate with Facebook. The Facebook integration was failed because users don’t want the watching progress to be updated automatically and publicly to their profile.

Netflix Facebook Sharing Integration (2013)

Netflix Facebook Sharing Integration (2013)

The main reason Netflix tried to go after social is that they know users don’t want to spend too much time looking for something to watch — that’s why a proper recommendation system is super important.

In 2017, Netflix swapped out the star rating system for a thumbs-up or thumbs-down system. They explained the previous star-rating system was confusing to customers. Many people didn’t like the new system and thought it is totally nonsensical and entirely unhelpful.

  • The star rating system represents how all other users rated that content. There are numerous online services still using the rating system — Amazon, IMDb, Yelp, etc.

  • Thumb ratings signify the possibility that a user will enjoy a title based on algorithms. It is no longer possible to determine how fellow users feel about a show.

 
2Artboard 12@portfolio.png
 

As Neil Hunt said, “It’s unfortunate because I think there’s a lot of value in supplementing the algorithmic suggestions with personal suggestions.

Instead of entirely banning users to discover new content through personal suggestions - how might we improve personal suggestions and provide a more human way to share?

 
 
 

Post-Series Depression

Of the 2,000 people surveyed by Patient.info, 34% admit to experiencing mental health issues after finishing a TV series including loneliness, anxiety, and depression. 

(Source link)

2Artboard 2 copy@portfolio.png
 
 
 

I researched more around the topic and discovered that sharing and swapping thoughts with others about the show helps to cope with the feelings of emptiness, depression, or anxiety.

But it’s impossible to discuss shows with fellow fans on Netflix and users have to proceed to other platforms like Reddit to do so.

Users need a quality environment to share their thoughts within the app.

2Artboard 10@portfolio.png
 
 
 

Usage Gap

50% of Netflix users watch video on their smartphones, but only 10% of the total streaming load is sent to smartphones. (Netflix’s VP talked in the Mobile World Congress.)

There is a vast gap between how many Netflix users use mobile devices to watch and how much time they spend on mobile devices watching Netflix.

2Artboard 14@portfolio.png
 
 

Opportunity

By 2019, the average number of mobile YouTube video views per day is 1,000,000,000. More than 50% of YouTube views are coming from mobile devices, and the average mobile viewing session lasts more than 40 minutes. - (Youtube in Numbers)

People are getting more used to watch videos on their mobile devices. It's a great opportunity to increase app engagement and user retention by offering a more pleasant mobile watching experience.

2Artboard 13@portfolio.png
 
 
 

Understanding the People

Interview

I went to a local shopping mall on a Black Friday and interviewed 30 people. 14 of interviewees were Netflix users who either owned a Netflix account or shared with family or friends. I wanted to understand how did users use the Netflix app and how did Netflix influence their social life.

I met Reggie outside of a shoe store. He was trying to login Netflix while waiting for his wife shopping

Notes from interviews

 

Online Survey

I conducted an online survey to collect more information on users’ pain points and habits. Out of 84 participants, 70 are Netflix subscribers, and only 21 of them watch Netflix on their mobile devices.

copy of [Addon Advanced summary] Netflix Experience - Wed Nov 29 2017.png
 

Key takeaways:

  1. Netflix users watch on their mobile devices in certain circumstances: traveling, commuting, before bedtime, or when they don’t have access to computers/TVs.

  2. Users prefer to watch short-form content for a short period on mobile. They watch on their smartphones 1–2 times a day for less than 40 minutes.

  3. Users enjoy discussing what they are watching on Netflix with other people. It is an excellent way to socialize and to discover new content.

  4. Screen size, battery life, and mobile data limit are the main reasons that stop users from watching Netflix on mobile.

 
 
 

Competitors Analysis

I looked into some of the most popular video watching platforms.

  • Hulu, as a direct competitor, has a very similar app interface with the Netflix app. Both of them used simple elements to reduce unwanted interpretations and ensured an enjoyable watching experience. I wanted to make sure that my new design would serve the same purpose.

  • Facebook Video and Vimeo encouraged users to be more social. They used similar design patterns and features that allowed users to comment and interact with others while watching.

  • Amazon Prime allowed users to rate and review shows. The app used many same design patterns with the Amazon shopping app.

  • I also studied the IMDb app to see the design patterns of its core features — review and discover.

From left to right: Hulu, Facebook Video, Vimeo, Amazon Prime, IMDb (Late 2017)

 

Empathy Map

I organized the information from the research and translated them into categories to understand user habits and behaviors. Then I rearranged the sticky notes by putting them into groups and looking for patterns. It helped me to synthesize my research findings and arrive at a set of insights.

IMG_9710.JPG
 
 
 

Insight

2Artboard 11@portfolio.png

The Spirit of Sharing

Netflix users like to share their Netflix experience because they want others to enjoy the shows as much as they did and synchronize and feel in the same way.

 
 
Netflix_problem-16.png

Self-expression

Netflix users want to express their opinions, be more engaged, and have power over the content on Netflix.

 
 
Netflix_problem-15.png

Mobile Experience

When it comes to watching on smartphones, Netflix users prefer to view short-form content for filling time in certain circumstances such as commuting, waiting, traveling, etc.

 

Persona

Netflix_Persona 1.1.png
 

HMW

I translated the insights to 3 needs of users and later 3 how might we questions.

  1. How might we help Jen to be more engaged in Netflix by expressing her opinions and allowing her to power over the content?

  2. How might we help Jen to share her Netflix experience with friends and let them synchronize with her and feel the same way?

  3. How might we help Jen to make her experience of watching on mobile devices be more enjoyable and also compatible with short-time watching?

I explored and brainstormed for solutions based on these HMW questions. I came up with 30+ ideas and used the IBM Prioritization Grid method to evaluate and prioritize them by focusing on impact and feasibility.

 

Information Architecture

  • App Map helped me to understand the overall information architecture of the app and guided me to better install the new features with the existing design.

  • User Flow helped me to think and identify better ways for guiding users to approach new features.

App Map

User Flow

 
 
 

Design Critique

I did a quick design critique of the Netflix app (Late 2017) before dived into the design. It helped me to build a deeper understanding of the design rationale behind the app.

Netflix is the world’s leading internet entertainment service. Members can watch as much as they want, anytime, anywhere, on nearly any Internet-connected screen, all without commercials or commitments. The app does a great job of persuading users to discover and watch new episodes.

  • The home screen uses almost half of the screen to promote the featured show with a CTA “Watch Now.” The rest of the screen is divided into categories — Netflix Originals, Trending Now, My List, etc. The covers are listed horizontally, which represent the experience of browsing through shelves in your favorite DVD store. It’s important for Netflix to get users’ attention quickly because users don’t want to spend too much time looking for something to watch. Netflix uses A/B testing to figure out what users were looking for by offering different cover art. The black background is a nice visual trick that makes it easy for users to browse cover art.

  • While clicking on the hamburger button, the sidebar will pop out from the left. Since the main task for users to accomplish would be watching a show or movie, the side menu is the go-to place for users to perform tasks that are not related to the watching. All members of a household can create their own custom profile. The notification center also serves the purpose of helping users to discover. They can simply click and open the video detail screen.

  • After users select and click on a show or movie on the home screen, instead of playing, the cover will expand slightly, and a new screen will appear after the micro-animation. The video detail screen shows the details of the last episode users have seen and other related information. Below the cover, places the big and red play/resume button to grab users’ attention. Users can also rate, share, or download episodes with icons that are easy to understand.

  • The search button on the home screen takes users to a new screen with the virtual keyboard pops up automatically. While typing on the search bar, the app will feed suggestions of possible content users might be looking for. Covers are displayed as results instead of titles which shows high consistency.

The app is well designed and extremely user-friendly. It offers easy access for users to discover something new and start to binge watch with “Auto-play to next episode” and “Skip Intro.” Netflix puts a lot of efforts into improving app engagement and user retention. The cost of Netflix also plays a key role in why users choose the service.

 
Original design

Original design

 
 

Sketch

 

Wireframe

I developed wireframes to focus on the overall structure and components before considering color or font.

 

UI Kit

The Netflix design system is not publicly available. I screenshotted the screens and recreated the icons and other elements.

 

Detailed Design

 
 
 

Netflix Community

I learned from research that it’s crucial for users to share their Netflix experiences with other people and discuss shows with fellow fans. But it’s impossible to do so on Netflix and users have to leave and proceed to other platforms.

Proposed design

Proposed design

  • It’s important to mention that I didn’t want Netflix to be the next social network where users share selfies and holiday pictures. The community should be in favor of human and emotional connection among fans while centered on discussion and exploration.

  • Netflix Community allows users to discuss shows and discover new things. In the beginning, users can choose to join TV show themed groups based on personal viewing history. The default main screen will display all the popular posts from the groups. Unlike other social media platforms, Netflix community builds a fanbase for users to meet fellow fans who share the same taste.

  • I decided to add another entrance to the Netflix community because research indicated that users can experience mental health issues after completing a TV series. After finishing an episode, users can either do nothing and wait for auto-playing to next episode, or view and click the post to join the discussion. Here I decided to show only one of the most relevant posts from the community. One choice makes it easier and quicker for users to make a decision and increase the possibility to participate.

 

Proposed design

 
 

Personalized Profile

Instead of letting users click on avatars to open their profiles like the old way, which can cause confusion, I created a new sub-section called My Profile inside the sidebar. The newly designed profile provides new TV show themed avatars to personalize their profile. It is a great way for users to represent their personality and connect with their favorite characters. Interestingly, Netflix rolled out new profile avatars in 2018.

Proposed design

Proposed design

  • I learned from research that users want to express themselves but not in a public way. The user profile remains anonymous, and users can show their location and write a short bio only if they want to.

  • From interviews, Netflix users mentioned Netflix is a great conversation topic, and it’s much easier to discover new content from someone you know who shares a similar taste. Users can list their top 3 favorite shows in profile and also create playlists/collections to fully showcase their favorites and share personal Netflix experiences.

  • Users can find and follow friends through the Netflix community and public playlists to see what they’re watching and enjoying.

 

Proposed design

 
 

Better Review

It’s critical for Netflix users to express opinions, be more engaged, and have power over the content on Netflix. I explored options to improve personal suggestions and provide a more human way to review.

Proposed design

Proposed design

  • One big issue I discovered with the new thumb system is “Good is not the same as Great.” As one post indicated "there is now absolutely no difference between 'I guess I didn't hate this movie' and 'This is the greatest movie I've ever seen in my life, and I want to see more like it.'"

  • That’s why I added the three faces — “Love,” “Ok,“ and “Funny,“ like the Facebook Reactions, provide a more nuanced way for users to express how they felt about a show or movie. I identified they are the most common emotions towards a show or movie by going to Reddit, IMDb, and some other platforms to review posts.

  • I learned from research that sometimes users will have to share inevitable “spoilers“ to express their opinions. Users can use the “Contain Spoilers” feature to hide the review from public view, and others need to click to make it visible.

 
Proposed design

Proposed design

 
 

Other features I explored

Netflix Vote

  • Netflix will help fans to stay informed and allow them to vote for what shows are coming to Netflix every month.

Short series for the on-the-go

  • When it comes to watching on smartphones, Netflix users prefer to watch short-form content for filling their time and in certain circumstances such as commuting, waiting, traveling.

  • Users hold their phones vertically about 94% of the time. And not many people enjoy making an effort to turn their phone 90 degrees and switching their phones back and forth. The app will provide exclusive mini-series for users to watch on-the-go.

  • Window mode viewing allows users to discuss and leave comments for episodes while watching, and learn more interesting behind-the-scenes stories. I used the same design patterns from Facebook Video and Vimeo.

 
Netflix_Others.png
 
 

Usability Testing

Round 1: Open-Ended Test (Failed)

I created an online testing session by using UserTesting.com and recruited 2 participants. I provided participants with an InVision prototype with 3 steps of tasks.

UserTesting Video 2316141A   Needs Assessment (1).png

The first round test didn’t work as I expect. I tried to use open-ended test to figure out how users think and interact with the app in general. But it turned out that they spent most of the time hanging around the home screen and barely touched the sidebar, where contains most of the new features. Instead, they tried to open content on the home screen and watch videos. I learned that it was an issue of having a prototype being too realistic, and I should have demonstrated at the beginning that it was not functional. The test did not help test the prototype.

 

Round 2: Specific tasks test

After the first round of failure, I decided to do another one with more specific tasks. The test was conducted with 3 participants in person.

  1. I introduced the participants to the project and explained the background of the project.

  2. I asked them to play with the app for several minutes and asked some questions to get to know about their familiarity with mobile technology.

  3. I provided them a scenario and asked them to accomplish 4 tasks based on the main new features.

I tried to avoid leading language for some of the tasks because I want to test both find-ability and flows of new features. I also encouraged them to think out loud during the tests.

Finding

Only 1 participant had used the Netflix app before. 2 participants finished all the tasks.

  • Participant #1 failed the first task because she thought it was difficult to locate someone on the profile page only through follower and following lists.

  • Participant #2 said he was not sure about the Face feature because he still going to express his feelings in his review.

2 participants tried to tap on the upper area of “Notifications” instead of the thumbnail or title of the new notification.

Design Mandates

Participant 1 failed the first task because she thought it was difficult to locate someone on the profile page only through follower and following lists. I redesigned the search screen to allow users to search for other users.

 
Design mandates_1
 

2 participants tried to tap on the upper area of “Notifications” instead of the thumbnail or title of the new notification. My solution was to make the upper area of Notifications tappable.

 
Design mandates_2
 
 

Takeaways

Constraints can be the catalyst that makes the design.

The project taught me how to design with a number of constraints. With the constraints in mind, I forced myself to think from Netflix’s perspective and focused on improving the user experience of the existing product. It was a bit of a challenge to build new things and maintain the same design language at the same time. But I’m happy with the outcome because all the participants were able to easily navigate the new features.

We are not users.

It’s easy to fall into the trap of designing and developing features that based on our own experiences and needs. Before I start this project, I was already knowledgeable about Netflix and the app. To truly understand my users, I forced myself to approach and discover the actual needs with a fresh mind and kept my own preconceptions from influencing the findings.

If I could take this project further, I would like to apply the features for other Netflix platforms, such as desktop and TV, to challenge myself and practice my design skills.

 
 

Thank you for reading!