User-centered Design Approach for an Interactive and Personal Experience | Case Study
Role
Lead UX Research, UI/UX Design
Role
Me + 3 Design Interactive UX Cohort members
Time
6 weeks (May - Jun 2020)
Tools + Methods
Figma, Usability Testing, Prototyping, Wireframing
Background
Netflix Party came to our attention because of the traction it was gaining from people attempting to maintain social interactions while sheltering in place during the COVID-19 pandemic. Our team exercised an exploratory case study to conduct research behind this chrome extension and redesigned it to be more user-friendly. We presented our product to a panel of industry professionals during the Presentation Day held by our school's UX consultancy club, Design Interactive. We were awarded Best Visual Design, Most Customer-Centric Experience, and the runner-up for Audience Choice Award.
The Challenge
The Chrome extension Netflix Party helps its users remain social during the pandemic. Despite its growing popularity and user base, it has a rating of fewer than 3 stars. Many users express frustration with the overall experience. Our team broke this down — how can Netflix Party be improved to create a better user experience?
The Solution
Through our research, we 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.
The Current Experience
Netflix Party is a Google Chrome extension that allows Netflix users to watch movies/shows in sync with their friends while chatting. The current ratings highlight a need for user-centered design solutions.
Design Process Timeline
Surveys
First, to gain a general understanding of our users, we created and distributed surveys and received a total of 50 responses. Our survey covered the following topics:
• Demographics
• Netflix Party usage
• Additional requested features
• Likert scales
From our results, we found that 77% of our respondents would prefer additional features.
In addition, 90% of our respondents found the pause feature useful, while only 72% found the chat feature to be useful. Nearly all respondents used it as a way to maintain their social lives.
Individual Interviews
We then conducted semi-structured user interviews with 8 of our survey respondents. We wanted to dive deeper into the previous questions and broke down our interview protocol into:
Usage and Motivations
E.g. Why do you use Netflix Party? Who do you usually use it with?
Observing the User Flow
E.g. Could you share your screen and show me how you would usually begin a party?
Specific Features and Follow-ups
E.g. Is there any way that Netflix Party isn't currently satisfying your needs? If so, in what aspect and why?
Interview Insights
From our interviews, we were able to uncover multiple insights about the user experience, how it could be improved, and feelings about certain features and aspects of Netflix Party.
Video Chat + Audio:
“I don’t like that you can’t video chat so I might as well use messenger, or watch a movie through Zoom call. It’s annoying to keep texting while watching a movie."
Pause Alert:
“ ... I could have used a warning because I accidentally stopped the lecture for my entire class and I felt really bad and embarrassed.”
Navigation:
“There is no way to minimize the chat window and it is very annoying, especially if you have limited screen space."
Profile Change:
“I wish I could add my own profile picture instead of choosing between the ones Netflix Party has.”
Reactions:
“I wish Netflix Party would implement emojis or reactions so it's quick instead of having to type in chat.”
Starting a Party:
“When someone sends you a link to start a party, it isn’t clear that you have to click on the NP icon first."
User Personas
We created user personas to consolidate our target audience's needs, goals, and behavior based on what we observed from the previous surveys and interviews.
Competitive Analysis
In the previous steps, we found that many users wanted a reaction feature. One of our interview participants mentioned the idea of the feature, specifically referring to Facebook’s reactions. Before creating this, we read articles from Buffer Blog and Wired on Facebook’s feature (pictured below):
Our research relayed 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. We researched what the universal emotions were, and found seven — happiness, sadness, disgust, fear, anger, contempt, and surprise.
Affinity Diagrams
We then brainstormed solutions by individually writing our findings into virtual ‘post-its’ and then removing redundant ones. After discussing each category, we ‘voted’ on key features to proceed with. Time was our biggest constraint that we kept in mind when choosing.
Points of Improvement
After analyzing our users’ pain points, we identified six overarching themes and brainstormed ideas for targeting each theme.
Lacking a video chat setting.
No warnings or alerts before pausing.
• Video chat feature, Personal video and mute buttons
• Warning when pausing , ‘don’t show again’ option
Unresponsive interface.
No options for profile customization.
• Minimize/Expand the chatbox and video call as needed, Visible chatroom features, Minimize sidebar icon
• Profile image uploads, Simplify the process
No quick and intuitive ways of expression.
Confusion surrounding how to create and join a party.
• Emoticons or reactions
• Clarify the steps, Link-sharing page as the landing page, Preview button
Sketches
Then, we individually made sketches based on the features highlighted from our affinity diagram. We then discussed, as a group, on what we should move forward with.
Lo/Mid-Fi Prototype
We designed the first few iterations. Then, we reached out to 8 people and conducted usability tests.
Usability Testing
Through user tests, we confirmed that most of our design choices were intuitive. However, we discovered that we should add a preview button that allows users to have a glimpse at what they are watching and how large their party is.
Design Solutions
1. Starting a Party
We simplified the steps and created a more user-friendly experience. In the re-design (right), the link-sharing page is the landing page.
2. Profile Change
Profile icons and nickname changes were redesigned (right) to reduce the process. Users can also upload their own profile pictures.
3. 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.
4. Live Reaction
We custom designed our own reactions in Adobe Illustrator and made them accessible through an icon at the bottom.
5. Custom Sidebar + 6. Video Calling
We designed a few micro-interactions as part of customizing the sidebar. This following is prototyped for a 2-way video but we decided to keep the max video screens to 4 people to maximize functionality.
• Implemented a video chat feature for users to see and speak with their friends while streaming videos
• Utilized the top of the screen space for chat notifications and users' video preview when the sidebar is minimized
• Included personal video and mute button options.
Minimize Chat & Video →
We discovered that 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.
Hide Sidebar to Full-Screen Mode →
Currently, Netflix Party has an option to hide the chat through the initial steps of activating the party. However, it's drastically overlooked by many users. We redesigned it to incorporate a minimize sidebar icon in Netflix itself. Once minimized, it would show notifications and the user’s personal video on the black bar above the movie.
Design System
Because Netflix and Netflix Party both don't have their design system available to the public, we had to recreate the color scheme, icons, and other components from the existing user interface. Creating new features meant sticking to the layout of the design system, so that was an interesting challenge as well.
Personal Takeaways
This project was the first time I used Figma as a collaborative tool, so I learned a lot about its properties — properly using auto layout, when components should be used, and familiarizing myself with its prototyping features. Having a heavier research background, I guided my team in our research aspects while learning more about UI design concepts.
This project taught me that instead of being feature-focused, I should opt for a user-centric mindset, that would naturally guide me in knowing which features to improve on. I also learned the importance of having a design system to expedite the design process and maintain consistency. Overall, I gained a more holistic understanding of the holistic design process, particularly in a remote setting. It was an honor to be involved as a cohort member, and later serve in a leadership position, of UC Davis' very first UX organization!
Thanks for making it this far!
For more design work, check out my Amazon internship, my ServiceNow internship, or a client project. For my UX Research projects, view my work for Zendesk or the UCSD Design Lab.