YouTube Redesign

The goal of this project was to redesign the Youtube mobile app for a smaller audience, based on the results of small-scale user research. Deliverables included the development of a new design system that is cohesive with YouTube's established brand, and to create a functional prototype with two or more user flows using Figma; highlighting a new feature derived from user research insights. This project was an experiment in learning the process of integrating a new design system and a new feature into an established product and brand. This was my final for Advanced Digital Product, and all work was done individually and then presented to the class as if it was part of an engineer handoff.

TOOLS

Figma

TIMELINE

One Month

Simplified User Interface

The UI is less crowded, allowing users to focus on one task at a time. Tabs are clearly tabs, and the interface encourages only one kind of interaction at a time.

Unobtrusive Ad Format

Ads take up less space and are clearly marked as adspace, so they take up less space on the page while allowing users to click if interested but continue on to other content quickly if they aren't.

Filtering

A new feature allowing users to filter the content in their feed and in their subscriptions, showing them what they want to see first. Sort via time posted, watched/unwatched, most viewed and more.

Discovery Phase

Conversations with Users

I conducted two "jobs to be done" interviews with two participants at a time, focusing on how they use YouTube, what they use it for and where they find frustrations while using the mobile app. Then I organized my notes from our conversations into categories to find common themes and gaps.

The Major Themes:

  • Autonomy: 
    Users want to be able to make decisions about the kinds of content they're shown beyond just choosing who they follow and what content they interact with
  • Focus:
    Users find the current UI to be busy and distracting when they are trying to find specific content, like background noise or something to watch while eating dinner
  • Structure:
    The structure of the app is familiar, and users have very little complaints about basic functions like subscribing, liking, and navigation

Existing Design Audit

Analyzing screenshots of the mobile app, identifying the colors, type and styling that are essential to brand identity, getting a feel for the existing system, and where there are inconsistencies or where there is room for improvement

New Design System Elements

Typography

Nimbus sans brings the same kind of simplicity and reliability as Roboto, the typeface Youtube is currently using. But it also lends itself to a kind of airiness and unobtrusiveness that's useful to direct the users attention to the content made, and less to the information framing it.

Color Palette

This color palette takes the three most commonly used colors throughout the UI of youtube's current platform and simplifies them into three primary colors, three secondary colors and a five tone grayscale

Component Library

Made from scratch in Figma using custom made iconography and elements pulled from the new design system. Used to build out the youtube prototype

Explore the Figma file yourself!

KN

Multi-Disciplinary Design

HomeGalleryContact