Weekly Design Problem #6 — Netflix together remotely
Prompt #6
Netflix decides to improve the experience of watching their content together with friends. How would you design such an experience?
The Experience I Designed
The final product is an interface on Netflix that allows users to watch shows and movies with others online when they’re not in the same physical location together.
Challenge
The biggest challenge with this project was making sure my designs were both driven by the users as well as aligned with Netflix’s interface in order to keep consistency. I didn’t want my design to be glaringly different and therefore just look like I plastered what I wanted onto Netflix. I wanted consistency and a realistic final product. In order to get to this, I studied the Netflix interface thoroughly before moving onto my own designs. I also went back to study it every time I added a new feature; it helped drive some of the design decisions. For example, it helped me choose whether or not to make the instructions/shareable link page black or white and how to present the title (Spoiler: I chose black for that page because it seems that any page that has to do with a viewing experience is in black — the pages in white were informational pages like FAQs and more information on your account. Although this page has instructions, I felt it was more appropriate to classify this page as part of the viewing experience because it features the shareable link to watch with others and the instructions are just part of clarification).
Logistics
Demographic: People who own a Netflix account and desire to watch with others online.
User Goal: To easily watch Netflix with another person remotely without having to do too much or stress too much to get it to work.
Research
Competitive Analysis
Because I wanted to design an online collaborative viewing experience integrated into Netflix, I had to see how other platforms did it. As a result, I conducted a competitive analysis between some of the most popular platforms that supported watching movies/shows together with people online. This included: Netflix Party, Watch2gether, and Rabb.it. I also compared the features of “manually” watching together online, which constitutes video chatting and then pressing “play” at the same time on your own respective devices. The most important points I learned from comparing them is that what makes a good online sharing viewing experience includes features such as:
- One synced screen between all users
- Communicating with other users during the movie (chatting or video chatting)
- A single shareable link to get to the session
User Interviews
I conducted some in-depth interviews to ask friends about their current process of how they watch things together with people remotely. They all indicated that they “manually” do it, which means they typically FaceTime someone and then have Netflix on on their own respective devices and press play at the same time.
Pros:
- Simple and well-known method
- No other extensions or accounts needed to do this
Cons:
- Forces user to use two different devices- one for video chatting and one for watching the stream
- Syncing the stream to be playing at the exact same time stamp is not always feasible — missing the count, different wifi speeds, computer problems, etc.
- Pausing further complicates syncing issues
Survey Monkey
I wanted to know if more people used specific platforms to watch together remotely or if most people used the manual method. Additionally, I wanted to know about their experience on these other platforms and the pros and cons there. Consequently, I decided to create a survey on SurveyMonkey, which generated about 13 responses. Check out the survey here or see the screenshots below.
Results of Survey Monkey:
User Needs
1. Simple — low learning curve
2. Easy access and immediate discovery to shared streaming method
3. Less focus on technical aspects such as trying to sync streams together and more focus on the actual activity of watching the show/movie together
4. Communication with other people watching is necessary
Personas
Jon, 23 years old— Lover Boy
Jon is in a long distance relationship with his significant other. For their date nights, they like to watch Netflix together through FaceTime; they are currently watching a series called Stranger Things. Although a great way to overcome the long distance, it can be annoying when trying to sync their streams together, which takes away from their special date night. They only have about two hours every Friday to do this so every second is crucial.
Jarod, 20 years old — An Online Friend
Jarod wants to have a movie night with three of his close friends, but they’re from all different parts of the world and all have full time jobs. As a result, planning these nights have to be done weeks in advance so there’s a lot of pressure for the night to go well. Additionally, his friends tend to have low attention spans so setting this up has to go smoothly and without delays for everyone.
Paper Wireframes
Final Design Decisions
Shareable Link
Because the priority of the user is getting to the actual activity and not having to focus too much on the technical details, I wanted to make joining the session simple and hassle-free. This means no extra extensions or accounts to make — they simply click on the link and they join the Netflix session immediately.
Video/ Mic Options
This is a social activity and it is evident from my users through surveys and interviews that being able to communicate with each other is just as important in watching a stream together. As a result, I added the video/mic option for users. I chose this as opposed to a chatting option because according to my interviews, people are typically verbally talking to each other when they plan to watch something together — that is why a majority of them “manually” do this activity by FaceTiming another person while watching the movie. Video and mic options enhance the social aspect of the experience.
When users are in the session, they see the others in a circle frame (a smooth shape that’s not too bulky or takes away from the main screen). The user’s own circle is always on the furthest to the right, in order to keep consistency and track of themselves. Additionally, they can turn on/off their own webcam/mic or anyone else’s by hovering over the respective circle and toggling one of the options off. This gives users freedom and flexibility.
Quick Access to Link & Settings
When the user is watching a movie, they should still have power over the settings of this viewing session, so in order to keep the experience uninterrupted while also controlled, I added quick access icons next to the webcams. So as not to take away from the visuals of the movie and to keep consistency with the Netflix interface, the quick access links are shown only when the user mouses over the screen, just as the rest of the Netflix UI does as well. Scrolling over the “add people” icon expands it into two options: the add people icon and cogs icon or settings icon. The add people icon gives quick access to the link while the settings icon allows the user to turn on/off permissions for others to control the screen or change the nickname that shows up in their bubble when their webcam is turned off.
Feel free to check out each of the pages I designed on Figma here. Otherwise, I summarize the features down here:
