Netflix Party Redesign Case Study  

Netflix Party first gained traction during quarantine due to the outbreak of COVID-19. As a result of having to stay home, Netflix Party gained popularity as users try to find a way to still stay connected. As a part of Design Interactive, our team redesigned this chrome extension to be more user friendly. At the end of our sprint, we were given the opportunity to present our final product to a panel of industry professionals during Design Interactive‘s Final Presentation Day. We were awarded Best Visual Design, Most Customer-Centric Experience, and we were runner up for the Audience Choice Award.

My Role:

Lead UX Research, UX Design

Time Frame: 

Six weeks (April - June 2020) 

Team Members: 

Maysnow Liu, Cheryl Cai, Ying Liu

Challenge Statement 

Despite its growing popularity and user base, this chrome extension has a rating of fewer than 3 stars, with many users expressing their frustration with the overall experience. Our team wanted to break this down – how can we improve the user experience of Netflix Party?

Our Solution 

We have observed that Netflix Party has many reviews from users who struggle with the user experience, so we wanted to implement more features and expand on current ones to create a more interactive and user-centric experience.

Overview of Current Netflix Party UI

ezgif.com-gif-maker

Design Sprint Timeline

sprint-timeline-1

User Research

User Interviews

We conducted a total of 8 user interviews. We broke down our interviews into —

1.  General questions about their use of Netflix Party, from their motivations to the way Netflix Party fits into their overall experience and user goals 

2. We asked users to replicate the process of starting a party, allowing us to observe their behaviors and instincts in a realistic setting

3. Follow up questions about that process and insights about the their experience, as well as address how they feel about certain features

Video & Audio

Users wanted a personal experience to interact with friends amidst social distancing orders. Why?

Users appreciated seeing and listening to friends face-to-face for an instantaneous interaction. They desired a more meaningful interaction among friends to communicate through the extension.

"I wish it had more features like: video feature so i can stream my own expression because I want to see their reaction too."

Reactions

Users wanted a quick and easy way to express themselves. Why?

While watching a movie, it is instinctive for users to have reactions to different scenes. However, because the scenes are fleeting, it is not convenient or realistic for users to convey all of these expressions. Users wanted a quick way to express their feelings about what was happening in the movie/show and continue on with the movie without having to dedicate time and getting distracted.

"I want to see other people's reactions over the extension but if you could have like Facebook implements when you're steaming live with reactions."

Starting A Party

Users wanted a clearer way to create a party link and join a party. Why?

Users currently find it confusing to navigate this extension when they are unable to start and join a party efficiently— a multi-click process has proven to be difficult for efficient functionality. Introducing a centralized homepage where users can navigate to create and join parties using links allows users to find their options clearly and join from within the app, rather than from their browser.

"When someone sends you the link to start a Netflix Party, it isn't clear that you have to click on the NP icon first to be able to join."

Pause Alert

Users wanted a caution statement before pausing their screens to avoid having all other screens paused, leading to potential confusion and embarrassment. Why?

Often times while watching a movie or show, it is common for users to pause the show (e.g. take a bathroom break). However, on a shared streaming platform like Netflix Party, it can cause confusion on one end, and embarrassment on the other, if a user pauses the show for everybody. This can be avoided with a simple warning that the user views before pausing the screen on all ends.

"It makes sense that when one person pauses, it pauses for everyone. But I could have used a warning because I accidentally stopped the lecture for my entire class and I felt really bad and embarrassed."

Navigation

Users wanted the ability to be able to view screens in different sizes according to their likings. Why? 

Users found the responsiveness for Netflix Party to be confusing. They expressed frustration that the chat bar reduced the size of the video screen and that there was no clear option to view the show in full-screen or minimize the chatroom.

"There is no way to minimize the Netflix Party chat window and it's very annoying especially if you have limited screen space."

Profile Change

Users wanted a more personalized profile with their own pictures. Why? 

The current options that Netflix Party offers for profile pictures are minimal and generic. Users wished for the option to use their own pictures instead to have the ability to customize their experience.

"I wish I could add my own profile picture instead of having to choose between the ones Netflix Party has."

Surveys

We sent out surveys to better understand our users— questions ranged from their age and current life stage, to who they usually use Netflix Party with, to any additional features they would like to see. Of the 50 responses we received, a large majority consisted of college students. We used the survey responses, as well as the context from our user interviews, to guide our affinity mapping.

charts
Screen-Shot-2020-08-24-at-5.49.51-PM

Literature Review

During user interviews and survey responses, we found that a lot of users wanted a reaction feature. Before diving into the creation of this feature, we conducted and explored the research behind existing versions of the reaction feature.

One of the interviewee's mentioned they appreciated the reaction feature that Facebook implemented. Because she specifically mentioned Facebook, we reviewed past case studies and literature reviews on Facebook’s reaction feature and researched into universal emotions to inform the decisions behind creating our feature. From diving into the Facebook reaction studies, we found that reactions are new ways to measure sentiment and to gain a better understanding of users. To be effective, reactions should be universally understood, widely used, and expressive. In order to understand which reactions should be used, we researched into what the universal emotions were, and found seven — happiness, sadness, disgust, fear, anger, contempt, surprise. We wanted our reaction emoticons to capture all aspects of these universal emotions.

Group-1

Persona 

After collecting data from our survey and interviews, we chose to make our persona a female college student, around the age of 18-22 who uses Netflix party to socialize. We chose TikTok as one of the brands and influencers because multiple people mentioned that they found out about Netflix Party through social media platforms.

NetflixPartyUserPersona-3

Ideation

Affinity Mapping

After gathering user insights, we brainstormed solutions through affinity mapping on Figma by individually writing down all of our findings into virtual ‘post-its’. We then consolidated our ideas, categorized them, and reorganized any repeated or redundant post-its. After spending time discussing each category we ‘voted’ on key features by adding green stickers.

MacBook-1

Pain Points

After closer analysis of the pain points in our affinity mapping, we identified six features to redesign or add to improve the experience of the existing product.

1. Starting A Party

Redesign how to start a party for a more user friendly and personalized experience.

2. Custom Sidebar

Create a clear way for users to minimize sidebar options to display different features.

3. Video & Audio Calling

Allow users to have a live-time experience through video calling with mute options.

4. Live Reaction

Allow users to quickly express their feelings during their party.

5. Pause Alert

Integrate a warning for users when pausing the video for all parties.

6. Profile Picture

Users need more options including uploading their own images.

Sketches

During the second week we each made rough sketches based off of the features we highlighted from our affinity map. Here are our sketches (in order) mine, Cheryl, Ying, and Maysnow.

MacBook-2

Wireframes

After forming a clear idea about the features we wanted to include, we laid out all our ideas and were able to work through the technicalities. The following week we started finalizing edits and refining the features.

Lo-Fi 

Minimizing-Sidebar
Minimize-Video

Mid-Fi

General-Wireframe
Minimize-Sidebar-Iteration

Our Solutions

1. Starting A Party

We simplified the steps and created a more user friendly experience. In the redesign, the link sharing page serves as the landing page. After a user test, we decided to add a preview button that allows users to have a glimpse at what they are watching and how large their party is.

Screen-Recording-2020-08-27-at-01.33.00-AM

Before

Redesigned: 

Frame-10-1

2. Custom Sidebar & Video Calling

We designed quite a few micro interactions as part of customizing the sidebar. The users would now be able to minimize and expand the chat box and video call to fit their needs.

Through our research, we also found that users’ greatest pain point was not being able to have a more personal interaction. We conceptualized and implemented a video chat feature so that users can physically see and speak with their friends while simultaneously streaming vidoes. We utilized the space at the top of the screen for chat notifications and users video preview when the sidebar is minimized. We included personal video and mute buttons for customization. This project is prototyped for a 2 way video but we decided to keep the max video screens to 4 people to maximize functionality.

Before

Iterations: 

Frame-11

Minimizing Video & Chat 

We discovered that the users struggled with finding the show chat feature so we redesigned the chatroom feature to be visibly available. We also expanded the videos to compensate for the extra space.

Screen-Recording-2020-08-27-at-01.25.05-AM
Screen-Shot-2020-08-27-at-12.35.12-AM
Screen-Shot-2020-08-27-at-12.33.28-AM
Screen-Recording-2020-08-27-at-01.29.47-AM

Minimizing Sidebar & Notifications 

Currently, Netflix Party has an option to hide the chat through the initial steps of activating the party, however, it is drastically overlooked by many users. We redesigned to incorporate a minimize sidebar icon in Netflix itself. Once minimized, it would prompt to show notifications and the user’s personal video on the black bar above the movie.

Screen-Shot-2020-08-27-at-12.50.36-AM
Screen-Shot-2020-08-27-at-12.50.00-AM

3. Live Reactions

To better understand reactions to implement, we did a literature review and explored universal emotions and Facebook’s reactions. We custom designed our own reactions in Adobe Illustrator.

Group-1
Screen-Recording-2020-08-27-at-01.23.05-AM
Screen-Recording-2020-08-27-at-01.20.50-AM

4. Pause Alert

When the user pauses, a reminder appears with options to close the box and continue or pause the video. A ‘don’t show again’ option is available once users feel more comfortable with the extension.

Screen-Shot-2020-08-27-at-1.08.25-AM

5. Profile Change

Profile icons and nickname changes were redesigned to minimize the two step process into one step for ease and efficiency. Users can also upload their own profile pictures.

Screen-Recording-2020-08-27-at-01.36.47-AM

Design System

Screen-Shot-2020-08-27-at-1.41.39-AM

What I learned...

Future Improvements 

  • Prototyping in Figma! 

  • Working collaborately while remote

  • Finding eachother's strengths and learning 

  • Include a user onboarding process 

  • Expanding to other streaming platforms

  • Designing for a mobile app

© Alekhya Yallapragada 2020