Igor Syvets

YouTube Redesign

September 2013
Over the last few years YouTube has been gradually changing and gaining new features. At the same time, there’s some usability and design issues appeared. I’ve been reading YouTube feedback that people provide on the internet and Google Product Forums. Not everyone’s happy with how things work now. I use YouTube every day and I can see many possibilities for the future improvements.

In this project I want to take a look at some of the problems YouTube has, and to redesign the most important page of YouTube: video page. I've also developed an interactive prototype of my design, so be sure to check it out after.

Layout

Today there’s a lot of reasonably priced high-resolution monitors available. But modern websites still need to support small display resolutions. According to w3schools.com 9% of internet users have 1024x768 displays (by January 2013). Supporting only this resolution, in some cases, may decrease user experience on higher resolution displays. That’s why adaptive design becomes more and more popular.

One of the main goals of YouTube is to provide a comfortable way for users to watch videos. So the video page should be focused on this experience. If you take a look at the current version of video page with 1920x1080 display, you will notice that video takes only about a quarter of the available space. And that’s with an expanded version of YouTube player:
Because of that, I have to use YouTube with 150% browser zoom. It makes video watching more comfortable, video also becomes more-or-less centered on the screen. But the downside is that icons and buttons become blurry after this zoom.

So for the best user experience YouTube should have at least 2 layout variations: for high-resolution and low-resolution displays (not talking about mobile screens right now). There’s no need to create really different designs. Appropriate scaling for every element will be sufficient. It can be achieved with responsive design.

For demonstration purposes, I decided to make only a high-resolution version.
Another problem is in the arrangement of the elements on the page. They’re not aligned with each other.
My design consists of 2 columns:

Details

1. Logo

Now, when the main layout is set, let’s dig into details. Current YouTube logo feels a little dated, so with this redesign I also wanted to have a modern-looking logo. YouTube brand is very recognizable, so I didn't made huge changes. I decided to go with YouTube button, because it’s also very known. You can see this icon on every embed YouTube video.

2. Main menu

Current main menu on video page (“Guide”) looks really out of place. When it’s expanded, the video page starts to look overloaded with elements. I moved the main menu under the logo. To access it, user needs to put a mouse cursor over the logo (like he wants to click it and go to the home page). The revealed menu looks the same as if was on the home page.
Another problem in the current YouTube menu is in how menu items are sorted there. Right now, for a registered user it looks this way: What to Watch, My Subscriptions, Social, Playlists, History, Watch Later. But this list should be sorted by a priority for the user. For a registered user most important item here is “My Subscriptions”. It should be the first in the list and it should be the first thing user will see when he opens up youtube.com. User creates subscriptions because he knows what he wants to watch and therefore seeing YouTube recommendations is not a top priority for him when he’s visiting the home page.

So my version of the main menu list looks like this: Subscriptions, Playlists (it’s not “playlists” from the original menu, I will describe this later below), Activity (actions made by user’s subscriptions), Recommended (“What to watch”), Trending, Popular, Watch Later, History.

As for User profile dropdown menu (“Philipp Bryan”), I decided to move the list of playlists created by a user out from it. It's not right to take a big portion of a user’s screen every time he wants to access his channel page or settings.

3. Video

If a user watches a video that is a part of a playlist, he can see faded-out screenshots of the next and previous videos from the playlist near the main video. He can hover his mouse cursor over that screenshot and switch to that video. If a video is not a part of a playlist, an area left and right to the video will be dark gray.
YouTube player has also been modified. User can click on a playback time to quickly copy a video link with a current time into a clipboard.

Some time ago YouTube allowed to change a video quality in 2 clicks. But recently this functionality has been moved into player settings menu (gear icon). So to change quality now, user needs to make 3 clicks. Users hasn’t been happy about it, because it’s one of the most used settings in the YouTube player. I moved quality selection back to a player panel. To access it user needs to hover a quality button and then click on a needed quality level. Another advantage of such placement is in that user can always see his video quality.

4. Video details

I’ve split a video description block into 3 main parts: most important info about the video, actions towards the video, info leading to other videos. Here’s how it looks in the current YouTube design:
Here’s how I structured it in my concept:
Number of views, likes and dislikes are now made in the same style. I’ve also added an info about when was the last time user watched the current video (“Watched 3 weeks ago”). Another strange thing in the original design is tabs like “Share”, “Add to”, “Stats”, etc. This is “actions” so it’s not the best way to represent them as tabs. Plus, it makes inconsistency with “About” tab. I've made them look like buttons.

To my experience, “Favorites” is the most used playlist. So by default, “Add to...” button will add a video to “Favorites”. Users can choose other playlists by clicking on the arrow near the button. Users need a quick way to see other videos uploaded by an author, so I’ve added a button into an author block that will expand a list of most popular videos uploaded by him.

5. Playlists

Another problem that YouTube has is a multiple copies of the same videos. If user uploads a video and it becomes decently popular, he may expect that someone will download this video from his channel and re-upload it again to a different channel. When this happens multiple times for the same video, it may become hard to find the original source on YouTube and the video author may not get a credit for it. Also, when video gets re-uploaded, its quality will gradually become worse.

It’s understandable. When one user uploaded a funny video and another user has a whole channel dedicated to various funny videos, he may want to re-upload that user’s video to his own channel and share it with his subscribers.

The solution that I’m suggesting may partly solve this problem. Allow users to subscribe not only to channels, but also to playlists. So, instead of creating a channel full of other’s funny videos, user can create “Funny Videos” playlist. Other users would subscribe to that playlist and watch it, while the author of the video would still get a credit.

Concept of “subscribing to playlist” is not new, it’s already implemented in the app like Spotify. I think it would make a good fit in YouTube too. To make a playlist subscription user needs to hover a playlist name. And to see his all playlist subscription updates he needs to go to the “Playlists” section of the main menu.

Demo