NETFLIX Watch Party

A group watching feature for Netflix

Project Overview

Netflix Watch Party is a personal project that allows users to create an co-viewing online chat room to enjoy their favorite shows and movies with others.

Project Background

This Project is a student Project from UX design immersive program at General Assembly in October 2017
My Role

Interface and interaction design,
prototyping and animation design.
Tools Used

Sketch 4.0 , Adobe Illustrator cc, Invision, Principle 3.0, Adobe Photoshop cc,
Design Challenge

Create a social interaction in a platform that doesn't have social infrastructure available.

Plan a Watch Party on NETFLIX

Schedule a party

When you are planning a watch party, good chance is you probably already know what to watch. Choosing a show as a starting point makes the most sense for our users and fits in the existing user flow like a glove. Once the user initiate a watch party from a show, time and date will be the only other thing required to start a party.

Send your invites

It wouldn't be a party if your friends or loved ones aren't there. When designing a social feature for app like Netflix, which doesn't have a social infrastructure in place, we will need to rely on existing IDs like their emails to send out invites.

Managing parties

To view and manage upcoming parties, see suggested shows that are good for watching together, pre-booking a watch party for new releases show, and even rewatching your old parties. We need to create a new section in the app to managing this complex social feature. This not only gives users a more user-friendly way to enjoy the feature, but also a great chance for us to suggest specific content to our users in a group-viewing scenario.

Edit existing party

We allow users to un-invite their frenemies or invite some more. But for the MVP version of this feature, we decide to NOT allow users to change what are they watching or the start time. Given it's more easy to delete and reschedule than having to choose a different show while under the context of editing a particular watch party.

Watch it together on NETFLIX

Start the party

When a Watch Party is within the hour of the showtime, the party will show up as the first item of carousel once the host arrives on Netflix. Reminding them they is a party that needs them to attend.

Participate a watch party

Joining a watch party on a mobile or desktop is easy. User should be able to follow the link from the invite email and will take them directly to the party room. For smart TV users, they will have to enter the room code from the email manually. We understands that some people are always early and some are always not punctual, so once users are in early, they will be shown trailers just like they are in an actual move theater, they can say hi to their friends and grab some popcorns before the part host starts the show.

Detail 1: Realtime chat channel

In the chat channel, user's chat bubble color will be the same as their avatar color. This is especially helpful to identify different users in chat under full-screen mode. The time stamp is based on how long since the party started, So when users try to re-watch past parties the comment will show up at the time when they were published. Perfect for all-alone moments in life.

Draggable chat channel

While under full screen mode, chat channel can be open from media transport control. the chat channel will have a semi-transparent background. This chat channel can be drag and drop to anywhere on the screen. The avatar of the user is not shown here, user can identify different user by name shown and the distinct colors that each user has.

Chat channel with dimmer

After a short period of input inactivity from the user, the chat channel will dim down to minimize the visual disruption. Users can choose to wake up the chat channel by mouse over the chat channel or to leave their cursor in the chat channel to prevent it from dimming down.

Prototype videos

We created two prototypes to show how things work in motion! The first one is made with Invision using the wireframes, showing step by step demonstration of how users create and manage a Watch Party. The second one is made with Principle using high-fidelity mockups, demonstrating what does it look like to enter a Watch Party. And here are the videos of us walking through our prototype.