02
Research
User Research
During 5 in-depth interviews, I got to know what the previous, existing and potential users think about OpusClip to gain a better understanding of our users and current product.
Competitive Analysis
Based on user insights, I conducted market and competitive research to identify key needs and gaps in current space, and the potential business value of this project in the growing video editing space.
Pain Points & Solutions
Through user research and competitive analysis, I identified three major pain points for current B roll function. These insights ensure the solution aligned with both user needs and market demands.
Paint Point 1: Low Discoverability of the B-roll Feature
Users often struggle to find the B-roll generation feature because it is embedded within the main video editor, leading to underutilization.
Solution 1: Standalone B-roll Workflow
Users often struggle to find the B-roll generation feature because it is embedded within the main video editor, leading to underutilization.
Paint Point 2: Complicated User Flow for B-roll Integration
The B-roll feature is currently mixed with full editing suite, creating a complex workflow for users who just want to generate and review B-roll clips quickly.
Solution 2: Quick B-roll Generation Settings
Allow users to quickly generate B-roll with simple settings, providing more control for adjustments in the B-roll editor without overwhelming them with full editing features.
Paint Point 3: Lack of Control Over AI-Generated Results
Users find that while AI-driven B-roll saves time, they often need to manually adjust after generation. They want better AI results that meet their needs.
Solution 3: Customizable AI B-roll Settings
Allow users to set preferences and limitations before the AI generates B-roll, such as style, duration, or key elements, reducing the need for manual adjustments afterward.
03
Ideation
Persona
I organized two personas based on the insights from user research, who represent two key user groups having different needs for the B-roll workflow.
Current
User Flow
To clearly visualize the steps users take, I mapped out the current user flow and broke down the process. This helped identify the features that need to be evaluated in the whole complicated product.
User Journey
Based on the insights gathered from Sophia and Jake, I created a user journey map to illustrate how users interact with current B-roll tool, then identified opportunities for improvement at each stage.
Evaluation
After identifying the features, I conducted a user experience evaluation from seven perspectives to inform the iteration design.
Revised
User Flow
After conducting the user experience evaluation, I redesigned the first version of user flow to simplify the B-roll generation process, improving feature’s usability.
Overall
First-Time User
First-time users may find it difficult to use, as there’s no onboarding or guidance to explain how B-roll functions integrate into the overall editing process.
Feature 1: B-roll Generation Options
Visual hierarchy
The quick action menu is not immediately visible, making it harder for users to discover these features.
The dropdown with multiple B-roll generation options may confuse users as they might not know the difference between options before generation.
Contrast
While the dark background contrasts well with the text, the distinction between background and quick action is not clear.
Use of color
The colors used for selected and unselected options are not differentiated enough
Feature 2: B-roll Generating Process
Feedback
There is real-time progress bar showing the B-roll generation progress, helping users know the process and when the B-roll will be ready.
Feature 3: B-roll Settings
Information Scalability
When working with multiple B-roll clips, users may find it hard to navigate between different B-roll clips, they are unable to adjust and set multiple B-rolls at once.
Feature 4: B-roll Library
Forms
The search feature for B-roll library is limited, and It doesn’t provide auto-recommendations
users cannot upload their assets into B-roll library.
05
Design
Design System
Ultralight
Light
Regular
Medium
Semi Bold
Bold
ExtraBold
Font
Geist
Heading 1
Heading 2
Heading 3
Heading 4
Body 1
Body 2
Body 3
Body 4
Caption 1
Caption 2
Semi Bold
Semi Bold
Semi Bold
Semi Bold
Regular
Regular
Regular
Regular
Regular
Regular
36px
30px
24px
20px
18px
16px
14px
12px
11px
10px
Icons
Grid system
Wireframe
After revising the user flow, I created detailed wireframes to visualize and iterate on this updated workflow, focusing on refining the usability of specific B-roll functionalities identified during the evaluation phase.
Prototype Iterations
After finalizing the user flow, I iteratively refined the prototype for a few versions, focusing on key feature pages. Each iteration was followed by a round of usability testing to validate changes.
04
Usability Testing & Iterations
Pre-setting Page
B-roll Editor Page
Initial Design
In the initial iteration, B-roll settings, B-roll library and Transcript were organized as top-tab navigation.
Also, we provided users with three options to add a single B-roll: AI generation, uploading, or selecting from the library.
Through “Add” button, users can add two types of B-roll, "AI-generated" and "Uploaded", with each type linking to its specific settings panel.
Uploaded B-roll Setting
AI-generated B-roll Setting
Iteration Design
To maintain simplicity and efficiency of the B-roll tool, we removed the Transcript feature, as it was already available in the full editor.
Now, only features from the pre-setting panel are displayed in the B-roll editor for a more focus.
Additionally, since the initial “Add B-roll” button had few interaction with the timeline and users were unclear about where B-rolls could be added, we introduced an “Add” button directly on the timeline needle.
To address user confusion caused by switching between “Overview,” “AI-generated,” and “Uploaded” settings panels when clicking on different B-roll clips, we redesigned the “AI-generated” and “Uploaded” panels to appear as popovers, seamlessly overlaying the “Overview” panel.
AI-generated B-roll Setting
Uploaded B-roll Setting
Current Design
Following usability testing, we updated the B-roll clips to display as thumbnails, allowing users to preview their content at a glance before selecting them.
Also, we moved the "Add" button to the B-roll track position, creating a more seamless and intuitive interaction.
Initial Design
In the initial design, we added pre-settings panel on the landing page, so users can customize their B-rolls before generation.
Iteration Design
After usability testing, we found that initial setting features are limited and some are unnecessary, which can not meet users’ need.
So we iteratively improve the B-roll pre-settings panel, enabling users to quickly adjust their video purpose and style which may have significant impact on results.
Current Design
In current design, we removed the B-roll style feature from pre-settings, as we found users primarily focus on video contents and B-roll style have minimal impact on generation results. But this advanced setting can still be modified in full editor.
Also, the pre-setting appears as a popover as we finally put the B-roll entrance on the homepage alongside other functions, improving discoverability as confirmed by user testing data.
Initial Design
In the initial design, we explored several ways for a multi-track timeline, allowing users to regenerate an entire track of new B-roll clips while retaining the previously generated results.
Iteration Design
We iteratively refined the solution based on user feedback and prioritizing product simplicity. So the timeline was finalized as a single-track design determined by insights from a A/B testing.
To allow users to preserve specific B-roll clips during regeneration, we introduced a "Hold" option in the dropdown menu.
Current Design
We adjusted the position of the “Add” button and enhanced the CTA in the dropdown menu, making the functions clearer and easier for users to understand.
B-roll Library Page
Timeline
Initial Design
In the initial design, the B-roll Library independently existed on the left panel, and combined all B-roll videos without classifications.
Iteration Design
As B-roll was divided into two types, the B-roll Library was updated to reflect this change. A dropdown menu now allows users to select B-roll videos categorized as “Stock B-roll,” “AI-Generated B-roll,” or “Uploaded B-roll”.
Current Design
Based on usability testing results, the B-roll Library was found to be unnecessary when users were editing AI-generated B-roll.
Also, the user flow of accessing the B-roll Library through top-tab navigation was overly complex.
As a result, this feature was integrated into the Uploaded B-roll Settings.
Colors
Basic Colors
#000000
#FFFFFF
Neutral Colors
Text/light grey
Text/grey
#18181B
#333333
#A1A1AA
#27272A
Primary Colors
Background
Popover Background
#09090B
#19191C
#FAFAFA
Secondary Colors
#FF37B9
#3DD68C
Component
Navigation Menu
Label
Label
Label
Button
Button
Button
Button
Button
Toggle
Badge
Badge
Badge
Badge
Slider
Search Bar
Search
All
Input
Placeholder
Placeholder
Cards
Drag and drop file here
Upload
Drop a YouTube link
Upload
Google Drive
Regenerate B-roll Track
Generating B-Roll... 45%
Generate AI B-roll
Generating AI B-Roll... 1/6
Dropdown Menu
Hold
Remove
Hide
Generate AI B-roll
Upload a new B-roll
Add B-roll
Preview and Edit B-Roll
B-roll Clip
Homepage
This is the homepage of the Opus Clip product. The quick start cards are entrances to different video tool, including the B-roll tool. The card animations provide users with a quick understanding of the purpose of each function.
Pre-setting Page
After selecting the B-roll entry, the Pre-setting page appears as a popover, allowing users to preview the original video and customize settings before AI generation.
B-roll Editor: Overview
When users click the “Preview and Edit B-roll” button on the pre-setting page, they are directed to the B-roll editor, which initially displays the overview panel, allowing control over all B-roll clips. Settings from the pre-setting panel are highlighted to give users a clearer understanding of their effects.
Users can also directly access the full editor by selecting the “Full Editor” at the top of this page.
B-roll Editor:
Uploaded
B-roll Setting
Users can upload a B-roll video at a specific time point by dragging the timeline needle to the desired position and clicking the “Add” button.
B-roll duration depends on the video duration uploaded.
After selecting the start point and clicking 'Upload a New B-roll,' a placeholder clip appears on the timeline and adjusts to match the uploaded B-roll's duration once completed.
B-roll Editor:
AI-generated
B-roll Setting
Users can upload a B-roll video at a specific time point by dragging the timeline needle to the desired position and clicking the “Add” button.
Result Page
Users can access the result page through two flows: clicking the 'Add B-roll' button on the pre-setting page to skip editing or selecting “Export” at the top of the editor page.
The result page shows a video preview with added B-roll, a transcript, and a brief video description. Users can access the full editor from this page for advanced settings.
B-roll Library is incorporated
Scrolling down on this panel allows users to select a B-roll video from the library to replace their uploaded clip.
Set B-roll Duration by Dragging Timeline Needle
After selecting the start point and clicking “Generate AI B-roll”, users can drag a second needle to set the end point, determining the AI-generated B-roll duration (up to a maximum of 6s).
Enter prompts for AI generation
Users can gain advanced control over AI-generated results by entering prompts in the input box.
AI generates multiple options
AI generates six options based on the user's settings, allowing them to select the one that best meets their expectations.
Final Design
After completing several versions of wireframes and conducting user testing, I proceeded with the iteration design to high-fidelity prototype.
06
my takeaways
Business
Prioritizing user needs through iterative feedback loops can significantly boost feature adoption and align product development with business growth goals.
User Experience
Emphasizing simplicity in complex tool design enhances accessibility, resulting in interfaces that are intuitive and satisfying for target group of audience.
Technology
Leveraging AI and automation can streamline workflows while still allowing for customization, ensuring that technology adapts to diverse user needs.
Kate
Freelance Filmmaker
I love using B-roll to enhance my videos, but sometimes I need a faster way. If I could preview and tweak the B-roll without going through so many steps, it would be better.
"I started using OpusClip because of its promising AI features, but sometimes I feel the tool could offer more precision. Integrating B-roll settings before generation would be incredibly beneficial."
Sophia
Professional Video Editor
Jake
YouTuber
“I don’t have the time to manually adjust everything, but I still need my videos to look professional. If AI could get me 90% of the way there, that would be a game-changer.”
OpusClip helps me add illustrative B-roll quickly, which is great. But when I first started using it, I didn’t even discover the B-roll button and only learned about this function from other creators.
David
Content Creator
Emily
Corporate Marketer
“We need tools that help maintain our brand's quality. The B-roll feature should be simple but powerful, and AI should handle most of the heavy lifting while ensuring everything stays on brand."
01
Overview
Probelm Statement
Opus Clip is an AI-powered video editing tool that transforms long-form videos into short-form content for platforms like YouTube Shorts, TikTok, and Instagram Reels.
As the website UX Designer at OpusClip, I helped to launch our a new version of AI-generated B-roll video feature for 10M+ users. Read more about the new releases here, and see some selected work below.
Solution
To address this, we created a standalone B-roll tool as an extension of Opus Clip’s product, aligning with company’s business goals and enhancing users’ productivities. This simplified and standalone tool streamlines workflows and offers quick AI-generated B-roll, allowing users to refine their videos with minimal manual effort.
My Role: UX Designer
Research, UX Design, Prototyping, Visual Design, Usability Testing
Duration: 5 months starting from Jun 2024; San Fransisco
Tools: Figma, Adobe Illustrator, Adobe Photoshop
Team: Judy, Felix, Bing; Design Team
OpusClip
What is B-Roll?
B-roll is the supplementary footage used in filmmaking and video production that supports the main footage, it’s the extra visuals that enhance users’ story.
Goal
Redesign the AI-generated B-roll feature to improve its discoverability and usability, enabling faster content creation and better aligning with user needs and business objectives.
Outcome
My design work successfully increased user retention by 35% and boosted new user activation. I raised AI-generated B-Roll CTA conversion by 20% and conversion of new users into active users by 25%, contributing to a faster content creation and helping expand the company’s growth in the short-form video market.
We decide to do this project because we initially identified a gap in our existing video editing product. We found that since our users relied on our tool to create content for short-form video platforms, the AI-generated B-Roll feature can help them quickly work. While Opus Clip already had this feature, it was embedded within the main editor with a complexed workflow. It is difficult for users to find and use efficiently. Users who prioritize speed and simplicity needed a faster, more focused tool.
35%
Increased User retention
20%
Improved AI generation CTA conversion
25%
Improved active users conversion
User Group 1: Users with few B-roll editing experience
User Group 2: Users with professional B-roll editting experience
