Disclaimer: This design was created as part of a bootcamp course during my time at Bitmaker General Assembly in Toronto. I am not employed by and have no affiliation with Netflix, and created this design purely as an excersise to develop my skills.
Disclaimer: This design was created as part of a bootcamp course during my time at Bitmaker General Assembly in Toronto. I am not employed by and have no affiliation with Netflix, and created this design purely as an excersise to develop my skills.
Introduction
As part of the User Experience/Product Design bootcamp at Bitmaker GA in Toronto, we were assigned as a team of two to design a new feature, using an existing content provider as our "Client". As one of the biggest streaming services in the world, Netflix was an obvious choice.
Introduction
As part of the User Experience Product Design bootcamp at Bitmaker GA in Toronto, we were assigned as a team of two to design a new feature, using an existing content provider as our "Client".
As the biggest streaming services in the world, Netflix was an obvious choice.
The Problem?
Netflix users want to connect with their friends and family and share experiences, even when they are not able to be together in the same place. And within 6 months of subscribing, only 10% of usage occurs on the mobile app. So how do we connect people remotely, while encouraging them to use Netflix more on their mobile devices?
The Problem
Our users want to connect with their friends and family and share experiences, even when they are not able to be together in the same place. And within 6 months of subscribing, only 10% of usage occurs on the mobile app. So how do we connect people remotely, while encouraging them to use Netflix more on their mobile devices?
The Solution
Connect users through a Friend’s List, where they can see what movies their friends are watching and enjoying, and what they want to watch, and a digital Screening Room, where users can gather, watch and talk about movies together, even when they’re not in the same house, or even the same country.
The Solution
We will connect users through a Friend’s List, where they can see what movies their friends are watching and enjoying, and what they want to watch, and a digital Screening Room, where users can gather, watch and talk about movies together, even when they’re not in the same house, or even the same country.
Team Members
Richard Willson
Jonathan Fong
Team Members
Richard Willson
Jonathan Fong
My Roles
User and Contextual Research
Ideation and Wireframes
Hi-Fi Layouts - Prototyping
User Testing
My Roles
User and Contextual Research
Ideation and Wireframes
Hi-Fi Layouts - Prototyping
User Testing
Tools Used
Whimsical
Sketch
Invision
Tools Used
Whimsical
Sketch
Invision
Research Insights
Research Insights
Our research consisted of user surveys and interviews, as well as competitve feature and usage analysis for Netflix and some of it competitors, such as Prime Video, YouTube, Hulu, and even outliers like Twitch.
Our research consisted of user surveys and interviews, as well as competitve feature and usage analysis for Netflix and some of it competitors, such as Prime Video, YouTube, Hulu, and even outliers like Twitch.
User Research Insights:
User Research Insights:
-Trouble scheduling time to meet up and watch with other people
-Trouble determining what to watch with others.
-Valued the recomendations they received from friends on what to watch
-Wouldn't necessarily want to share everything they watched ("guilty pleasures") with other people.
-Prefered texting over talking on the phone for talking about what they were watching
-Trouble scheduling time to meet up and watch with other people
-Trouble determining what to watch with others.
-Valued the recomendations they received from friends on what to watch
-Wouldn't necessarily want to share everything they watched ("guilty pleasures") with other people.
-Prefered texting over talking on the phone for talking about what they were watching
Feature and Usage Analysis:
Feature and Usage Analysis:
-Netflix has 27% of global video streaming traffic share, next closest competitor is YouTube with 21.5%
-10% of weekly Netflix usage is on mobile devices, vs over 50% of YouTube usage
-Netflix's biggest competitve advantage is its volume of high-quality original content
-Leveragable technology from competitors includes screen sharing/broadcasting, and chat features present in Twitch and Plex
-Netflix has 27% of global video streaming traffic share, next closest competitor is YouTube with 21.5%
-10% of weekly Netflix usage is on mobile devices, vs over 50% of YouTube usage
-Netflix's biggest competitve advantage is its volume of high-quality original content
-Leveragable technology from competitors includes screen sharing/broadcasting, and chat features present in Twitch and Plex
Based on our research, we created user personas to get a better idea of who we were building these features for.
You can see mine here:
Based on our research, we created user personas to get a better idea of who we were building these features for. You can see mine here:
Based on our research, we created user personas to get a better idea of who we were building these features for. You can see mine here:
Ideation and Wireframes
My work parnter, Jon, focused on the Screening Room aspect of the new feature, while I tackled the Friends List side of things. I started out creating a user flow before moving on to the low-fidelity wireframes, utilizing Whimsical for both.
For my user flow, I looked at different ways that the user might add friends to their friend's list, search for and view friends' profiles, and navigate to the screening room.
Ideation and Wireframes
My work parnter, Jon, focused on the Screening Room aspect of the new feature, while I tackled the Friends List side of things. I started out creating a user flow before moving on to the low-fidelity wireframes, utilizing Whimsical for both.
For my user flow, I looked at different ways that the user might add friends to their friend's list, search for and view friends' profiles, and navigate to the screening room.
Here you can see some of the inital ideas I had for the Friends List features, which I tested with users before creating my high-fidelity screens and final prototype, which can be seen at the end of this case study.
Here you can see some of the inital ideas I had for the Friends List features, which I tested with users before creating my high-fidelity screens and final prototype, which can be seen at the end of this case study.
Usability Testing
Working from my user flow, I plugged my pages into InVision to perform usability testing to see how my ideas would work with users.
My first Iterations featured a square profile photo, which I changed to a circle to keep in line with current design conventions in social media. I also started with a button on the bottom left of the profile photo to add a friend to users friends list, but eventually changed this to be double-tap to add.
Together with Jon, we came up with the idea to have a list-view of the friends/friends-to-add list, which again follows design convention in social media. I made adjustments to my pages, and added an "Add" button to the list view on the Add a Friend page, but maintained the double-tap to add when viewing a friend's profile page.
Usability Testing
Working from my user flow, I plugged my pages into InVision to perform usability testing to see how my ideas would work with users.
My first Iterations featured a square profile photo, which I changed to a circle to keep in line with current design conventions in social media. I also started with a button on the bottom left of the profile photo to add a friend to users friends list, but eventually changed this to be double-tap to add.
Together with Jon, we came up with the idea to have a list-view of the friends/friends-to-add list, which again follows design convention in social media. I made adjustments to my pages, and added an "Add" button to the list view on the Add a Friend page, but maintained the double-tap to add when viewing a friend's profile page.
Final Screens & Prototype
I brought my wireframes into Sketch and created high-fidelity screens, using screen captures from the existing Netflix iOS app and working closely with Jon to ensure consistency in colour, spacing, typography and iconography.
I brought my high-fidelity screens into InVision to create my final prototype, walking through the friends list feature for the Netflix iOS app:
- Navigating through the main friends page
-Searching for friends and viewing friends page
-Mulitple ways of adding friend: Directly through another friend's page, or searching for a friend to add.
-Navigation through Screening room, from adding friends to room, to chosing and starting a movie
I brought my high-fidelity screens into InVision to create my final prototype, walking through the friends list feature for the Netflix iOS app:
- Navigating through the main friends page
-Searching for friends and viewing friends page
-Mulitple ways of adding friend: Directly through another friend's page, or searching for a friend to add.
-Navigation through Screening room, from adding friends to room, to chosing and starting a movie
Final Thoughts
I was limited by time in creating this case study, but it is definitely something that I would like to go back to and explore further. There's more I have in mind to add, such as sending friends messages in the app, and the ability to "Like" a friend's Favorites or List items to provide better recomendations. I also intend on looking at how the features we've created would work on Netflix's web, tablet and TV platforms.
Though theoretical, the difficulties and constraints of working for a big customer like Netflix, as well as working on a team, became clear. While we had many resources to help us maintain the consistency of the design, we also had to make decisions that might make sense to us as designers, but might not to stakeholders. I don't see these limitations as a deterent, but as a learning opportunity. No matter the experience you have working on a project, there will always be a new idea or perspective that you can carry over to make your next project even better.
Other Recent Projects:
My Crazy Little BProduct Design, Graphic Design
PricemateProduct Design
GoSquared - Teamwork Makes The Dream WorkA Case Study
Let's Connect:
Let's Connect:
