YouTube Redesign
Design for Better Experience of Assorting & Managing Saved Videos
Client
Individual Project
Year
Oct - Nov 2022
Service
UI/UX Design; Feature Design
DESIGN PROCESS
BACKGROUND
The Platform
YouTube is an American online video sharing and social media platform. It is rated as the most popular free app on iPad. Therefore, I believe YouTube is a nice platform for me to find state-of-the-art potential in the internet video hosting service industry.
The Feature
Watch Later and Playlists are two of the main features that youtube provides in their primary function - Watch and Subscribe.
However, from both the real-life feedback of the people I know and the app store user reviews, I found people reporting having unsatisfying experiences with these two features, so I decided to redesign these features.
Design Evironment
System: iOS Device: iPad Pro (11-inch) Dimension: 1194 x 843 Appearance: Light Mode
User Research
App Store Review Analysis
Pain Points
Search
It’s hard to search for a video in a list, especially when the user saved a lot of videos in multiple playlists.
Mass Edit
Users can only edit one video’s state at a time; they can’t mass manage the videos in a list.
Forgetfulness
Users tend to forget to watch the videos they saved or added to their playlists.
Confusion
Mix up the playlists and watch later list.
User EXPERIENCE STUDY
Study YouTube’s Current User Flow
To improve the user experience of Watch later and Playlists, I firstly conducted a deeper study of YouTube’s current user flow of these two features. I concluded 5 tasks in total, and the users’ wireflows are shown as below.
Evaluation of YouTube’s Current Design
From the study of YouTube’s current user flow, I evaluated the Pro & Con of the design and used the evaluation as one of my ideation reference.
Pro
The current design enables users to save videos to different playlists or for later watch.
Users can create and customize their playlists, and they can choose which list to add to when they save a video
Users can save videos from both the main page and the player page
Users are enabled to move saved videos among playlists
In some cases, users can be led to the save list and check out the video once they saved it
Users can sort the videos in the lists
Con
The overall workflow of saving videos is chaotic and cumbersome
Users can't search for videos either in Playlists or Watch later list, so it’s hard for them to find a specific video they saved for a while
In Watch later, videos can’t be categorized
Users can’t document the reasons why they want to save a video - for their future reference
The UX hierarchy of Playlist and Watch later is not clear. In most the case, they are on the same level, while sometimes Watch later is below the Playlist
Library and Playlist have similar icons with insufficient differentiation
persona
While there are different use cases of Watch later and Playlists, in this project, I chose to focus on the one that users watch informative videos and save them for future reference. To understand this use case better, gain more empathy with my target users, and build real emotional connections with them, I made this persona below:
Ideation
To visualize the details of the ideas I came up with during my study of YouTube’s current user experience, I conducted a design charrettes.
CONCEPT DEVELOPMENT
Convergent Ideation Map
To organize and present the ideas, I analyzed them into a convergent ideation map.
At this time, the ideas related to Note and Pin were selected for further development as this group of ideas has the most suitable scope for this design assessment.
Low-fidelity Wireflow
Although there are lots of edge cases when users wanted to take notes and drop pins, I decided to focus on a representative user journey of my persona - Tim added a video to one of his playlists with a note, then he watched the video and dropped pins, and finally, he looked for the video in his playlist afterward.
Heuristic Evaluation
In the low-fidelity wireflow, there were two ways to display the note-taking window. I conducted an AB test following the usability heuristics for user interface design, and decided to go with Solution 1.
STUDY YOUTUBE’S UI SYSTEM
Component Set
Color Panel
Primay Color
Secondary Color
Background Color
Typography
Final dESIGN
For a mature launched product, I stay close with YouTube’s design system and make new features in a consistent style with the existing design.
dESIGN dESCRIPTION
Enable users to take private notes while saving a video so they will have a quick reference of what this video is saved for.
Users can also take private notes while watching the video.
If a user was taking a note for a video on Home page and then wanted to watch the video, he will have a smooth note-taking experience without exiting the note window.
Following the principle of error-prevention in usability heuristics, the kebab menu was enlarged to reduce misoperation
For “Save to Playlist”, changed the verb from “Save” to “Add” to differentiate “Save to playlist” from “Save to Watch later”
Redesign the icon of “Add to playlist” to differentiate it from “Library”
Add confirm & cancle buttons to the checkbox window to give more control and freedom to the users.
In the popup notice,provide a portal for users to add notes to the videos they’ve added to their playlists.
Add a cancel button to give more control and freedom to the users.
Users can pin a period of videos that they want to save for future reference with the “Pin” button on the right top of the player. The color of the timeline of the pinned part will turn into dark red, indicating the difference between pinned and unpinned content.
Users can also take notes on the video player page. Once the confirmed the note, a short blue segment will appear on the video timeline where the user started the note. The blue segment will stay in the user’s watch history as an indication of the notes, as well as a reminder for the user of the important part of the video.
Enable users to search videos in their playlists by notes, video title, video description, and YouTuber.
The private notes will be saved in a playlist automatically.
Users can also take private notes while watching the video by double-clicking the center of the video player or clicking on the “Note” icon at the top right of the video player.
Following Youtube’s original design method, a reminder will appear on the top of the video player when the users drag or hold the timeline button, letting them know they can take a note through gesture control.
In the playlists, the timeline of the videos will be enlarged so there will be more places to present the detailed indications of the user’s notes and pins so that users will have a stronger recall of the content of the videos. Therefore, they can assort and manage their playlist better.
fINAL lOOK
Please visit figma for high-fidelityy clickable prototype at:
