Youtube Redesign Challenge
How might we declutter the YouTube interface to streamline the way users navigate and interact with the platform?
User Interface Design
Wireframe Prototyping
Heuristics Analysis
SCOPE
Four-day design sprint, flying solo, as part of my UX UI training program.
​
MY ROLE
I was responsible for deconstructing the Youtube interface by conducting a heuristics analysis, a visual inventory and competitor research, in order to purposefully redesign the interface. The project culminated in a design critique where I justified my design decisions to fellow classmates and teachers.
​
TOOLS
Figma, Figjam, Jitter
ANALYSIS OF EXISTING APP
​
To kick off this challenge, I took stock of Youtube's current interface and utilised Jakob Nielson's principles of usability heuristics to understand what was working in this design and what was not. The majority of issues I identified fell under the 8th principle of aesthetics and minimalist design: Interfaces should not contain information which is irrelevant or rarely needed.
​
As someone who uses this app regularly, I was suddenly overwhelmed by how busy it was when paying closer attention to the details of its interface:
1
2
3
5
4
1
The homepage header is crowded and includes functionality that not all users may be interacting with.
2
Ads and videos have little distinction between them (likely a purposeful decision from Youtube).
3
4
Video components flow one into the next in the homepage's endless scroll which feels messy.
The video player page is a mess of action buttons and video information where hierarchy feels completely lost.
5
The 'shorts' page is so crowded with action buttons that it distracts from the actual video content.
VISUAL COMPETITOR ANALYSIS
​
By evaluating the visual elements and design choices of competing platforms, I gained valuable insights and inspiration for the redesign.
​
As a desktop-first platform, Youtube conforms more to landscape video players like Vimeo and Twitch, but with its 'shorts' page, it is attempting to compete with increasingly popular platforms like TikTok and Instagram who use portrait, full-screen video displays. Both orientations have their own 'clutter' that need addressing.
​
Most players try to apply a fairly minimal use of colour to their interface to ensure the video content stands out.
(RE)STYLE DIRECTION
​
My goal in this redesign was to de-clutter the interface, analysing elements that were most important or essential to basic function and ensuring they were still prominent, while also introducing clear distinction between components so there was improved hierarchy of information.
​
I ensured Youtube’s identity was retained through the use of their monochrome colour palette and their signature red applied only minimally. I also kept the clean and classic Roboto typeface. However, I brought further consistency to their interface language by applying full-rounds to all buttons/tags and introducing soft, rounded corners to individual elements. Component separation was also aided by light drop shadows.
1
The header has been neatened by emphasising the search function and removing all other functions aside from the user profile. Those additional actions, as well as the video tags, were placed into a drag-down drawer.
THE HOMEPAGE REDESIGN COMES TOGETHER
4
The shorts carousel was enlarged to bring it more emphasis while scrolling, as well as framing it on a light-grey background to communicate its horizontal scroll action. The video title was also pulled out of the video frame to create a less busy interface.
2
Ads have been given a distinction between normal video content by applying a tonal grey background and reducing the size of the component slightly. The call to action is neatened by building it into the ad component itself.
5
A similar treatment was given to the News Carousel for consistency. Since these landscape-orientation videos are quite small, they were enlarged slightly so the information didn't feel so cramped.
3
Each video has become its own self-contained component to differentiate it from others. The hierarchy of the information within the video card was adjusted slightly, where the title was semi-bolded to highlight it, and the user profile icon was enlarged to make it easier to click.
6
The nav-bar was cleaned up by removing the text from the icons. The title of each page would reappear when the user clicks on that page. (Although no UX research was performed for this challenge, a quick discussion with a handful of Youtube-users found that very few people interacted with the nav-bar buttons.)
APPLYING CONSISTENT CHANGES TO THE VIDEO PAGE
​
Similar to the homepage, on the video player page I hid less-used functionality into a drag-down drawer (where the use of a drop shadow to create depth communicates there is a layer 'below' to be interacted with). The hierarchy of information was also improved by separating the uploader's profile more distinctly in its own section.
​
Originally, the like button was included in the actions that were cleared away in the drag-down drawer (as I wasn't sure how frequently this was actually used), however after the team critique, I took on the feedback to keep this accessible with one click as it is an important interaction point for the platform.
FINAL TOUCHES ON THE SHORTS PAGE
​
As the final but challenging task, I decluttered the shorts page by reducing the amount of action buttons on the page. The dual placement of the profile link was reduced down to one single icon at the bottom of the actions list, while the dislike button was removed altogether as competitors like TikTok and Instagram Reels have also done away with it. This allowed for a little more breathing room for the video description itself, where the “Subscribe” CTA was rounded off for consistency and brought back to Youtube’s primary red.
ASSESSING THE RESULTS
​
Although at first glance, the changes may be subtle, my hope is that this redesign feels lighter and less overwhelming for the user — where they are able to focus more on the video content in the app rather than the extra bells and whistles that may only be used by a portion of Youtubers.
Of course, this project was given freedom from user experience constraints, so in the real world there would be plenty of testing to do (both before and after the design work) to understand how users really perceive these changes!
Thanks for reading.
SEE MORE PROJECTS
User Research & Testing • User Experience Design • User Interface Design
User Experience Design • User Research • User Interface Design
User Research • User Experience Design • User Interface Design
User Research & Testing • Product Development • Project Management