Netflix Watch Party
Building domain knowledge on creating a social feature with a multi-step workflow for different user types, while navigating an existing design system and other constraints.
Objective:
Add a feature to an existing website,
app, or similar service
Roles:
UX Research
UX/UI Designer
Testing Facilitator
Duration:
2 Weeks
(80 Hours)
Tools:
Figma
Google Suite
Zoom
Dimensions
SVG-Grabber
Focus
Entertainment/Media App or Website
- Netflix Desktop Website
Scope and Constraints
Mandatory: “Re-branding a big name like Spotify is out of the question…Even if you don’t agree with the existing components, you have to make it work. The stakeholders may not have the time or resources to spare for a redesign.”
Optional: “We believe that a social feature would help our business grow. We’re under the impression that strong communities tend to keep users coming back.”
Secondary Research
Started by looking online to get familiar with existing features, pain points of Netflix, and what folks wish Netflix would implement
- Netflix itself and Netflix Help Center
- Peppercontent.io
- Mashable.com
- Medium Blog
Narrowed potential features to implement down to 3 viable options:
1) Ability to see what friends were last watching/are watching (like on Spotify)
2) Ability to create multiple custom lists that you can share
3) Watch Party within Netflix
Survey
≈ 5 minute survey sent out to social circles through Snapchat
11 Participants (all users of Netflix)
Questions Asked (not including screening or contact consent questions)
- Are you a Netflix User?
- What would you rate your general experience using Netflix?
- If anything, what do you think Netflix does well? (Enter NA if not applicable)
- If anything, what do you think Netflix does poorly (Enter NA if not applicable)
- Of the 3 choices below, which feature would you want implemented on Netflix most?
- Would the above feature improve your general experience score?
Survey Results
Users on average rate their general experience using Netflix at a 3.91 out of 5 (based on survey of 11 Gen Z/Millennial users)
5/11 respondents chose Watch Party as their preferred feature to be implemented
10/11 respondents stated they would increase their general experience score of Netflix if their chosen feature was implemented
Creating a Persona
I always like to create a persona to remind myself of the real person behind the screen using the design
Personas also help define the needs and pain points users may have regarding use
Drawing a Storyboard
Storyboards help define the main problem I am solving and center the project
It also helps explore how the design solves this problem by considering the UX
Recenter with a Debrief
Once I wrap up my Research and Define phases, I take the time to recenter myself with the goal, focus, and scope of the project
On this same doc, I will add the following items to prepare for mapping out and designing the solution:
- Main Research Findings
- Tools that I may need for this project, such as plugins and extensions
- User Goals
- Business Goals
- Technical Constraints
- How Might We’s
Sitemap
I started with a Sitemap to familiarize myself with Netflix’s layout and select where it would make sense to put the entry points of the Watch Party feature
Card Sort
To ensure the design would flow in a way that made sense to users, I conducted a short card sort to see what order of operations folks would imagine the process to be in
User Flows
Mapping out User Flows of both the Host and the Attendee was a necessary step to ensure wireframing was done efficiently and effectively
Lo-fi Wireframes
6 Key Screens for Watch Party Feature
Because this was a feature to be added to an already existing design, I sketched out existing UI in black and added feature UI in dark red to ensure it fit within the layout and style
Mid-fi Wireframes
Hi-fi Wireframes
Prototype 1
Created the necessary screens, but did not hot spot it because after consulting with mentor, we decided the flow needed to change a bit because:
- It would be frustrating for users if they had to restart the watch party every time they wanted to watch something else, so…
- Rather than having Hosts select a Title, inviting Attendees, and then starting the Watch Party…
Prototype 2
The Host would invite Attendees first, select a Title together with a time limit (for business constraints) with the chat feature available earlier on, and then watch the Title with the option of going back to change the Title while still in the Watch Party
Attendees would not have a blank Waiting Room, but have the option to browse their Netflix and use the chat while waiting for the Host to select a Title and begin watching
This ensures a lot more user control and freedom
Individual Testing
Five individual testers
Both went really smoothly, no errors were made in the processes, and both testers felt like it was intuitive, simple, quick, and straightforward
One heuristics form filled out as seen to the right, but very much positive feedback
Group Critique
9 other students in Designlab’s UX Academy to test my prototype and share strengths and critiques of my design, questions, and ideas
Mostly positive feedback
Some suggestions out of scope
- For example, adding an additional "Friends" and "Friends List" feature within Netflix to start Watch Party amongst "Friends"
Ideas/Changes I chose to integrate:
- Ability to hide/minimize chat box
- Copy Button for the Attendee Code as well as the Invite Link
- Double check width of all icons to make sure they are uniform
Testing Analysis
The italicized is my mentor’s feedback that I made sure to incorporate
I compiled my notes from every prototype test I had: with individual testers, the group crit, and my mentor
Some of the more obvious UI changes are shown below...
This is how the Watch Party Icon developed over iterations, excluding the popcorn option as seen in my mid-fi. Netflix’s profile icon did not have a surrounding circle, so we took that off, then made the width thicker to match Netflix’s other icons better
The top of the chat during the Watch Party before and with the added “Hide” button and the text pop-up on hover above.
These were just two more obvious examples of UI changes I made. I also made some language changes, flow/hotspot additions (ex: with the hide/show chat), and other minor UI edits, giving us the….
Reflection and Next Steps
This project gave me the opportunity to create a feature in the UI style and branding of an already existing company.
It was fun to do a project where I got to zoom into the details and process of a specific feature and how it would work within an overarching service.
If the project continued, I would…
- Upon discussion with a SWE, further improve the workflow by removing the timer and instead adding a timeout function upon a certain amount of inactivity time to reduce pressure placed on the user while still addressing technical load
- Continue making it usable with mobile and tablet users
- Explore how a voice and video chat could be integrated
- Share with a broader audience since many wish to have a Netflix Watch Party
