top of page
YT Ads.png

C L I E N T

YouTube Ads

T E A M

Creative Direction / James Phillips

Copywriting / Julie Nguyen

Motion Design / Ian Boldon, Rakesh Mistry and Charlie Hong

Content Strategy / Kirsty Sumption

Interaction Design / William Khoo

R O L E

UI Designer

Visual Designer

WHAT I DID

Partnered with UX and Interaction teams to finalize designs

Worked on consistency throughout UI across flows and devices

Provided prototyping interaction direction

Storyboarding and animation direction

Ads UI Refresh

O B J E C T I V E 

Reimagining the Ads experience on YouTube to align with user benefits and to bring the YouTube Ads UX team's vision to life.

A P P R O A C H

By streamlining UI and making components flexible and purposeful, the Ads experience became more relevant, engaging and immersive for viewers and advertisers. A final vision video and series of demos helped envision a future for Ads on YouTube.

CONSIDERATIONS

How Might We

Integrate new ad features to the videos as secondary interactions

How Might We

Be more intentional with the ads UI elements for a cohesive experience

How Might We

Scale and make
the experience more immersive for viewers

U I   C H A N G E S

UI changes.png

Across all flows, the green ad badge was chosen for accessibility and a subtle hint of an ad. To have flexible layouts with different ad content modules alongside the current UI, the button colors were slightly altered from the primary system used in the app. A light blue for the secondary action and an outline for the tertiary action was proposed for visual hierarchy.

For a viewer to easily identify an ad image video on the homepage from a video thumbnail, a camera icon worked well to distinguish this. An indication of an external icon on the CTA also added clarity that the user would be redirected to an external page.

For a seamless in-app experience, any additional links opened in another window with clear indication of the site URL and a lock icon for a secure experience. The CTA uses a right arrow icon to show that the interaction is still within the app.

To easily engage with the video playing, the right metadata had to be displayed for a use case like Shopping. For a viewer to have enough information to make a decision to buy a product in the 'Shop the video' section, few enhancements were proposed: adding the number of items in the video along with the tag icon identifies the video as shoppable, the cost was an important factor for transparency, and adding brand logos would increase trust in the purchase.

STORYBOARDING

YT Ads Storyboard.png

LEARNINGS 

Key takeaways from the UI refresh

  • Even small UI changes like the color and size of the ad badge can elevate the user experience

  • Prototypes greatly help teams understand the flow more clearly by showing context for the micro-interactions

  • Using universally known icons from the design system helps communicate functionality more easily, e.g using the camera and external site icons

VISUAL / PRODUCT DESIGNER

bottom of page