The Challenge -
Designing for remote friends and movie enthusiasts.
Introduction
Netflix is a streaming service that offers media through TV shows, movies, and documentaries. We were given the opportunity to improve a way to watch a movie as a distributed group. Netflix wanted to explore features other than video syncing and chat. The target device is Mobile iOS.
problem
Due to the current global health situation and social distancing procedures, more and more individuals are looking for ways to connect.
​
Netflix's current platform does not offer the social aspects many users are seeking.
​
We were given the opportunity to improve a way to watch a movie as a distributed group.
Solution
Watch Party is an interactive streaming feature designed to help users socially connect because they are needing a way to bond.
The curated list is a feature where users can browse friends' and directors' curated list of content designed to help users understand their community because they are needing a way to connect.
team
The team equally shared responsibilities in research and design.
I took the lead in the research throughout the process. Additionally, I was responsible for Rylan's wireframes from mid-fidelity to high-fidelity and mockup with collaboration with my teammates. I refined the details and maintained brand consistency, design, and style throughout the high-fidelity wireframes and mockups.
​
My teammates, Addison and Kisa, took the lead in creating components (symbols), mid-fidelity wireframes, prototyping, and contributed significantly to the the research, design, and overall flow of the wireframes.
Timeline
2 weeks
ROLe
Researcher
UX Designer
Team
Addison Westberry
Kisa Nakashima
Tools
Deliverables
User Interviews
Competitive and Comparative Analysis
Affinity Mapping
Personas
User Flows
Usability Testing
Wireframes
Mid-Fidelity Prototype
High-Fidelity Prototype
Research
Competitive and comparative analysis
Prior to delving into interviewing, we wanted to gather more data. We really wanted to focus on the features various streaming platforms offered and what we can learn from each platform.
Methods
Competitive/Comparative Analysis
User interviews
Affinity mapping
Personas
Competitive Analysis
These services provide ways of communication and connection with one another through chat and/or video.
Comparative Analysis
We conducted comparative analyses within Instagram and Pinterest as we wanted to identify how these products "like" and save images, and how users can create personal boards for those items, to determine how we can further implement similar design patterns with Netflix.
There are countless streaming services that offer live watch parties. Some of these services offer video features, some have chat, some are primarily audio-based.
​
Due to the current global circumstance of social distancing, there has been an influx in streaming services so that people can feel connected from far away.
​
We wanted to inquire more from users who utilize any type of streaming service.
User Interviews
14 Interviews
Netflix Users
Social Viewers
TwitchUsers
Amazon Users
Movie Enthusiasts
We interviewed 14 individuals to further understand users' needs and pain points when utilizing streaming services.
individuals seek connection and understanding of their community
Users want to bond
Users want to view their friends' watch list
We created an affinity map from our interviews and collected two key insights.
Through interviews, individual shared that they enjoy a sense of community when watching content together and that they want to view their friends', directors', and actors' watch lists in order to know what they recommend.
Meet Rylan the remote friend
Rylan recently moved to a new city for his career. He has not had a chance to make new friends in this new city. Rylan has always enjoyed watching movies with his friends because he feels like he is bonding and making memories with his buddies.
​
Rylan comes home from his first day of his new job. Rylan and his buddies planned on watching a show together so that they can catch up. Even though they are a miles apart the feel like they're still able to hangout. Rylan and his buddies find a couple of shows to watch, but they can't make a decision on what to watch. They end up playing "rock, paper, scissors" because they keep fighting on what they should all watch. Rylan and his buddies finally decide on the show, and try starting the show at the exact same time. It does not really work and they end up having to mute one another on the phone so that they wouldn't have to hear the show in the background. Because of this, Rylan couldn't really talk or comment on funny parts while they were watching the show.
​
Rylan would really like an easy way to connect with this buddies. Watching a show with his friends shouldn't have to be so many moving parts.
Rylan, the Remote Friend
Rylan Persona
"I want to be able to watch show with my friends while I am living in a new city"
GOALS
-
Have an easy way to connect with his friends while he is living remotely
-
Have an easy way to decide on what to watch with his friends
​
NEEDS
-
Way to watch content with his friends and connect simultaneously
​
FRUSTRATIONS
-
Not being able to easily watch content with his friends
-
Having a hard time deciding on what to watch with his friends
Meet Miranda the movie enthusiast
Miranda went to film school in college and can talk about movies for hours on end. She loves exploring new movies by her favorite directors and watching the best actors on the big screen, every waking moment of her day. Miranda loves all types of movies; some of her most favorite movies live in such a niche group, that only other film experts would know about.
​
Miranda comes home from a long day on set. She flops on the couch, scrolls through her phone, and remembers that she has a movie night planned with her friend. She starts making dinner as fast as possible, so that she can watch the movie uninterrupted. Miranda's friend comes over and they start looking for a movie.
​
Miranda remembers that she had a perfect list, somewhere, that includes movies recommended by her favorite director. She can't seem to find the list though. Miranda has too many floating, curated lists of movies that she wants to watch all saved in different spots on her phone. Finding a movie ends up taking longer than a movie itself.! Miranda just wants to be able to explore her film friends' and film experts' curated movie list and save it in one spot on her phone. Watching movies with friends would just be so much easier, if she already had lists that she could choose from, saved
"I just want to be able to explore curated lists from friends and experts and save it on one spot on my phone"
GOALS
-
Have a way to explore curated movie lists
-
Have an easy way to find her save movie
​
NEEDS
-
Way to explore curated movie lists from her favorite directors and film experts
​
FRUSTRATIONS
-
Not being able to find curated movie lists from film experts, favorite directors, film friends and saving the curated lists in one location
Miranda, the Movie Enthusiast
Miranda Persona
what do users need?
Through synthesizing the research, two problem statements emerged.
Rylan
Remote friends need an easy way to engage with one another by having watch parties because they are looking for a way to connect with one another.
Miranda
Movie enthusiasts need a platform to engage with others' by viewing curated movie lists because they are looking for a way to connect and compile quality content to consume.
ideation
How Might we?
We wanted to explore how to solve the problem for the users.
Methods
HMW
Design studio
Wireframing
Design review
HMW
Provide a way to explore curated lists from friends/experts?
HMW
Save curated lists on one spot on Miranda's phone?
HMW
Display curated lists according to what Miranda wants to view?
HMW
Provide a way to watch shows with his friends?
HMW
Provide an easy way to choose what show to watch with friends?
HMW
Provide a way to have a meaningful connection from afar?
solutions
To solve the problem, we used data to inform our decision.
Watch Party is an interactive streaming feature designed to help users socially connect because they are needing a way to bond.
​
The curated list is a feature where users can browse friends' curated list of contents designed to help users understand their community.
​
We hypothesize by re-designing the Netflix app, we can help users socially connect through engaging with their friends by viewing their curated movie lists, and participating in watch parties, which will make their movie watching experience meaningful and socially fulfilling. We will know this to be true when we see that individuals who use this platform report an overall increased use of the app and an increased rating of satisfaction and connection with their friends.
initial sketches
We completed a design studio sketching the task flows for each persona.
first Flow
second Flow
Combined Sketches
We combined the most intuitive solutions to tailor the personas needs and painpoints, taking pieces from each of our sketches.
First Flow
.png)
Second Flow
Mid-Fidelity wireframes
Netflix
Mobile ios re-design
After combining the sketches, we turned the initial sketches into digital wireframes. We began building our mid-fidelity screens and established branding by utilizing Netflix's pre-existing style guide including buttons, colors, typography, and spacing, and incorporating on-brand design decisions throughout.
Rylan's Mid-Fidelity wireframe
Miranda's Mid-Fidelity wireframe
Miranda wants to browse friends' favorite movies for her to watch.
The movie category menu was designed by following Netflix's UI design pattern. Netflix's mobile app users are already familiar with this menu, allowing this intuitive design pattern with our new feature.
Usability Testing Findings:
​
Mid-Fidelity Prototype
6 users
100%
completion
rate
78% of users wanted a feel of community
We test 6 users, per flow, with a completion rate of 100% for each flow.
​
After analyzing the test results:
-
We improved the UX copy of both flows in order to solve the users' uncertainty
-
We added friends' avatars in Watch Party lobby in order to increase the feeling of bonding and interaction
​
78% of users we interviewed stated that they wanted a feel of community, and bonding is important to them.
"I wasn't sure what to do after inviting...I didn't initially see the 'enter lobby' button after inviting friends"
'Enter Lobby' was displayed at the very end of the friends' list
BEFORE
The button is now fixed, to be visible at all times
AFTER
A few users did not immediately know what to do after inviting their friends because of the placement of the enter lobby button being at the bottom of the friend's list. To fix this, we made the button position fixed while scrolling. This allowed a more seamless and faster user flow and increased understanding.
"I don't understand this [save] button"
BEFORE
Added a plus sign to the icon and a message upon completion
AFTER
Interviews elucidated that some users recognized the save icon on the thumbnail, but they were not sure where it would take them. We also placed a banner behind the save icon and changed the color in order to increase accessibility. We added a plus sign to the icon and a message when adding to their list, making its function clearer to users.
high fidelity
Rylan's Flow
Rylan starts a watch party and wants to watch a movie with his friends.
Watch party notification
We included the introductory flow for users who receive the watch party invitation notification from users like Rylan.
Miranda's Flow
Miranda finds a movie to watch based on her friend's curated list.
Accessibility
"More than half of all americans watch netflix, which must be made accessible to deaf and hard of hearing viewers"
I wanted to include accessibility as part of the process, as UX designers are ensuring our designs are accessible for all.
​
​
The Web Content Accessibility Guidelines (WCAG) -
​
-
Normal text with a background color of black (#000000) and foreground color of red (#E50914) failed the WCAG AA and AAA standards.
-
Large Text passed WCAG AA standards, but it did not pass AAA standards.
​
Netflix, however, only used the black background and red foreground text color sparingly within their product.
​
​
NAD v. Netflix
​
The National Association of the Deaf filed a suit against Netflix for lack of closed captioning for streaming video as a violation of ADA; specifically the Watch Instantly online streaming service was not captioned.
​
The judge ruled in favor of the NAD's argument that Netflix is subject to the ADA, and therefore must provide closed captioning for streaming web video. This set a precedent for ADA ruling, but this was not a U.S. Supreme Court decision. This is not the law of the land. Overall, there are some next steps for accessibility within Netflix.
Next Steps
The Netflix app re-design provided a way for users to connect, bond, and understand their community.
​
​
Next steps include addressing high fidelity usability testing results by adding more depth between the transition from mobile viewing on the app to screencasting on a television. Additionally, expanding on and testing the flow for the users who receive the watch party notification. We would like to explore more features including adding more social aspects such as connecting social media accounts, notifying when friends are online, the ability to schedule a watch party event with friends through the netflix app (and offering features like adding to Google Calendar or Apple Calendar), sending invitations via text message, and adding the video streaming and chatting during a watch party.
​
These next steps will further heighten the user's experience and need for connection with their community.