Redesign of the Chrome extension for a more user-centric
experience amidst COVID-19 outbreak
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
Design Sprint Timeline
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.
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.
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.
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.
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
Allow users to have 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.
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
Hi-Fi
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.
Before:
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.
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.
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.
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.
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.
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.
Design System
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 2024