Internship @ Meta | Jun - Aug 2022 | 7 Weeks
Ads Manager: Video Picker Improvements
Optimizing the Video Ad Creation experience through improvements to the video selection step of the media picker.
During my internship, I took on the product designer and design lead role for the Video Creative Experiences (VCX) team's first project, the Video Picker Thumbnails Improvements. This team was newly formed during my internship via a re-org, so I was able to be involved in not only this project, but the team's roadmapping and goal settings processes as well.
For this project, I designed within Meta's Ads Manager's Media Picker, a modal that allows advertisers to select media assets for their ads. My goal was to optimize the video ad experience to bring it to parity with the image ad creation experience.
The original Media Picker for video ads.
For this project, I:
VCX Team.
Design and drove to completion a Video Preview Pop-over that allows hover-based playback interactions, and an Original Upload Filter for de-cluttering and streamlining the video selection page.
Product designer
Content designer
4 Engineers
Project manager
Data scientist
My Role.
Responsibilities.
Product designer
Product Strategy
Visual Design
Interaction Design
Design Approval Workstreams
Context.
Our video tools create multiple copies of original videos uploaded by the advertiser through cropping, trimming, overlays and other transformations.
Video thumbnails are very small and edits have identical keyframes with no way of telling them apart until the advertiser picks the video and advances to the next step.
Image Media Picker (Preview Popover).
The Image Media Picker currently has a preview pop-over, allowing advertisers to view and select assets with more confidence.
However, the Video Media Picker lacks any form of preview, requiring the user to select and proceed to the crop step in order to view the video in its entirety.
The Media Picker's preview popover for image assets.
Video Media Picker.
Our video tools create multiple copies of original videos uploaded by the advertiser through , trimming, overlays and other transformations.
As such, within the Video Media Picker, both original uploads and edited versions are shown.
However, our data and the functionality of the "Add media" step both point towards users either selecting original uploads or uploading new media; edited versions are rarely used.
The original Media Picker for video ads has no preview popover option, and also displays all edited versions.
The Problem Statements.
How can we...
1. Make it easier and more efficient for advertisers to find the right video asset in the video picker?
2. Allow advertisers to preview a video and sanity check its duration?
3. Bring video UX to parity with image UX?
Define.
From our data tracking insights and problem statements, my team and I worked to define the design direction to take for our solution.
Providing larger, full-duration video previews.
In giving video selection the same preview experience as image, not only do we reduce friction in the media selection process, but we also bring the video UX more to parity with the image UX.
Allowing more efficient selection of original media through decluttering.
By reducing the amount of media present in the media picker through distinguishing original uploads and edited versions, our goal is to provide a more streamlined and optimized video selection process. We also want to encourage users to use original media more, as automated and optimized video editing is a target for our team.
Exploration & Iteration.
To guide my design explorations, I broke the solution into 3 areas of consideration:
Area 01
Preview popover for videos.
Area 02
Filter for original media only.
Area 03
Grouping edited versions under the original.
The Solution.
The Video Preview Popover and Filtering by Original Uploads.
Defaulted-on Filter by Original Media.
Upon entry into the Media Picker, the media shown will be filtered to only original media, decluttering the UI and allowing advertisers to quickly locate original uploads without needing to go through edited versions.
Video Preview Popover.
Upon hovering on a video thumbnail, the advertiser can play a preview popover identical to the image preview, but with a looping auto-playing video (muted).
The video's duration will also be displayed on the thumbnail.
Opening the Filter Dropdown.
The user can open the filter dropdown, and see the Version filter, "Original uploads only", already defaulted on.
If the user unchecks it, the filter state will be sticky, so the next time the user enters the filter will be unchecked.
The Impact.
Because the Media Picker is essential to the ad creation process, we see very high traffic through this UX; as such, we anticipate high impact of this design change due to high levels of traffic.
We will be tracking data on this project to help us attain the following VCX team and project goals:
Increase the number of video ads created.
Decrease time spent on L1 creatives, specifically selecting L1 video assets.
Next steps and Team Roadmapping.
In addition to designing the preview and filter for the MVP, I also worked with the team to define the roadmap for H1 2023 and beyond.
Although still in its exploratory phase, we decided that grouping edits under the original should be the next step.
The would allow advertisers to distinguish between originals and edits even more efficiently and intuitively.
Key takeaways.
My first end-to-end project @ Meta!
This project was the first one that I completed a PQE design review for, and collaborated closely with my ENG partners throughout the build phase to ensure that their design questions and changes were in align with the design system and project goals.
Using design to drive the team roadmap and product alignment.
As the org is shifting towards video-related projects as a priority, I helped the team align on the scope by auditing experience gaps and pain points, prioritizing them, and solving the problems from a design perspective.
Being a part of a newly-formed VCX team.
I actually volunteered to be a product designer for the VCX team, and in doing so, was able to gain visibility into how a team's goals and priorities are decided. I grew and worked very closely with all in the team, and am very grateful to them for letting me design on this project!
Reflections.
Being a part of the VCX team and working on this project was so enriching and valuable to me, especially in learning how to decide team priorities, work with a wide range of different roles, and collaborate with my team to decide on design decisions.
Thank you so much to Nathan Tung, Cynthia Oh, Tangent Lin, Ole Michelson, Isha Oke, Leah Kim, Co Nguyen, Camilo Acosta, Anna Micheel, and everyone else on Meta's VCX team for giving me this amazing opportunity!