Two Projects
Inline Video
Pre-roll Video
Understanding the user(s) in Advertising UX
In advertising , we have multiple parties that we must serve. Many times, those parties needs conflict. It’s our job as the designers to define what is best for both parties, mutually.
Consumer
Goals
Learn about movies or shows
See what to watch
Contribute ratings or add to watchlist
Learn about their needs by:
User studies
Ad feedback
Fan needs framework
A/B tests
Advertiser
Goals
Drive traffic to a product or service
Spread brand awareness
Video views
Learn about their needs by:
Market research
Analysis of other video first ads
Discussing with sales
Talking directly to agencies and brands
Getting feedback with betas
Responsive inline video
Legacy desktop and mobile app
User and advertiser feedback updates
Advertiser Needs
Non-standard/clear CTA button
No sub copy text for messaging
Always needed to have an IMDb title (no non endemic version)
Doesn’t exist on mobile web (majority of our traffic)
User Needs
“It doesn’t have a movie I can go to; I don’t want to see a fake poster”
“I don’t know what to click on”
“Is this going to take me off the site?”
Designing preroll ads
Designing preroll ads for IMDb
Version 1 - Unskippable
This is an example flow of an unskipable preroll ad. usually these are for ads that run for 15 seconds and under.
Play-through
Countdown timer plays through in the right hand side in the current video thumbnail
Tapped, continued Play-through
on tap, click or hover, the player controls will appear, the “Visit Advertiser” CTA appears, the video will darken to .34 and continue playing until the user pauses
Note: the controls that appear will not 100% mirror the native video experience. We are not including a rewind feature. just binary pause/play
Paused state
When paused, the “Visit Advertiser” CTA appears, video darkens to .54, ad and countdown timer pause as well
Version 2 - Skippable
Ads that run longer than 15 seconds are skippable after the initial 5 seconds of play. For this, I needed to add in affordances for the skip button. as well as the animation that accompanies the skip button
Play-through
Countdown timer plays through in the bottom. In the current video thumbnail, the countdown to skip plays
Tapped, continued Play-through
on tap, click or hover, the player controls will appear, the “Visit Advertiser” CTA appears, the video will darken to .34 and continue playing until the user pauses
Paused state
When paused, the “Visit Advertiser” CTA appears, video darkens to .54, ad and countdown timer pause as well
Play-through
Countdown timer plays through in the bottom. In the current video thumbnail, the countdown to skip plays
Tapped, continued Play-through
on tap, click or hover, the player controls will appear, the “Visit Advertiser” CTA appears, the video will darken to .34 and continue playing until the user pauses
Paused state
When paused, the “Visit Advertiser” CTA appears, video darkens to .54, ad and countdown timer pause as well
Video Prototype
I built video prototypes to help gain stakeholder alignment.
This video here is annotated so that my team can tell why I made my design decisions as the video plays through. You may or may not need to pause as you scrub.
Pre-role user flow
For the unskippable flow, the video will play with the countdown timer attached to the right-side thumbnail for the current video.
Hovering will display the visit advertiser affordance and the pause button in the middle of the video. the video will continue to play though until the user clicks on the pause button in the middle of the video or in the bottom left.
Standard Pause/play, sound, ad mark, and full screen options will always display at the bottom of the unit.
Skippable ads have to wait 5 seconds before the user can skip them. That 5 seconds is noted in the current video thumbnail area. While the full ad length and countdown is listed in the bottom next to the ad mark.
Hovering will display the visit advertiser affordance and the pause button in the middle of the video. The video will continue to play though until the user clicks on the pause button in the middle of the video or in the bottom left.
Standard Pause/play, sound, ad mark, and full screen options will always display at the bottom of the unit.
Wires
Unskippable Wires
Skippable Wires
Redlines
There is a subtle gradient behind the controls. this is because those controls will remain there for the duration of the ad.
when the user hovers or pauses the video will darken and the visit advertiser and pause/play center controls will appear instantly
Countdown timer lives in thumbnail view
On unskippable ads, this timer will be the entire length of the ad.
(usually unskippable ads are less than 15 seconds)
As soon as the countdown hits 0, the ad will end.
On skippable ads, this will only display for the first 5 seconds
As soon as the countdown hits 0, the affordance becomes clickable.
The skip ad and icon appear instantly. the button animate-shrinks it’s height and width. the clickable area remains the same, but the graphic element shrinks. this is so the user can continue watching the ad with minimal distractions. but can still click on the button in an accessible way.
