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.
Product designer
Design Lead
Responsibilities.
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.
Design Decisions.
I presented my initial explorations to my XFN team for feedback, and identified the design action items for our project MVP.
We chose to prioritize preview popover and filter, and move grouping to the VCX team roadmap due to engineering constraints and complexity.
From there, I had to face a number of design decisions with my team; through leading the discussion and weighing the pros and cons of each decision, we were able to come to a consensus for our MVP.
01
Defaulting the filter on v. off.
The default on/off question was one of the most debated between our team, as we were juggling risk, impact, and which would result in the better user experience.
Option 01 (selected)
Defaulted on filter.
Defaulting on the filter would give us high impact, as our data shows that filters are fairly unused and have little visibility for advertisers.
However, this is also a high risk approach, as some advertisers may face initial confusion by a sudden decrease in media.
Option 02
Defaulted off filter.
Defaulting off is definitely a safer and more risk-averse approach for our team, but due to low CTR and usage of filters, we face not only extremely low impact, but also not enough signal to measure the success of our improvements.
Our rationale for default-on.
Low discoverability and usage of filters.
<10% of advertisers open drop down filters, and only 7% of that <10% will select a filter. Defaulting-off would be so low impact that anticipate it not being beneficial to advertisers due to low discoverability.
Default-on would give us enough signal to prove our hypothesis from a data stand-point.
If we were to default-off, we anticipate such a low level of usage that we would not get enough data signal of success.
Aligned with core mission of Video Picker.
We want the "add media" step in the video picker to be primarily selecting or uploading original media, as Ads Manager L1 is shifting towards having video optimization and editing be done automatically via the next steps in the Media Picker.
02
Filter Location
In conjunction with the default on/off question for filters, the second design decision was about where the filter would be located. If we were to default on the filter, we were weighing discoverability of the filter, and adhering to the design patterns of the filter dropdown.
Option 01 (selected)
Filter in the drop down.
Placing the filter in the filter dropdown would result in lower discoverability, is more in line with the Geodesic design system and allows more room for media to be displayed.
Option 02
Filter outside the menu.
While we considered placing the filter outside the menu, the moving down of media items made the exploration feel unnatural. The lack of adherence with Geodesic also revealed possible blockages in design review and approval.
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.
Although I won't get to finalize the designs for these, I worked to create initial explorations to communicate the designs to the next product designer taking on the project, using design to help visualize and move along the team's roadmap for 2023.
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!