Facebook Auto Captions

Design

I worked with Facebook's Core Ads Monetization (CAM) team, focused on the consumer-facing ad experience. During my time there, I designed an auto-caption feature for video content in Ads Manager.

CREDITS
Design Direction
Jessica Watson
Additional Designs
Facebook CAM Design Team

GOALS

The goal of this project was to enable advertisers to easily caption video content within Facebook’s existing ad creation flow. The MVP included tools to edit caption text and timing, along with notifications to inform users when captions were being generated. Additionally, we introduced a confidence indicator for auto-caption accuracy, highlighting potential mistranslations, spelling errors, or unintelligible audio in the source video.

CONSIDERATIONS

Integrating the auto-captions feature required seamless flows within Facebook's existing video ad creation structure. The design needed to remain unobtrusive while keeping users informed about caption generation, including success and failure states. Since all Facebook business accounts would have access, the editing tools had to be simple enough for beginners yet robust enough for experienced users. Research revealed that online caption editors lacked consistency, while film editing software was overly complex. The solution struck a balance, providing an intuitive workflow suitable for both first-time creators and power users.

SOLUTIONS

The button was designed to stay compact and match Facebook's existing interface while informing users with a "generating" bar along the bottom and The button for auto captions was designed to remain compact and consistent with Facebook's interface. A "generating" progress bar and "estimated time remaining" appeared beneath the button to keep users informed. Once captions were ready, users could review them by opening the editor.

The auto-caption editor offered flexibility, featuring both a timeline view for users familiar with film editing software and a notepad-style section for a traditional text editor experience. Confidence levels were visually represented with yellow or red highlights: yellow for minor issues like questionable spelling or syntax, and red for major errors. These highlights appeared in both the text editor and the video's timeline, providing an intuitive way to identify and address issues.

Generative AI for Degreed Mobile
Design
Xbox Originals Companion App
Design