UX/UI Design
Netflix Year in Review
How can we create a better mobile user experience for an app that requires downloading and uploading files?
The Netflix Year in Review app was designed in a short 2-week-period in 2020, resulting in many possible user experience issues. We want to improve on this for the 2021 version.
As the product designer for this web app, my role is to implement my UX process to improve the experience of this web app. Deliverables to provide the developer include: a research report, high fidelity prototype for the 2021 update, and a branding style guide.
Inspired by #SpotifyWrapped that subscribers get at the end of every year, my friend Harry and I created something similar for Netflix. We are using the .csv viewing activity log from Netflix’s site with the help of “Total Movie Database API”. We have created our first graphics in this project that shows an approximate overview of how many hours have been spent watching Netflix, and also the Top 5 Shows watched in 2020.
This 2020 version for this app was designed without any user research, and based on a personal hunch: "I really enjoy Spotify Wrapped is. Maybe Netflix feature could benefit from learning from this." Because this was only a personal experience that inspired the idea, conducting thorough research is pivotal to make sure our next steps are going in there right direction.
Can a feature like Spotify Wrapped be applied to Netflix? Here's are some insights we made from our research:
From our user survey results, only 9.5% of survey participants don’t have access to Netflix. However, 33.3% of users have a “shared/complicated” profile. Sharing a profile on Netflix prevents statistics to be exactly personal to you. If Netflix had a feature like Spotify Wrapped that provides something rewarding for users with data, that could be a motivator for users not to share profiles, to have one of their own.
There are a lot of articles and publications that provide very positive reviews of #SpotifyWrapped. Here is the synthesized report regarding what #SpotifyWrapped does well to engage its user base.
"with so much data at [Spotify's] fingertips, like individual song listens, favorite artists, and preferred genres, it made perfect sense to leverage this data into a compelling experience." (Smartling)
"Spotify was able to get people talking -- it was almost impossible to flip through your Instagram stories or twitter feed and not see someone talking about their 2019 Wrapped for a few days." (Smartling)
"previously, users could only access Spotify Wrapped by web browser and it was a little hard to find." (Reviews.org)
one of the distinct features of Spotify Wrapped is its engaging graphics and visual presentation. (Screen Rant)
“Spotify Wrapped goes beyond that to walk the user through a range of analytics." (Screen Rant)
The first round of testing will be done in person. The participant will navigate the site www.nyir2020.com. Participants must use their own iPhone and have access to a Netflix account. As a tester, I'll provide them with a task, observe/take notes on their actions and help users if they get lost. A test script was created for this project (Google Doc Link).
The original design shown above tries to fit everything onto one screen. Testing participants looked past the entire top section, focusing their attention immediately on the instructions. The landing page is important to provide the user with the right info about the site so they know outcomes to expect.
In order to complete the process, a user needs to obtain the .csv file from Netflix on their smartphone browser. The instructions on the original website are not easy to read. Users expressed difficulty and mentioned they would probably give up when switching tabs too many times. Also, all test participants forgot their Netflix login information.
In order to complete the process, a user needs to obtain the .csv file from Netflix on their smartphone browser. Users expressed difficulty and mentioned they would probably give up when switching tabs too many times. Also, all test participants forgot their Netflix login information.
Before creating a prototype, I decided to update the branding and create an official style guide. In order to be clear that this project is not affiliated with Netflix, I decided to take out the Netflix logo altogether. However, the rest of the style guide is still designed with a hint of Netflix.
The user journey includes interacting with the iOS interface, Safari, and the Netflix websites. One of the biggest issues was the need to switch between tabs within Safari.
In order to test how user experience of the tutorial process, I had to make the entire user story, including these interactions, part of the prototype.
What resulted was something that is quite messy to look at, but a result I'm pretty proud of:
This transitions well into my second round of user testing, using the prototype above. You can try it out too—use the prototype above. A test script was created for this (Google Doc link).
Users give up on the site when following the instructions. The solutions added in the prototype (splitting up instructions into multiple pages, adding a progress indicator) was a success.
In this new version, we split up the tutorial instructions into 3 multiple mobile interactive pages. However, when users followed the instructions in step 1 and 2 to open a new tab and complete the task, many users got lost in the new tab and struggled to return to task. Even though there was a warning text under the link button that read “make sure to return to this tab when you’re done!’, it was overlooked.
In steps 1 and 2, there are GIFS of a concise screen recording that shows what it looks like to follow the instructions provided for the step. It’s for visual learners, and also just a reassurance to let users know that the steps are not so overwhelming. Users didn’t really notice it during testing at all.
With the insights from the usability testing above, the following additions or adjustments were made:
.gif)
This completes this user experience process to improve the tutorial process.
We started our UX process for this project by conducting competitive analysis on #SpotifyWrapped and doing research on what makes the feature so successful. Next, the website's experience was tested with a focus on social media shareability and mobile-friendly design.
The biggest weakness was the crowded page with instructions that required the user to complete multiple tasks. These tasks included both navigating multiple browser tabs and file management, which is daunting on mobile devices.
Solutions were designed to create a more encouraging user flow that constantly reminds users that the required tasks are not too difficult to complete. The prototype of the redesign included splitting the text-heavy single page design into multiple steps with interactive progress indicators and pop-up warnings. Testing results show a positive response and overall improvement in user experience!
Meet with the developer: The next thing to do is to meet up with my friend Harry (the developer) to show him this updated Figma prototype and explain my findings more in depth with him. In addition tot this, I also have a few other tasks to complete:
New Statistics/Graphics: we will want to add a few more statistics/graphics for next year's version. From the user surveys, potential additions could be: "Top Genres", "Newly Discovered Genres", "What shows I binge watched". "Most watched actors or directors", and so on. This will require us to go back to the drawing board and see what we can gather from the .csv file and the Total Movie Database API.
PC/Android: the user experience process above was specifically for iOS. It will be important for us to create instructions for non iOS users.
I hope this was an enjoyable read, and that the product/UX design process was explained in a way that was understandable. Look out for an update on New Year's Day, next year!
