DoesItResolve

Personal Project

DoesItResolve.com is a website that aims to help Television fans decide if they want to watch a series or not. It aims to do this by displaying a rating communicating whether a series concluded in a way that resolved major plot points. This includes romantic, adversarial, and thematic plotlines.

What follows is an account of my design process from conception to testing.

A cropped thumbnail showing the top portion of a laptop mockup with the system on-screen

OVERVIEW

The Team

Myself (UX/UI Design, Web Design)

Tools

Figma (UX/UI and Prototype)
Google Forms (Surveys)

Introduction

People all across the US love watching TV. This can range from comfort comedies to engaging dramas. Those who love to watch television series and anthologies know that it’s extremely disheartening to become engrossed in a series only to find out that the ending leaves much to be desired. Existing internet databases are outdated and lack the user experience optimization that encourages users to rely on their system in the future.

Project Goals

DoesItResolve.com aims to provide TV enjoyers with a place to check on a show they’re interested in watching. If they are generally put off by an abrupt ending to a series, they can find solace through using this site. The intent is to allow users to see all the relevant information about a series’s ending with just a few keystrokes.

My Role

I am the sole UX/UI designer of this project and plan to design the website on Webflow upon completion of user testing.

My design process for the project is shown below:

design process

RESEARCH

Personal Observations

This project is motivated primarily by personal interest. For this reason, I didn’t conduct needfinding until I engaged in loose research on Google and Reddit. I also posted a submission to r/TipOfMyTongue inquiring about a site I thought I had seen in the past. The website had the same function as what I am designing now. No one providing guesses was able to find the correct site so I decided to create a system myself after seeing many offers to help out. I also pulled quite a few ideas for system features from the comments of this Reddit submission.

Needfinding Survey

Having identified a need within one social media community, I wanted to get a feel for how much of a need there is for a system such as this in the greater community. For this reason, I crafted a survey consisting of questions aiming to gauge the amount of use the site might see. These questions ranged from “How often do you start a new television series/anthology?” to “Do you believe that you would benefit from using a system that tells you the quality of a series’s ending?”. 

Based on this survey, a significant number of participants believe that they would benefit from having access to this system.

IDEATION

Design & Usability Goals

For this project, I prioritized three critical design goals when developing the prototype:

  1. Allow users to provide input on ratings and opinions.
  2. Allow users to quickly find their desired series’s rating.
  3. Allow users to view opinions from fans of a series on its details page.

Additionally, I decided to focus on two primary usability goals for this project. While all usability principles are important to keep in mind, I find it helps to specifically prioritize two.

  1. Generalizability - The system should utilize elements of similar sites to help the user feel more comfortable exploring the system.
  2. Recoverability - The system should allow users to easily undo any mistakes or slips.Allow users to quickly find their desired series’s rating.

User Flow

After understanding the user’s needs and formulating goals for the app design, I created a user flow with Figma to visualize the common paths a user might take through the system:

A flowchart showing a typical user's path throughout the website

Wireframing

Wireframing was done in order to get a general feel for how the site would be laid out. I designed the interface with simplicity in mind while ensuring that all of the necessary information was displayed in a pleasing way.

Basic versions of the final website created to focus on the fundamental building blocks rather than visual design

PROTOTYPE

Visual Design

For this interface, I decided to go with a calm, welcoming vibe. I utilized Figma’s design styles features to create a set of uniform text and color styles that are used throughout the website UI. For typography, I chose Rubik because it is friendly and has a soft feel. This complements the soft, rounded shapes of the rest of the interface while maintaining readability. I used different weights and sizes to distinguish hierarchy.

Common color theory suggests that purple communicates calmness and positivity so I instinctively began experimenting with hues of purple. I landed on one which was slightly muted so as to not overwhelm the user. Shades of green, red, teal, and gold were also used to visually identify ratings in addition to the words labeling the pills on Series Details pages. The exact colors used throughout the design are shown below:The specific colors are shown below:

Five colors and three black and white shades that make up the primary brand colors

High-Fidelity Prototype

For the visual aspects of the prototype, I drew inspiration from sites that were provided in the replies to my Reddit post. These inspirations were generally styled similarly to old websites from over a decade ago. One such website that was proposed, which much of the Browse page organization is based on, is IsMyShowCancelled.com , which organizes shows in a list format with similar information but has an For this reason, I wanted to reference visual and functional aspects from these systems while updating the UI to bring it up to speed with current standards and trends. 

Landing Page: When the user first opens the website, they are greeted with a landing page. This simple page contains a call to action, a central search bar, a search button, and a Browse Series button. There is also a link to log in to a profile. From this page, the user can choose to input the name of a specific series or browse a database of shows that have been added by moderators.

A screenshot of the landing page of this website

Browse Series: This view is simply a visually pleasing rendering of a back-end database. Each list item contains a thumbnail of the series’s cover, the name, air years, number of seasons, and the resolution rating. The “Read More” button brings the user to the Series Details page for that specific series. The layout of this page is optimized to be simple and easy for the user to browse. The use of colored pills makes it easy for the user to scan for series that fit the resolution type that they are searching for.

A screenshot of the page where users can browse series

Series Details: This page is projected to be the most-used page of the website. It contains a summary of the series (pulled from Google Search API), a rating with an information pop-up next to it (a small flag that opens on hover), and Points of View that are pulled from various community sources and direct user submissions. Underneath the series’s poster art, there is an interactable poll. This poll allows logged-in users to cast their vote if they agree/disagree with the series’s rating.

A screenshot of the series details page

TESTING

Usability Study

Having finished the prototype, the next step is to test the completed prototype on theoretical users. The main goal is to gauge how long it takes users to navigate through DoesItResolve.com with minimum assistance from the development team. I tested the prototype on individuals between the ages of 16 and 53 to determine usability.

These participants were guided through completing this sequence of tasks:

  1. Search for the series “Once Upon a Time” from the landing page.
  2. Vote for whether or not you agree with the series’s rating.
  3. Find and open the details for “The Good Place”.
  4. Find the third Point of View on this page.
  5. Report the page for having an incorrect rating.

Participant Feedback

After the usability studies, I asked for feedback about the application via verbal interview. The questions I formulated for the interview are as follows:

NEXT STEPS

This project is still in-progress. Here are the next steps that I need to accomplish before I will consider it finished:

  1. Conduct user testing
  2. Collect and synthesize participant feedback
  3. Draw conclusions about the direction to take DoesItResolve.com going forwardAdd a brief onboarding tutorial for new users which led them through the primary functions of the application.

Thank you for checking up on the progress of DoesItResolve!

If you'd like to work together, contact me through my About page!