Popcornflix Redesign
For our Informatics 132 course project, our team of four (Danielle, Genesis, Paige and Hafsah) re-designed the content streaming platform, Popcornflix, to provide a better user experience to its audience. The goal of the project was to improve the user experience on the platform through identifying problems within the interface and implementing solutions to those problems. We identified five targets for our re-design, and prototyped low, mid, and high-fidelity prototypes to address the concerns of each target.
1. Unintuitive Search Categories and Limited Browsing Functionality
Problem
The site’s homepage lacks personalized content for the user to easily locate content that they find interesting. Users want the ability to easily locate prior content they were watching and to be able to create their own lists. Additionally, the main browsing categories of “Directory” and “Discovery” are unclear in terms of what exactly their purposes are.
Evidence
After completing five remote user tests and four heuristic evaluations, we analyzed our findings by documenting the frequency at which each pain point was addressed and the emphasis and priority each mention carried. We used this data to create a priority ranking analysis with our weighted point system (3 | High , 2 | Medium, and 1 | Low), to create the distribution of our participant’s critiques of the system (see the figure below for a visual representation of this data).
From this analysis, we determined that having no watch history and the inability to create lists ranked second highest in priority in terms of elements of Popcornflix that negatively impact the user experience, while confusion between Discovery and Directory was also frequently seen to be an issue for the participants. We connected the dots between these common complaints in realizing that the confusing system for navigating through content on top of the inability to save your own lists of curated titles contribute to an undesirable experience in seeking and locating content on Popcornflix. Further supporting the theory of these shortcomings in the Popcornflix design, were the results from analyzing our eight in-depth user interviews and examining our competitive analysis.
Motivation/Rationale For New Design
Intention: Allow users more flexibility and personalization with their content, and simplify the browsing experience.
We decided to redesign the Popcornflix homepage to immediately address the platform’s shortcomings in giving the user freedom to curate their own lists, and access their viewing history. We also included categories and recommendations tailored to subscribed, logged in users, in an effort to personalize the user’s experience. Our new home page adds a needed degree of convenience in the content sourcing process of Popcornflix content, with the ability to easily toggle between movies, shows, and videos, select desired genres, and sort by elements such as date created, date added, and alphabetically by title.
Process
Our original sketches of the re-envisioned homepage of Popcornflix all contained three main elements: increased amounts of customization, a more personalized feel, and the transformation of the discovery and directory categories into simplified genre filters. While we had to put some time and consideration into where the final filter navigation links would be set, we all mutually agreed that carousels were the best way to group and arrange content.
Results
Our final design for this target centered around a less cluttered landing page that allows users to easily view and filter through content. The “Browse” dropdown menu at the top lets the user select genres and lists they would like to focus on. On selecting an option from this menu, the below carousels instantly re-load to match the selected filter. Three buttons at the top of the page allow for toggling between movies, videos, and shows, with a red background to indicate the currently selected filter.
2. Unrecognizable Content
Problem
Users are not able to find content that they are interested in viewing, due to highly unrecognizable content. The Popcornflix library mainly consists of indie films and lesser known titles, making it hard for users to relate to the content. With limited details provided about each movie and show, users are quickly uninspired to use this platform.
Evidence
Popcornflix is unable to combat the issue of having unrecognizable content without providing sufficient details about the titles. This is supported by the platform’s lack of reviews and ratings being identified as a major pain point in the user experience by our user test participants. Additionally, our 57 survey respondents offered insight into desirable content by identifying their most frequently selected genres as comedy, drama, and action, which were not the top advertised categories on Popcornflix (New Arrivals, Most Popular, Popcornflix Originals, and Staff Picks).
Additionally, the insight our user interviews gave us into how they select content to watch taught us that the details offered for a film or show can play a large role in one’s decision to watch it.
Motivation/Rationale For New Design
Intention: Create familiarity amongst unfamiliar titles.
Because a lot of the content on Popcornflix is unrecognizable to the average user, it’s very important to help the user feel a sense of familiarity with titles they’ve never heard of before. Through highlighting popular genres, giving lots of details about each title including ratings, and using the recommendations of our user’s friends, we were able to present new content to users in a way that makes it more appealing.
Process
The team agreed on the elements we would like to highlight in providing additional details about each title to our users, but the strategy of organizing this information varied in our original sketches. We ended up choosing a design that provided as much useful information as we could fit without overloading the user. We did this in an effort to both prevent them from having to look elsewhere for additional information, or from giving up on watching the title due to not knowing enough about it.
Results
To pull off our vision, we created an engaging details page and a friends’ suggestions carousel. Each title in the carousel displays the friend’s initials in the upper right corner avatar, and expands to show their full display name on hover. We also show quick details of the title on hover, and allow for clicking “Play Trailer” to move the title’s trailer into the fixed header of the webpage, allowing the user to watch the trailer as they continue to browse the library.
3. Ambiguous Account Purpose
Problem
Users are not able to identify the purpose of creating an account on Popcornflix, since the benefits of doing so are not stated, and the platform is advertised to be free. When signing up for an account, the site does not display the subscription tiers and their benefits, and the perks that come with a subscription are not disclosed, making subscribing unappealing and seemingly unnecessary.
Evidence
We saw that accounts functionality being unclear ranked number one amongst the top ten most unfavorable aspects of the user experience, from our remote user tests and heuristic evaluations. We also noted from our user research of 57 survey respondents that most users are willing to pay for streaming services, and currently pay between $1 and $20 a month in subscription fees.
Additionally, our competitive analysis made it clear that the direct competitors of Popcornflix highlight the purpose of subscribing to the service on the Welcome page.
Motivation/Rationale For New Design
Intention: Make the purpose and motivation to create and use an account clear.
Users should understand the full range of features that are available to account holders. The use of a subscription system will allow for additional features to be available and customizable for our user base.
Process
The team found multiple different ways to display information regarding subscriptions. Original sketches ranged from simple designs, to more information heavy designs. The team decided it was best to not overwhelm users when choosing a subscription, and focused on displaying the basic functionality and point associated with each plan.
Results
Our high fidelity design encourages users to purchase a subscription plan to improve their user experience through additional features and customization.
4. Outdated Visual Design / Insecurity Concerns
Problem
Users are hesitant to use Popcornflix when they see the site’s outdated UI, with a poorly chosen color scheme, oversized content headers, an un-intuitive layout, and improperly sized carousels. Because of the incorrect scaling of title covers, the images appear blurry, and the font choices do not seem modern and aesthetically pleasing. Additionally, the lack of white space makes the page look cluttered. The combination of these factors inspire security concerns amongst users, as the web application appears older and therefore may not be properly maintained. These security concerns also stem from the lack of features such as a help section and provided contact information.
Evidence
We saw that outdated UI and the feeling that the application is not safe / secure both ranked in the top ten most unfavorable aspects of the user experience, from our remote user tests and heuristic evaluations.
Motivation/Rationale For New Design
Intention: Modernize the UI to look more in-line with popular streaming sites to make it known that our site is up-to-date.
Update the UI to be more professional looking to make users feel more secure and trusting of the platform.
Process
The team decided to modernize Popcornflix with the use of high quality images, proper spacing, new fonts, and a new color scheme. We incorporated ideas from multiple sketches to make the site feel more secure: this includes the idea of readily available contact information and a help center.
Results
The modernization of Popcornflix can be seen throughout all of our high-fidelity mockups, but our strategy for further addressing the security concerns of Popcornflix also included adding contact and help information to the footer of the application.
5. Search Engine
Problem
The search bar functionality on Popcornflix makes it difficult for users to find the specific content they are looking for. More often than not, the top three results do not begin with the letter the user typed nor are the films relevant to the search. As the user types, there is no autofill functionality to assist the user in their search, and no suggestions are offered to them in an effort to correct errors. Furthermore, exact searches are required to find specific results, and the application will return no results at times, rather than try and show similar content or suggest other search criteria.
Evidence
Our user tests and heuristic evaluations all identified the search bar to be a pain point in the user experience of Popcornflix.
Motivation/Rationale For New Design
Intention: Improve the search functionality and feedback, make it easier for users to find content.
The user should not be left with a blank screen when trying to search for content. There should be immediate feedback that allows the user to make a selection.
Process
The sketches created by all team members were similar; they all focused on immediate feedback when typing in search criteria and giving a wide range of suggestions to the user. The team ultimately decided to use a magnifying glass as the icon, as most users will immediately recognize its functionality as a search bar.
Results
