Netflix needs this feature ! — Project 3
Time has come to take you through my first solo project and this is so exciting !!! Doing my first project alone is a challenge as you can imagine.
In one week, I had to:
analyze an already existing and highly adopted app and incorporate a new feature into the existing product. The feature you develop will be based on an area of functionality to be explored and compared to user input.
Your work will culminate in a high-fidelity prototype of a native app that reflects your best path forward based on research, iteration, and testing. For apps that have both Android and iOS implementations, you may choose either platform.
I’ve decided to work on Netflix (on IOS) because I often use the mobile app while traveling or even on my computer or TV at home. At the beginning, I got few ideas like adding:
- TV channels
- Watch party with friends / family
- Comment the videos with emojis to create an emojis bookmark
- Develop the playlist of a given movie
- Create actors and actresses pages
Research
Feature comparison analysis
From this point, I start with some feature analysis research to find the best opportunity for me to work on.
As you can see, there would have been several opportunities for me to work on, but I’m not the only one imagining a new feature to Netflix ! Indeed, there are a lot of articles and case studies on the “Add a feature to Netflix” so I took the challenge to create a useful feature, and at the same time a feature that is as original as possible.
✨ Challenge accepted ✨
Then, I’ve decided to work on a watch party feature with both written and audio chat with the possibility of adding emojis on your program.
But “why” you might think ?
Well, here are my thoughts: this kind of social /sharing an experience feature is relevant nowadays regarding the current sanitary situation with Covid 19, but also because most applications got a streaming feature as well. We are more and more in a world of sharing instant experiences and reacting to them live. Plus not all competitors have it !
User research
To know if I am in the right path, I interviewed 5 Netflix app users aged from 20y-o to 30y-o. Here are some answers:
I come up with the How Might We question like HMW help the user enjoying Netflix programs with friends remotely?
Define — Ideate 💡
From the previous researches I create the Proto persona (a less detailed persona but still very important to empathize with our user and have this storytelling part we want to make sense of our projects). Let me introduce you to Sonia, she will stay this for the rest of this project ! She is a movie addict, a community manager and a very sociable young woman, yet she still enjoys the comfort of her cozy flat.
To learn more about her situation, we’ll follow this scenario which is her journey (a little bit like the scenario of a movie📽️):
-After a hard-working day, Sonia wants to go to the cinema with her friends but they are all tired, so they decided to stay home but they still want to watch a movie together.
-This very evening, Sonia launches her Netflix mobile application, she selects a movie, and then taps on the brand new “Party” feature.
-She creates her first “party”. She shares the link with her 2 friends, Jim and Johanna.
-They both join and they all pair their mobile application with their TV rather than a computer mainly because of the screen size, which is closer to the cinema experience.
-They are having fun chatting and reacting to the movie. Chilling with friends remotely have never been this easy (ok maybe this is a little bit exaggerated but you got the idea) ! After talking about the movie all together, Sonia closes the party.
-With the message of confirmation, they got a memory that they can share on social networks.
Wireframing ✏️
Before jumping into this part, I analyzed the application to understand how it works. For example, I know that:
- most of the time, Netflix uses pop ups and overlays (instead of created new pages)
- icons + text on “play” & “download” buttons
- icons for other actions are above grey text description
- navigation bar icons have different colors depending on what page you are on, but there is also a red line above it
Following this path, I dive into low-fidelity wireframing and prototyping and then onto mid-fidelity prototype.
I’ll know if I’m right if testers find it intuitive and if it doesn’t bother their original use of Netflix native app.
User got some pain points while using the product and I’m happy to work on it to better embed this feature:
- Difficulty understanding the chosen icon for this feature
- Difficulty to see the difference between “party” and “share” icons
- Sound icon doesn’t correspond to what testers imagine (like managing TV sound which wasn’t the action of this button)
- Some unusual content on the party feature: like Edit your selection
From this feedback, I created myself a list of actions that must be worked on:
- Change the “party” icon
- Edit the sound button on party feature page
- Pairing the two devices must be clearer, maybe with a different button
- Work on the party page: remove some less used items, as the final rendering is less easy to understand
Visual Design 🎨
I go directly to colors and typography, as Netflix created its own typography I had to pick another one so I choose Poppins and I create my styles from these parts. Then, I create components using Atomic Design methodology. This was my very first time with Atomic Design and I love the concept !
The idea here, in a way, is to mimic matter ! (Just that) You go from atoms, an item that cannot be divided without loosing its meaning, to an entire page build from these atoms. These later started to group with atoms that correspond and then into organism, their organization. Then you ad the visual and put it onto the page ! 🧙♀️
Here is a little visual explanation of this, I focus on the profile selection part as an example:
However, at some point, when trying to send a movie to a friend, I realized that the IOS system was not working as the one I’ve created.
Actually, I must have based the Netflix back text button on the top left hand corner after an older version of IOS. But when sending a movie to a friend from Netflix, you do not need to tap somewhere to go back to the app, the system closes the message interface on its own after the message is sent, and sends you back to Netflix in a second ! So I updated my version. You can see the difference here:
After that I could create the one and only: High-fidelity prototype !😊
You can try it here to see all animations I’ve worked on for this project!
What’s next ?
The next step of this project would simply be to conduct desirability testing with high-fidelity prototype. I would update the implementation of the feature until it fits user needs.
I really enjoyed working on Netflix native app !! Thanks for reaching the end of the article ! Feel free to give a clap or a comment !
The next article will be on the creation of a meditation app ! Stay tuned for MediTree !
