YouTube Studio

I led the visual redesign of Creator Studio now called YouTube Studio. The product hadn't been updated in almost 10 years, so it was long over due for a Material refresh. I worked closely with a team of UX designers and engineers based in Zurich, so most of the project was done remotely.

I explored a number of areas that required visual attention - everything from layout, color adaption, logo, motion, and illustration. More information about the project and samples of the work can be found below.

Sample Screens

Page to Page Transition

A seemingly innocuous animation meant to provide a seemless transition from one page to the next in order to better orient people with the information now being displayed.

Lots of technical constraints regarding how and when the information gets served and displayed to users. This required special attention to the overall sequencing of each UI component with respect to an indeterminate loading animation. Ideally, going back should always feel faster - difficult to achieve.

Page Transition

Simple to concept; complex to build.

Upload Animation

I designed this new upload animation, currently in beta, to provide creators with a playful personality and improved visual feedback for when videos are uploaded to YouTube.

I worked closely with engineers in Zurich on the technical details and provided specifications, assets, and reviewed the prototype all while working remotely. It was really cool to see it live finally since it was the last project I worked on before leaving YouTube.

Upload Beta

A simple system icon transforms into a launching rocket.

Analytic Insights

The analytics team wanted some illustrations to draw attention to creators when certain metrics were "on the rise" or "trending down". These would provide insights to creators on the right course of action to take for their channel or video. Here are some samples from that project.

Some initial thumbnail roughs.

An example of one of the directions in context.

Another example of a final illustration.

Some of the illustrations appear in a video about insights.

Empty & Error States

For the empty and error states I explored a number graphics that gave the product some fun and unexpected personality as well as communicating to creators the absence of information.

No Query

An earlier mockup with the "no query" empty state.

No Query Zoomed

A larger version of the "no query" illustration.

Full Set of Illos

This is the full set of empty and error state illustrations.