Design and User Research for T.V. Recommendations App

Overview

Sceneries is a T.V. content recommendation app. My role was to conduct research, design the app, and test the design. The new design aims to provide accurate T.V. content recommendations in a seamless interface.

Problem

The recommendations that streaming services provide aren’t always accurate and are overwhelming in number.

  • My Role

    To conduct research, design the first version of the app, conduct user testing, analyze the data, and finalize the designs based on the data.

  • Users

    Users ages 13 and over who have access to streaming services and a smartphone.

  • Timeline and Tools

    October 2021-December 2021 (3 months)

    Adobe XD and Canva

Research

I first researched the current recommendations provided by streaming services to see why they weren't meeting users’ needs.

I began the project by researching the existing recommendations provided by streaming services to uncover what issues needed to be fixed. I did this by analyzing streaming services like Netflix, Amazon Prime Video, HBOMax, Stars, and Hulu. I found many UX-related issues that made it hard for users to:

  • Find tailored content based off of the shows/movies users are watching

    • Users often share profiles with each other and the recommendations become inaccurate

  • Find something to watch because there are too many recommendations on multiple streaming services, making users feel overwhelmed

These usability issues were leading to serious problems for users who wanted to find something to watch.

  • These usability issues were leading to serious problems for users who wanted to find something to watch

  • Users felt overwhelmed by the multiple streaming services

  • Users chose to watch something they have already watched multiple times because it would be easier than searching for something new

From my research, I discovered that there is no app that unifies all of the shows and movies across multiple streaming services and provides accurate recommendations.

Wireframe

Using the insights I gained from my research, I created wireframes in Adobe XD that showed how the app would be laid out.

Wireframe

My wireframes included:

  • A simple layout

  • A user friendly interface

  • Easy navigation

First Design

I then turned the wireframes into high-fidelity designs.

First design high-fidelity mock-ups

I created high-fidelity designs to visualize how the app would look and prepare for user testing. I used these designs in my user testing survey to get feedback. My initial designs:

  • Made it easy for users to find recommendations

  • Allowed users to cast content on their devices

  • Enabled users to sign into their streaming accounts to access media from the app

User testing

I conducted user testing on the app to understand what issues users had with the app and how to improve them.

I began this phase of the project by creating a Google Forms survey with UX/UI oriented questions. The survey included an interactive prototype of my initial design. I surveyed 25 people from all technical backgrounds and ages. Some questions I asked were:

  • What do you expect to gain from this app?

  • What was the one thing you liked most about the design?

  • What was the one thing you didn't like about this app and what would keep you from using it?

From the 25 responses I received, I learned:

  • 45% of participants recommended changing the look and feel of the logo

  • 35% of participants believed the color scheme and bottom menu should be changed

  • 25% of participants believed that there should be multi-select and search functions and the layout should be centered

Data Analysis

Based on the data, I knew what to change in the design to meet users' needs. I then conducted a SWOT analysis.

SWOT Analysis chart

I created a SWOT analysis of my own design to see how it compares to other recommendations provided by streaming services.

Based on the SWOT analysis and my user research, I identified 3 changes for the final version of the app designs. The major changes were:

  • Allowing users to select multiple genres and search for specific types of content and streaming services

  • Changing a few of the colors and logo

  • Allowing users to edit and change settings after the account is created so that the app can continue to generate more customized content

Final Design

First, I redesigned the layout of the questions in the quiz so that users could more easily take the quiz and get to their recommendations faster.

  • First Design Quiz

    Before

    The quiz page had a search function, but users were unsure what to search. There was also no scroll feature, limiting users to a select few streaming services.

  • Final Design Quiz

    After

    I changed the layout so the quiz had a dropdown menu with a search. The scroll function indicates that there is a list users can scroll through to view additional options. Selections are clearly marked.

Next, I redesigned the colors and layout of the recommendations page so that users can clearly filter through options and see the menu bar.

  • First Recommendations

    Before

    The font was hard to see in the header and didn't have a clear filtering option. The menu bar blended in with the background and users had a hard time understanding what icon was selected. The background didn't fit with the theme of the app.

  • Final Recommendations

    After

    I added an icon that pulls up the filter menu. The text at the top allows the user to see what options are selected and how many filters are applied. I changed the color scheme so colors match and add emphasis.

Next, I added the filters page so that users can choose what type of content they would like to watch and genres they are interested in.

  • Filter page

    This type of layout allows users to search and multi-select types of content and genres. The options for types and genres vary allowing for the results to be even more personalized.

Next, I redesigned the colors and layout of the casting and streaming page so that users can clearly log into their accounts and connect to their devices.

  • First Steaming and Casting Page

    Before

    There was no option to add or sync to more streaming services. Syncing to streaming services was at the top of the page, even though it was not a primary user action. The font color was hard to see and didn't have an "Add device" option for casting.

  • First Steaming and Casting Page

    After

    I added an icon that allows users to add a streaming service. I moved syncing to streaming services to the bottom, since it would probably be a secondary action. Users can add a casting device by tapping on the plus icon.

Final User Flow & Prototype

I created a user flow and prototype to show the experience a user would have while using the app.

My user flow showed what a complete experience would look for a user using my app. I mapped out each step the user would take, starting from completing the quiz, to logging in, viewing their recommendations, and filtering them.

Next, I created a new interactive prototype to show how the app functions. My prototype showed which parts of the app were interactive and showcased the new design. If we were to build the app, the prototype would be useful for stakeholders and developers so that they understand how it works.

Outcomes

I created this app design for a graduate school class final project.

The design allowed users to:

  • Get personalized content and better recommendations for what to watch

  • View all content, streaming, and casting options in one app, making users feel less overwhelmed

  • Navigate the app easily and consistently find something new to watch

This new design will encourage users to spend more time watching something rather than trying to find something to watch. The recommendations will be more closely tied to their personal preferences, leading to higher user satisfaction.

Lessons Learned

Design for a broad audience. When I was initially creating my designs, I designed for users aged 13-25 who were technologically savvy. I did not take into consideration users who were older than this age group. By only considering this age group, users who fell outside this age range could not use this app as efficiently.

Next time, I want to ensure that I design for a broader audience.

Conduct more user research. For this project, I only had access to 25 users with which to do user testing. If I had more time, I would have conducted user research with more people.