SuggestYou

Designing an application that provides people with efficient tools to watch and to enjoy personalized streaming content.

Timeline: 21 months

My Role: UI/UX Designer - all stages of the design-thinking methodology(Empathize, Define, Ideate, Prototype, and Test). Consulted with my mentor consistently throughout the project.

About The Project: I designed the application for my first capstone project, a practice project, while studying as a student in the Springboard UI/UX program. SuggestYou is a mobile application that provides personalized watching recommendations for finding the right watching content and ways to discover new watching content with an online community. The problem is that the users faced frustration and confusion at the part of making a decision on what to watch in streaming applications in the entertainment process. The project looks at needs for visual clarity and engagement with social media, a personalized experience with accurate recommendations, and ways to discuss watching content and discover new content with a community.

The Solution

Discover

Secondary Research

I wanted to validate my initial assumption that U.S. viewers have a difficult time finding what to watch in watching streaming applications. The goal was to find out why viewers could not find content that matched their interests. The important findings were:

1. Viewers needed to be at least 18 years old to be appealed to a certain genre or category of watching content.

2. Viewers did not have an easy way to find what they liked in a streaming application.

3. Viewers were not aware of available content that they liked in a streaming

application.

My findings proved that through the major reasons for the viewers not being able to find what to watch in a streaming application, there was a need to find what to watch in a streaming application.

Primary Research

User Interviews

After my Secondary Research, my screener survey had 7 participants, and 6 participants fit the requirements to be chosen for the user interviews. The findings were:

Viewers were confused about the visually presented content in a streaming service because they did not know what it was for.
Viewers had a frustrating experience by not getting accurate personalized recommendations quickly.
Viewers felt lost after watching the content and needed to talk to a community.

Thematic Analysis

After conducting the primary research, I used my notes from the qualitative user interviews to create an affinity map. The insights I gained:

Viewers could not use visuals including text and images to help them find out about watching content.
Viewers depended on algorithm-based applications and verbal suggestions from friends to get their recommendations for what to watch.
Viewers cared about the watched content and wanted to discuss it afterwards.

Affinity Map

Personas

Once I found out about the problems to solve, I needed to know who is using the application and what the needs are. I decided to create three personas that represented the range of streaming viewers who would be using the application.

First Persona

Second Persona

Third Persona

How Might We Statements

Now that I discovered the problems and the needs of the users, I re-stated my insights into How Might We Statements. The three statements helped me understand the users’ perspectives and needs.

1. How might we visually present good content in a streaming service to a user?
2. How might we convey recommendations personalized for the user’s mood and interests?
3. How might we extend the user’s engagement after watching content by interacting with a community?

Design

Ideate

Brainstorming

I brainstormed the key ideas for my application by using the Mash-up method. For each How Might We Statement, I made two categories filled with ideas and cross-pollinated the most important ideas from both categories. Next, I made sketches of the resulting ideas as features and picked the top 3 features for each How Might We Statement based on the user’s needs.

For Sarah, I decided on visual-based pages where users can write their own content and browse posts about watching content for her need of better engaging visuals and descriptions about the watching content. For Emma, I decided on a multiple-choice quiz that evaluates her interests, a generated page of watching content with categories to help make watching suggestions, and a personalized schedule for her need of personalized watching recommendations. For Luke, I decided on a live discussion page with open threads, a feature for discussing and interacting with an online group, and a feature for uploading and listening to audio channels summarizing the watching content.

First Brainstorm Sketch

Second Brainstorm Sketch

Third Brainstorm Sketch

User Stories

I wrote a list of user stories based on the steps the users took to get personalized watching recommendations and to be efficient in enjoying the watching content. The list became two groups of user stories based on the low expertise level users and the high expertise level users. In Miro, I made my MVP based on 3 significant features:

Quiz for personalized watching recommendations
User posts about content
Online communities for discussing watching content

User Story MVP

Information Architecture

Sitemaps

For the information architecture of the application, I wanted to group the pages so that the organization makes sense to the users and is easy to navigate.

Sitemap

User Flows

Based on the users’ needs, I used the 3 solutions to create the user flows with 2 main red routes:

Watching Content
Discovering Content

First User Flow

Second User Flow

Sketches

I turned each of my user flow red routes into paper sketches for the first part of the visual design process. I then made a Marvel POP prototype with the images of the paper sketches to conduct the guerilla usability tests. With the clickable sketch prototype, I conducted 5 tests with a participant for each test. The findings from the test were:

Make the purpose of the main user icons on the screens visually clear to the users.
Change login buttons to connect with other applications.
Make sure the order of the pages and the features make sense to the users.

First Main Sketch

Second Main Sketch

Third Main Sketch

Low Fidelity Wireframes

After I made the sketches, I focused on creating the wireframes with the necessary features and a functional layout based on the red routes in Figma. I included the 3 most important edge cases in the wireframes such as a limit on the amount of submitted text for writing an user post, an error for activating the live group meeting button without group leader authority, and an error for uploading heavy media formats when creating a voice channel.

Main Low-Fidelity Wireframe Screens

Design System and Brand Platforms

I made a brand platform for the SuggestYou application based on the primary research and the users’ needs and goals. I wanted SuggestYou to have an exciting and creative purpose in helping the user overcome difficult challenges in their daily life and improve their overall mood. I chose the light colors for the branding and included them in the moodboard because the application should feel creative to the users. The style guide has colors, text, and shapes aligned with the SuggestYou branding. I conducted an accessibility check on the colors and the text in a few key screens for the High Fidelity Mockup Prototype.

Moodboard for Design System

Style Guide

High Fidelity Prototype

After I created the SuggestYou brand platform and design system, I made the first version of the high fidelity prototype before the first round of user testing. I made 25 mockup screens and used 4 basic animations on the screens for the prototype in Figma. I discussed the prototype design with my mentor and incorporated her feedback regarding the design features and screens in the process.

First Version of First Flow of Prototype

First Version of Second Flow of Prototype

Validate

I conducted 2 moderated usability tests with the high fidelity prototype. For the first round of user testing, I tested with 5 participants in-person. The goal was to find out if the main icons were visually clear in the screens and to discover any possible usability problems. The user feedback was:

1. Watching Plan: make the title of the mood rating bar more clear about its purpose and use.

Iteration of Watching Plan

Once I incorporated the user feedback in the high fidelity prototype, I conducted the second round of user testing. In the second round, I held 5 in-person tests with a participant for each test. The goal was to test the mood rating feature and to identify any minor usability problems. The user feedback was:

1. Watching Plan: the mood rating bar’s purpose is now understandable to the users and the reason behind the feature is visually clear.

Result

After the primary and secondary research, information architecture, ideation, sketches, wireframes, prototype, and user testing, I created an usable application that helped users to get accurate watching recommendations and to discover watching content.

The application is:

Easy to use and efficient.
Empowers users to be confident and efficient by giving accurate watching

recommendations with a watching schedule.
Allows the users to feel creative and excited with ways to interact with posts and to

discuss content with an online community.
Comforts users when they are lost or confused by giving them a way to discover

new content with similar community groups.

The next steps would be to continue the user testing on the main red route features and to expand the watching plan feature to have more detailed customizations based on the user needs.

As a watching content subscriber, the topic of the project mattered to me and I paid attention to the details in the project throughout the process. After I did the research, analysis, and planning, I thought I understood the user behavior and could apply it to the application. Once I talked to the participants in the guerilla user testing and high-fidelity testing, I realized I still had issues in the practical application and the layout needed improvement. I learned that visual details matter to the users and how I convey the details in the application needs to be shown with a purpose. Then, I could make iterations of the application design and make sure that I understood the users’ needs fully. With the feedback from my mentor and my users, I learned a lot from both rounds of the testing and throughout the whole process, and I look forward to learning more from my student projects in the future.

Final Design

SuggestYou Prototype is in a separate website where you can access the final prototype.