Recently, Netflix replaced its rating system with a confusing % match algorithm. As a result, I have found it much more difficult to quickly and easily find the best movies and TV shows. I often spend over 30 minutes flicking between different websites and apps just to find something good to watch.
To solve this problem, I could create a product that aggregates reviews, ratings, trailers and other key information from multiple online sources into one place. Then provide a simple yet powerful search experience that helps Netflix users to quickly and easily find the best videos to watch.
Flix Finder was my capstone project for the Springboard UX Design Course. As a result, I took on the role of user researcher, information architect, interaction designer, visual designer and usability specialist all rolled up into one. #UXUnicorn
The design process.
Goal: Understand how Netflix users decide what to watch and if there are opportunities to improve their experience.
To better understand the problem, users needs and their behaviours, I conducted a mix of research that included a survey with 41 participants, 3 user interviews and a usability heuristics analysis of 5 competitors.
The aim of the research was to derive quantitative and qualitative insights that would help answer the following key questions:
User attributes: Age: 21-50. Adoption: Have been using Netflix for more than 1 year. Engagement: Watches Netflix at least once per week. These attributes represent 68% of survey participants.
Behavioural context: 79% of participants use Netflix on 2 or more devices. Smart TV is commonly used for watching videos. Mobile devices are most commonly used for researching what to watch. Therefore, in this context, a mobile app would be most appropriate.
Information sources: More than 70% of participants use 2 or more sources to gather information about a movie or TV show. However, less than 10% read reviews regularly. Users stated that they don't always trust critics, and find reviews to be subjective and non-specific to their own situation. The most trusted source of information is friends and family. Users trust their friends' opinion and through conversation, can gather relevant and personalised information, which is key to their decision-making process.
For a more detailed analysis, view the full research report
Recommendation: Pivot from content aggregation, to social enablement.
At this point, I had learned that my initial hypothesis may not be the best solution to the problem. Users value and trust the opinions of people they know - friends, family and colleagues - much more than they trust the opinions of critics and industry sources.
As a result, I decided to switch from a content aggregator model to a social model. The new direction I took was to design a mobile app that allows users to find great videos by connecting and communicating with their friends.
Enabling a user-centred design process with personas and empathy mapping.
To ensure that the user stayed front of mind through the process, I defined a persona and empathy map to help portray the needs, behaviours, goals and frustrations of the target audience. In this case, the research and user interviews pointed towards one clear persona - Social Sarah.
Defining the fastest route to learnings.
By creating User Stories and an MVP roadmap, I aimed to define the minimum set of product features which would help users achieve their goals, whilst also providing valuable learnings and insights into how the product is used and what other needs users may have that could be solved in future iterations.
Mapping out information architecture, content strategy and user flows.
To better understand how users would expect to interact and navigate through the features and content available in the app, I ran a remote card sort study using Optimal Workshop.
Based on the outputs of the study, I developed documentation for the information architecture, and key user flows.
I learned that this step is incredibly valuable for quickly evaluating and iterating the user experience, without getting lost in the detail of screen design. Defining the most simple and elegant flows up front really helped when moving on to wireframing the full experience.
Bringing it to life: Sketching and wireframing the experience.
When it came time to pull it all together and start bringing the experience to life, I worked through the following process:
Whilst I’m very comfortable using Sketch, this is the first time I’ve used it for wireframing instead of a dedicated tool such as Axure, Balsamiq or similar. Making use of symbols and the Material Design library helped to speed up my workflow, however, I did find myself spending too much time working on grid spacing, typography and iconography when it probably wasn’t necessary.
Getting a working prototype into the hands of real users, early.
Initially, I chose InVison to build the prototype, but I quickly learned that InVision didn’t have the features I needed - horizontal scroll and interactive form elements - to build a testable prototype that would give me the learnings I was looking for.
Proto.io - a tool I had never used before - became my weapon of choice for this prototype. I found it really easy to learn, yet provided me with an incredibly powerful and flexible set of features, including horizontal scroll and interactive form elements, which really brought the prototype to life.
Try it out for yourself: https://pr.to/9FWGSK/
I was excited to get the prototype into the hands of some real people. Once I had set some objectives for the exercise, I ran moderated usability tests with 4 participants. The prototype was used on a mobile device in a home setting to help with contextual observations.
Participants were asked to complete 8 tasks. I wish I had defined the objectives and tasks ahead of building the prototype, as a lot of time could have been saved building flows that were unnecessary for the test. Lesson learned. Only build what you need to test.
Usability test results.
+ Overall, the experience tested well. All participants were able to complete all 8 tasks successfully without assistance.
+ Small friction points were observed which could help improve the experience further, such as providing additional sign up options, allowing users to select which of their friends they would like to connect with, and improving the prominence of the ‘Rate This’ Call To Action.
+ The biggest disagreement amongst participants was the journey to ‘contact a friend’. 50% of participants started their journey at the video details screen, the other 50% started at the ‘My Friends’ screen. As the observations were inconclusive, I would recommend designing another, more detailed usability test specifically for this flow.
View the full summary of all observations and recommendations for further iterations.
Visual design style guide.
In preparation for taking the wireframe concepts through a round of visual design and further testing, I produced a Visual Style Guide that includes typography, colour palette and UI patterns that would appropriately fit with the purpose of the product and the intended audience.
I really enjoyed learning about and putting into practice each different stage of the UX process, end-to-end. If I were to do it again, the two main things I would change are to strip back the MVP - it's much bigger than was needed - and schedule study and test sessions earlier in the process - waiting for participant's availability really slowed down momentum.
Here are some of the key learnings I will take on to my next project:
Real people aren't scary. In fact, more often than not they're kind and happy to help. Talk to them, and learn everything you can.
Validate ideas early and often. Getting feedback early on, no matter how rough the ideas are, is invaluable. You only know what you know. And you don't know what you don't know until you find out.
Paper and pen/cil are your best friends. Quick and dirty iterations before going digital really help to speed up the process and prevent wasted time.
Only build what you need to test. Prototyping is fun. But if a prototype feature doesn't get used in a test, did it ever truly exist?
Then test. Iterate. Rinse. Repeat.
I hope you've enjoyed this case study. If you'd like to know more, you can email me at email@example.com or message me on LinkedIn @AdamJSanders
Tools used in this project: Sketch, Proto.io, Invision, Optimal Workshop, Draw.io, Keynote, Google Docs, mechanical pencil, fineline pen and lots of dotted paper :-)