2021

A Spring with Peacock

University of California, San Diego — La Jolla, California
UI UX Product Research

Role
Product Designer

Overview
Peacock is a streaming service owned by NBC. We chose Peacock to research and redesign because compared to its competitors, users can access and watch titles for free, a feature none of the other competitors have implemented, and we wanted to see how the app could be improved to incentivize app usage.

Streaming services have been gaining popularity and usage due to the pandemic, but many, if not all, require a payment plan to watch the shows they provide. While Peacock has the option for a premium plan to access more streams, users are able to browse and use the service for free with the creation of an account.

Project Skills

Design Thinking

User Research
User Interface
Wireframing & Prototyping
User Testing

Problem
Our user testing showcased that interviewees struggled with locating Peacock’s watchlist.

The watchlist lacked distinguishing visual indicators to inform users when changes were made to the watchlist.

Solution

A redesigned watchlist user journey that improves user engagement and experience by increasing feature visibility and status feedback.

Our Journey
How We Found Our Problem and Solution

Empathize
Main Methods: User Interviews Competitive Audits A/B Testing
In our testing, we interviewed users (n=6*) ages 15-25 who had prior experience using rival streaming services. Our users were given a set of tasks that would provide information on consistent pain points found within Peacock.

Goal: Our main purpose of the interviews was to isolate the top usability errors and narrow our scope to one component to concentrate on for our redesign.

*Due to the pandemic and time, we were constrained to interviewing those within our vicinity such as housemates and family members, resulting in a limited user pool.

Define
Competitive Audits

It was evident through our testing that all our users struggled with Peacock’s watchlist feature, including locating and using the watchlist.

Many were confused as they clicked through the app to try to find it, and some failed in finding the watchlist. This repeated pattern led our team to redesign the watchlist component.

The Watchlist
The watchlist is a common feature in many streaming platforms. They usually serve the same purpose of being a personalization option for users to track and catalog content by adding titles. With a list of planned and favorite titles that can be found quickly, users are more likely to come back and watch content because it removes the obstacle of remembering and searching for content.

Competitive Audits
At the current time of research, Peacock has three main streaming competitions on the market: Netflix, Hulu, Disney+.

We tested through our competitors’ version of the watchlist to determine the best and worst practices used on other apps. Our main goal of our competitive analysis was to map out the user journey of each respective app and compare them to Peacock's to find a solution to our users’ struggles with the watchlist.

Ideate
Sketches

After analyzing our research and competitive audits, we moved on to ideation. Our team members each sketched out redesigns of the watchlist component inspired by other app’s take on this feature, while keeping our focus on our user’s needs in our wireframes.

Prototype
Hi-Fi Figma
Our team split into two groups to combine features from our sketches that best addressed the user’s needs and frustrations, resulting in two redesigns.

I worked on Iteration #1.

Iteration #1
The main focus of this iteration is the addition of the Watchlist into the categories navigation bar.

We placed it as the second option in the fixed horizontal scroll list for easy and quick access. Many users scrolled through this area when looking for the Watchlist in the app.

Landing Screen

Titles are now the landing screen to engage users to interact with content. Watchlist is included in the top bar Categories for quick access.

Empty Watchlist

CTA button redirects with “Start browsing!” to encourage users to engage and interact with content.

Filled Watchlist

Two columns for quick skimming. Invites users to directly add content from the page to increase Watchlist interaction.

Search Function

Now integrated to top navigation bar to reduce confusion on functionality. Includes suggestions to prompt users on what they can search for.

Iteration #2
This iteration fixes the Watchlist to the bottom navigation bar for quick access for the user from anywhere on the app.

Users can now add channels found from the Channels page to the Watchlist, making the Watchlist a universal feature of the app.

Landing Screen

Watchlist button included as permanent fixture to bottom navigation. Titles are immediately shown to engage users with the content.

Empty Watchlist

Text simultaneously invites users to add content with CTA button and teaches users on the functions of the Watchlist.

Filled Watchlist

Now includes categorizations of content users have added for quicker access to specific titles.

Content
Page

Larger buttons draw the eye and give prominence to actions users can take.

Test
A/B Testing
To gain more information on which iteration best addressed our user problem, we created a set of tasks and questions for our users to complete that focuses on our redesigned Watchlist. Our tasks aimed to gain further understanding of which iteration met the needs of the users the best and increased app engagement. We kept these questions in mind as we conducted our final user interviews:

Did the redesign help the user experience positively without seeming too unfamiliar?
Did minor tweaks such as on the search bar improve usability of other features found in the app?
Were user pain points addressed well and in the best possible manner?
What changes can be made to further improve the redesigns?

Landing Screen A/B Results

Empty Watchlist A/B Results

Filled Watchlist A/B Results

Conclusion
Success Metrics
Our rationale for redesigning the watchlist feature was that it was frustrating and confusing for users to locate, which negatively impacted their browsing journey and streaming experience as a whole. In general, users seemed to prefer Iteration #1 because the UI has better spacing making the design feel more breathable and less cluttered compared to Iteration #2. However, there are minor features on Iteration #2 that were well liked by users—for example the categorization of the watchlist and the yellow active navigation button signaling what page the user is on in the app.

As a whole, users enjoyed the Peacock experience better with the ability of more accessible and editable watchlists which increased a greater feel of personalization within the app. Users felt seen and recognized their experience on the app was unique to each individual. As a result, designing a more customized and seamless streaming experience through features like the watchlist, Peacock will be able to increase user retention and loyalty.

These are some possible key performance indicators:

Amount of content viewed from watchlist
Amount of content added to watchlist
Number of users accessing watchlist

Learnings
Journal
A lesson learned from this redesign is the impact of undermining smaller features and how they affect the overall quality of the product experience for the user. Initially, we felt the watchlist task was perhaps too small and not a significant enough feature to redesign.

However, our user testing eliminated our doubts as users emphasized that they felt more inclined to navigate through the app and browse through the various TV shows and movies all because of the watchlist redesign.

By including simple but new call-to-action components such as “Start browsing!” to the watchlist, users stated they felt a stronger need to engage with the app and find content to add to their list. In short, features that appear small can either significantly elevate or ruin a user’s overall experience and perception of a product.