Watchbox: Video Streaming Responsive Website Design
June-July 2023 - 2nd of 3 projects in Google UX Design Certificate
1-Person Team - Just me
My Role: UX Designer working through each step of the design process
For my second UX Design project as a part of the Google UX Design Certificate, I developed a high-fidelity prototype for a video streaming service with attention to responsive design.
This is how I did it.
The Challenge
According to a study done by Nielsen, audiences spent 33% of their total TV time on streaming services in 2022. As individuals and households continue to grow in preference of watching TV on their own schedules, consuming entertainment via streaming services and platforms will only continue to grow. In another study done by Ipsos, users of streaming services largely identified cost and content as top criteria for deciding on TV streaming services, which also were the top criteria for reasons in dropping a service.
The Client
Watchbox is a fictional TV show and movie streaming service. Though the company is fictional, real users of video streaming services were interviewed during the research phase as well as participants during usability testing.
Design Process
This is the design process I followed and referred back to throughout this case study.
Empathize
First, I started by understanding what general user experience was like with different streaming services through a competitive audit. I analyzed 7 different competitors, including both direct and indirect competitors.
Next, I identified features from two direct competitors and two indirect competitors, which gave me additional understanding of what a user might typically experience when trying to pick something to watch on a video streaming service. This contributed to the questions I selected for user interviews.
Finally, I interviewed 5 individuals on what problems they face when they order at a food truck.
My script addressed multiple perspectives and angles around user experience with video streaming sites using open-ended questions such as: “How often do you watch movies or TV shows on a streaming service?” “How do you feel about the amount of content to choose from on a streaming service?”, “In what ways do you typically end up choosing content?”, “What has made you cancel a streaming service in the past, or what would cause you to cancel in the future?”
The full interview script can be found here.
Each interview lasted 10-15 minutes in length. Clear trends began to emerge when I gathered the data into an affinity map and synthesized the themes.
After this, three clear user pain points began to emerge, which are summed up below:
Define
As I moved into the second phase of the design process, I used the data I collected from the competitive audit, feature analysis, and user interviews to craft a user persona that effectively demonstrates the pain point that there are too many options to pick from. This helped create clarity around the problem that I was designing a solution for.
So, let me introduce Joseph! Here, you can see his background, core goals, motivators, and pain points that he would like to see addressed.
After this, I wanted to be able to demonstrate to potential stakeholders the importance of designing a solution for the problem we’re facing with there being an overwhelming number of options. To do this, I created a user journey map for Joseph to draw out what a typical experience might look like when Joseph’s trying to pick something to watch. What goes through his mind? What unconscious thought does he have? I identified obstacles Amelia might come across that my website design could address.
Ideate
Based on my research, I hypothesized that giving users a way to generate custom lists and reviews or things they’ve watched would help other users filter and choose something to watch more quickly. I decided to test that idea by giving the ability to review titles as well as creating custom lists to allows users to display their own recommendations to other users.
With this in mind, I designed an early edition of a sitemap to lay out some basic information architecture.
Then, I decided to map out several user flows that could provide potential solutions to users by narrowing down their selection choices so that they enjoy using the video streaming service instead of feeling overwhelmed.
After this, I began to sketch out several iterations of paper wireframes. I found that it was a little difficult to come up web pages that were intuitive based on Gestalt principles while also aligning with positive elements from competitor websites. Several competitors rely on the use of motion to scroll through numerous carousels of titles, which I realized probably contributes to the overwhelm that users feel when trying to select something to watch.
Prototype
In transitioning to the fourth phase of the design process, I took my paper wireframes and used Adobe XD to turn them into mid-fidelity digital wireframes. After having previously learned Figma, I found that there were several features on Adobe XD that I enjoyed using, especially for a project with as many components as you would generally find on a video streaming website.
Test
After this, I connected these wireframes into a mid-fidelity prototype and conducted two rounds of a usability study involving 5 participants to answer research questions such as, “What can we learn from the steps users take to pick something to watch?”, “How useful do users find it to look at user-generated recommendations?”, and “Are there any parts of the review process where users are getting stuck?”
Further details for the study can be found here.
Based on the feedback received, I prioritized and incorporated key insights while updating the prototype to high-fidelity.
Key insights from the two rounds of the usability study proved that my earlier hypothesis was correct. Users indeed felt that custom curated lists and reviews would help them, but I had designed them to simply be another way of filtering. Users actually wanted them to be featured more prominently and a more central aspect of the website design. Therefore, I designed ways to simplify filtering options while enhancing the ease with which lists are created and highlighted.
High-fidelity mockups displaying two key user flows are shown below:
The final high-fidelity prototype I produced is linked here.
Key updated aspects include a making better use of white space, allowing review capability at a later time, and making lists more prominent.
Interactive user flows include:
Adding a movie to Watchlist from Featured List:
Homepage > Find “Featured Lists” > Open first “Featured List” > Open first title on the list > Add to Watchlist > Back to Home
Add a review to a series you’re currently watching:
Homepage > Find “Keep Watching” > Open first title > Add a review > Back to Homepage
Respond to new direct message:
Homepage > Find Messages Icon > Open new message > Respond new message > Back to Homepage
Final sample responsive mockups are shown below:
Next Step
A key next step would include further accessibility considerations. Accessibility was considered throughout this process, resulting in key design decisions such as:
Hierarchy: Using different font weights helps draws user attention and helps distinguish where the important information is. Using larger, bolder font for the important information also increases readability.
Large touch targets: Everyone benefits from larger touch targets, in particular users with motor and/or vision impairments to help increase accuracy for the user. The buttons in this design are large with negative space around them to draw attention as well as to increase likelihood of being hit accurately and consistently.
Color contrast: According to a study done by the World Health Organization, 2.2 billion people around the world have a near or distance vision impairment. Therefore, it was critical to ensure the design has sufficient color contrast for readability. This is found in CTA elements as well as in body text, such as reading descriptions and pricing on the menu.
Universally recognized symbols: Color is a good visual cue, but user feedback showed that better cues were needed. An additional variable incorporated into the design was the use of universally recognized symbols alongside color in important places, such as the cart icon for the checkout process and a garbage icon for "Remove".
Instructions on text inputs: Screen reader technologies usually skip over non-label text such as placeholder text in input fields. In consideration of those who prefer to use screen readers to navigate through a form, this design utilizes instructions outside of the field to provide essential cues.
Though these were considered and included in the designs, I wonder what other aspects may have been left out. A design critique session or another usability study specifically around accessibility could be useful.
Lessons Learned
This was an invigorating experience. As a novice designer, documenting my steps and design choices helped me put together standards for a UI kit that allowed for multiple iterations of the prototype. Especially in a project like this with many components, it increased my skills and process as a designer.
It also brought me joy to think about how a simple additional feature such as the ability to curate custom lists could allow different people’s passions and personalities to come through while also allowing them to build connections with other users.