C L I E N T
YouTube Ads
T E A M
R O L E
Creative Director
Copywriter
Motion Designers
Content Strategist
Interaction Designer
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
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
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