top of page
Redesign of YouTube's Playlist Feature
Background Story
As a devoted YouTube user,  I often find interesting videos, prompting me to save them to my playlist for future viewing. While this practice has allowed me to curate a diverse collection of videos, it also drove frustrations in two aespects:
  • When I opt to add a video to my playlist, I am invariably required to scroll to the far left in order to access the 'save' button.
  • The video is automatically added to a playlist, which may not be my preferred choice.
  • Each time I attempt to locate a previously saved video, I have to meticulously examine each playlist.
  • Attempting to use the search bar at the top of the page, I realized it does not search within the playlists, but rather across the entirety of YouTube.
User-Flow Analysis
To verify that the issues identified were not unique to my experience and to understand the general user interaction with the playlist feature, I conducted task flow analysis by giving three groups of participants different tasks and track the user journey.
Demographic
According to the research on Youtube’s Demographic in US, I picked 18 participants and divided into 3 groups to conduct research
Group 1: Save Video to the Playlist
Participants: 6(named as A, B, C, D, E, F)
Task 1: Add a video into your playlist from video detail page
Task 2: Add a video into your playlist from any page besides video detail page
3 out of 6 click the "Library" icon
1 out of 6 click the "Library" icon
Group 2: Locate Video in the Playlist
Participants: 6(named as A, B, C, D, E, F)
Task: Find the video in your playlist that you saved at least half years ago.
3 out of 5 Find the video through "playlist" section in the library
2 out of 5 try to find the video using the search bar on top 
Group 3: Edit Playlist
Participants: 6(named as A, B, C, D, E, F)
Task 1: Create new playlist
Task 2: Edit name and privacy
Task 3: Delete playlist
Summary of Pain Points
Save Video to the Playlist
  • It is difficult to access the "save to playlist" function on the video detail page
  • Videos are often inadvertently saved to an undesired default playlist
  • Default playlists (Watch Later and Liked videos) are not distinguished from user-generated playlists
  • Misleading search function inside the playlist, which searches across the entire website instead of the targeted playlist
Locate Video in the Playlist
Edit Playlist
  • Lack of confirmation prompts when canceling the creation or editing of playlists
  • Inconsistent visuals and icons that distract users attention
Heuristic Evaluation
After getting insights from users, I critique the specific pages from the designer’s perspective using heuristic evaluation as the methodology.
Competitor Analysis
To gain insights from industry standards, I conducted a competitor analysis on the potential competitors.
I first focused on Identifying competitors with similar attributes using a positioning matrix, analyzing content complexity and publishing modes (web 1.0 or web 2.0).
After choosing similar competitors, I analyzed how these competitors manage playlists and address common issues like efficient video retrieval.
Positioning Matrix
Competitors' Market Analysis
Playlists' feature analysis
Takeaways
Compare with Youtube, the competitors have advantages in:
  • Effective hierarchy in playlist interfaces, with a unified visual system
  • Essential information flow in the “choose playlist” section, aligned with user logic
  • Consistent visual elements across interfaces for user familiarity and ease of navigation.
Based on the user and competitor analysis, it became evident that the issue I faced was widely experienced. More importantly, I identified specific task flows that require refinement. The next step is to summarize the main challenges...
How Might We...?
How might we make the playlist feature more user-friendly by streamlining the process of adding videos to playlists and enhance the ease of finding saved videos?
Design Objectives
  • Elevate the prominence of 'save' button.
  • Eliminate default playlist saving, allowing direct playlist selection.
  • Streamline new playlist creation, with confirmation prompts.
  • Introduce a search function within each playlist.
  • Develop a comprehensive search across all playlists, with options to narrow down to specific ones.
  • Standardize UI elements and design language to encourage playlist usage.
Lo-Fi Prototype
Based on the goals we want to achieve, I iterated a few versions of prototype to test layout of different components, colors, text size etc.
Hi-Fi Prototype
After a few rounds of iteration and usability testing, I generated the high-fidelity prototype
Task 1: Save Video to the Playlist
Goal
  1. Elevate the prominence of 'save' button
  2. Eliminate default playlist saving, allowing direct playlist selection
Flow Iteration
Problem: Difficulty accessing the "save to playlist" function while watching videos.
Solution: Reverse the sequence of “automatic save” and “playlist selection”. Encourage user to categorize first rather than save first.
Design Iteration
Overall, I prioritize the “save” feature, changed the structure of different sections in the video detail page, and revamped the visual system.
Detail Iteration
Task Improvement
Average video saving time
From 10 to 4.2 seconds
Satisfaction rate
From 33.3% to 88.9%
In the usability testing...
  • The efficiency of locating the “Save” button boosts 58%
  • Reduce the error touch to privacy icon to 0
  • The “Similar for you” section encourages 5 out of 9 users to explore other videos 
  • Reduce the error touch of "Like" and "Dislike" button to 0
Task 2: Locate Video in the Playlist
Goal
  1. Clear categorization of playlists and sections in the library page
  2. Develop a comprehensive search feature across all playlists
Information Architecture
Problem: Default playlist(Watch Later and Liked videos) are not distinguished from user-generated playlists
Original
New
Solution: Revamp the information architecture and rearrange playlists' hierachies
Flow Iteration
Problem: Users cannot retrieve saved videos quickly
Solution: Add a separate "playlist" page with sorting and search feature
Design Iteration
Overall, I rearrange playlists hierachies, and unified UI elements for navigation bar, playlists’ icon, overview image etc.
Detail Iteration
Task Improvement
Average video finding time
From 108 to 62 seconds
Task Completion Rate
From 50% to 100%
Satisfaction rate
From 16.7% to 88.9%
In the usability testing...
  • the search keywords function helps 8 out of 9 users to quickly locate the video
  • the sorting feature helps 9 out of 9 users to quickly locate the video
Task 3: Playlists' Management
This task includes 3 parts of iteration
Goal
  1. Standardize UI elements and design language to encourage playlist usage
  2. Enhance error prevention of the pop-up page
Part 1: Create New Playlist
Design Iteration
Task Improvement
Task Completion Rate
From 83.3% to 100%
Satisfaction rate
From 50% to 100%
In the usability testing...
  • ​Chance of loosing content when accidentally click outside the pop-up window reduce to 0
Part 2: Edit Playlist
Task Improvement
Task Completion Rate
Remains100%
Satisfaction rate
From 83.3% to 100%
In the usability testing...
  • ​Users feel more comfortable and clear when inputing description content
Task Improvement
Task Completion Rate
Remains 100%
Satisfaction rate
Remains 100%
In the usability testing...
  • Users perceive the interface fit with the overall design system
Reflection
After finalizing the design decisions, I look back and examine each stage of this case study, and summarize a few points for future improvement
What goes well
  • Discovered the common pain points among users
  • Conduct the comprehensive user research process, including task-flow analysis, heuristic analysis, and competitor analysis. These methodologies can be applied in future projects
  • Each design decision has been validated by usability testing and user feedback
What I can improve
  • With more resources and time, I want to conduct a larger scaled data-driven design iteration 
  • More success metrics could be measured and valued to achieve the goal
Part 3: Delete Playlist
Design Iteration
bottom of page