How a 9.8% Conversion Insight Led to a Smarter AI Clips Review Experience

How a 9.8% Conversion Insight Led to a Smarter AI Clips Review Experience

How a 9.8% Conversion Insight Led to a Smarter AI Clips Review Experience

Redesigned the AI Clips Review screen to help users explore more clips and reach the Editor, after discovering that those who edited clips were 12x more likely to convert.

My role

Research

& Product Design

Team

Founder, Marketing Head,

Product Manager, Developer,

Product Designer

Timeline

2 weeks

Context

Context

How AI Clips Work?

AI Clips account for over 70% of all content created on quso.ai. That made it our highest-leverage feature to optimize.

At quso.ai, I worked as the sole product designer on the iOS app, driving the design process end-to-end—from ideation and user flows to high-fidelity designs and handoff.

On the web platform, I contributed to revamp the video editor, improving its usability and visual clarity for a smoother content creation experience. I also worked closely with product and engineering to design AI-powered features like AI Clips, focusing on integrating generative AI in a way that felt seamless and intuitive to users.

At quso.ai, I worked as the sole product designer on the iOS app, driving the design process end-to-end—from ideation and user flows to high-fidelity designs and handoff.

On the web platform, I contributed to revamp the video editor, improving its usability and visual clarity for a smoother content creation experience. I also worked closely with product and engineering to design AI-powered features like AI Clips, focusing on integrating generative AI in a way that felt seamless and intuitive to users.

Critiquing the Old Review Screen

Critiquing the Old Review Screen

Critiquing the Old Review Screen

The Review screen is where you see the result of your long video turned into short Reels or Shorts using AI. These videos are ready for you to preview, polish, and pick the best ones to share.

At quso.ai, I worked as the sole product designer on the iOS app, driving the design process end-to-end—from ideation and user flows to high-fidelity designs and handoff.

On the web platform, I contributed to revamp the video editor, improving its usability and visual clarity for a smoother content creation experience. I also worked closely with product and engineering to design AI-powered features like AI Clips, focusing on integrating generative AI in a way that felt seamless and intuitive to users.

At quso.ai, I worked as the sole product designer on the iOS app, driving the design process end-to-end—from ideation and user flows to high-fidelity designs and handoff.

On the web platform, I contributed to revamp the video editor, improving its usability and visual clarity for a smoother content creation experience. I also worked closely with product and engineering to design AI-powered features like AI Clips, focusing on integrating generative AI in a way that felt seamless and intuitive to users.

Problem Statement

Problem Statement

Why We Decided to Redesign the Review Screen?

Why We Decided to Redesign the Review Screen?

Why We Decided to Redesign the Review Screen?

High Early Drop-Offs

Start a Project

42% of users dropped off after uploading their video, before engaging with the Review screen at all.

High Early Drop-Offs

Start a Project

42% of users dropped off after uploading their video, before engaging with the Review screen at all.

High Early Drop-Offs

Start a Project

42% of users dropped off after uploading their video, before engaging with the Review screen at all.

Limited Clip Exploration

Start a Project

Most users only watched the first generated clip, suggesting the layout didn’t encourage deeper exploration or comparison.

Limited Clip Exploration

Start a Project

Most users only watched the first generated clip, suggesting the layout didn’t encourage deeper exploration or comparison.

Limited Clip Exploration

Start a Project

Most users only watched the first generated clip, suggesting the layout didn’t encourage deeper exploration or comparison.

Most Users Skipped the Editor

Start a Project

Only 26% of users who reached the Review screen went on to use the Editor, despite it being the only place to finalize and polish clips.

Most Users Skipped the Editor

Start a Project

Only 26% of users who reached the Review screen went on to use the Editor, despite it being the only place to finalize and polish clips.

Most Users Skipped the Editor

Start a Project

Only 26% of users who reached the Review screen went on to use the Editor, despite it being the only place to finalize and polish clips.

Editor Usage Drove Conversions

Start a Project

Users who used the Editor converted at 9.8%, compared to just 0.77% of non-editors — showing a 12x improvement.

Editor Usage Drove Conversions

Start a Project

Users who used the Editor converted at 9.8%, compared to just 0.77% of non-editors — showing a 12x improvement.

Editor Usage Drove Conversions

Start a Project

Users who used the Editor converted at 9.8%, compared to just 0.77% of non-editors — showing a 12x improvement.

Design Goals

Design Goals

Design Goals

Improve Discoverability

Start a Project

Improve clip discoverability so users can explore multiple clips that were generated

Improve Discoverability

Start a Project

Improve clip discoverability so users can explore multiple clips that were generated

Improve Discoverability

Start a Project

Improve clip discoverability so users can explore multiple clips that were generated

Increase Editor Engagement

Start a Project

Improve editor engagement in order to drive higher conversion by guiding more users toward the step where meaningful customization and decision-making happens.

Increase Editor Engagement

Start a Project

Improve editor engagement in order to drive higher conversion by guiding more users toward the step where meaningful customization and decision-making happens.

Increase Editor Engagement

Start a Project

Improve editor engagement in order to drive higher conversion by guiding more users toward the step where meaningful customization and decision-making happens.

Remove Distractions

Start a Project

Simplify the interface to support focused decisions by reducing distractions, clarifying the visual hierarchy, and aligning actions with user intent

Remove Distractions

Start a Project

Simplify the interface to support focused decisions by reducing distractions, clarifying the visual hierarchy, and aligning actions with user intent

Remove Distractions

Start a Project

Simplify the interface to support focused decisions by reducing distractions, clarifying the visual hierarchy, and aligning actions with user intent

Custom Clips

Start a Project

Offer fallback control by enabling users to create custom clips if they are not satisfied with the clips generated.

Custom Clips

Start a Project

Offer fallback control by enabling users to create custom clips if they are not satisfied with the clips generated.

Custom Clips

Start a Project

Offer fallback control by enabling users to create custom clips if they are not satisfied with the clips generated.

Exploring Layout Options

Exploring Layout Options

Exploring Layout Options

Horizontal Scroll

  • The modal version experienced performance delays, resulting in friction.

  • Developers flagged complexity and load time issues with the modal pattern.

  • Full-screen scroll didn’t align with modern user behavior — most short-form content platforms now use vertical scroll as the standard.

  • Users found horizontal swiping less intuitive for video review.




Horizontal Scroll

  • The modal version experienced performance delays, resulting in friction.

  • Developers flagged complexity and load time issues with the modal pattern.

  • Full-screen scroll didn’t align with modern user behavior — most short-form content platforms now use vertical scroll as the standard.

  • Users found horizontal swiping less intuitive for video review.

Horizontal Scroll

  • The modal version experienced performance delays, resulting in friction.

  • Developers flagged complexity and load time issues with the modal pattern.

  • Full-screen scroll didn’t align with modern user behavior — most short-form content platforms now use vertical scroll as the standard.

  • Users found horizontal swiping less intuitive for video review.

Vertical Scroll

We explored a vertically scrolling layout similar to platforms like YouTube Shorts and TikTok, familiar to users consuming short-form video content. In this version:


  • Each clip was stacked vertically, allowing users to scroll down through the list.

  • Clip-specific actions like Edit, Download, and Transcript were attached directly to each card.

  • A secondary list of clips was available in the left-hand menu for quick navigation.


Why it didn’t work: The vertical format worked well for engagement, but the icon-only buttons beside each clip lacked clarity. Additionally, having three exposed actions per clip made the interface visually heavy and created decision fatigue.

Vertical Scroll

We explored a vertically scrolling layout similar to platforms like YouTube Shorts and TikTok, familiar to users consuming short-form video content. In this version:


  • Each clip was stacked vertically, allowing users to scroll down through the list.

  • Clip-specific actions like Edit, Download, and Transcript were attached directly to each card.

  • A secondary list of clips was available in the left-hand menu for quick navigation.


Why it didn’t work: The vertical format worked well for engagement, but the icon-only buttons beside each clip lacked clarity. Additionally, having three exposed actions per clip made the interface visually heavy and created decision fatigue.

Vertical Scroll

We explored a vertically scrolling layout similar to platforms like YouTube Shorts and TikTok, familiar to users consuming short-form video content. In this version:


  • Each clip was stacked vertically, allowing users to scroll down through the list.

  • Clip-specific actions like Edit, Download, and Transcript were attached directly to each card.

  • A secondary list of clips was available in the left-hand menu for quick navigation.


Why it didn’t work: The vertical format worked well for engagement, but the icon-only buttons beside each clip lacked clarity. Additionally, having three exposed actions per clip made the interface visually heavy and created decision fatigue.

Grid View


This version displayed multiple clip thumbnails in a grid, allowing users to scan all generated clips at once:


  • Designed with power users in mind — those who want to quickly scan and compare multiple options.

  • Ideal for users looking for control and speed.


Why we didn't go all-in: While it worked well for advanced users, it felt dense and overwhelming for casual creators. Without a proper hierarchy or starting point, users lacked guidance on where to begin. It was a great supplementary view but not the best default.


Grid View


This version displayed multiple clip thumbnails in a grid, allowing users to scan all generated clips at once:


  • Designed with power users in mind — those who want to quickly scan and compare multiple options.

  • Ideal for users looking for control and speed.


Why we didn't go all-in: While it worked well for advanced users, it felt dense and overwhelming for casual creators. Without a proper hierarchy or starting point, users lacked guidance on where to begin. It was a great supplementary view, but not the best default.


Grid View


This version displayed multiple clip thumbnails in a grid, allowing users to scan all generated clips at once:


  • Designed with power users in mind — those who want to quickly scan and compare multiple options.

  • Ideal for users looking for control and speed.


Why we didn't go all-in: While it worked well for advanced users, it felt dense and overwhelming for casual creators. Without a proper hierarchy or starting point, users lacked guidance on where to begin. It was a great supplementary view, but not the best default.

What We Changed in the New Design

What We Changed in the New Design

What We Changed in the New Design


  • Grid View for Power Users
    Designed for fast scanning and comparison — ideal for users who want more control.

  • Vertical Scroll as Default
    Aligns with familiar short-form video behavior, making it intuitive for most users.

  • User-Driven Flexibility
    Users can toggle between views based on their workflow or preference.

  • A/B Friendly Setup
    Allows us to test which layout drives higher engagement and editor usage.


  • Grid View for Power Users
    Designed for fast scanning and comparison — ideal for users who want more control.

  • Vertical Scroll as Default
    Aligns with familiar short-form video behavior, making it intuitive for most users.

  • User-Driven Flexibility
    Users can toggle between views based on their workflow or preference.

  • A/B Friendly Setup
    Allows us to test which layout drives higher engagement and editor usage.


  • Grid View for Power Users
    Designed for fast scanning and comparison — ideal for users who want more control.

  • Vertical Scroll as Default
    Aligns with familiar short-form video behavior, making it intuitive for most users.

  • User-Driven Flexibility
    Users can toggle between views based on their workflow or preference.

  • A/B Friendly Setup
    Allows us to test which layout drives higher engagement and editor usage.

Clip Card (Vertical View)

The Edit button is placed directly on the card — making the next step obvious and contextual to that specific clip.

Secondary actions like Download and Transcript are now inside a three-dot menu, reducing visual noise.

Transcript is now directly attached to the video, visible without a separate click — based on behavior we observed from users scanning clips via transcript.

Card shows only essential info upfront — additional details appear on hover, keeping the layout clean while offering depth when needed.

Clip Card (Vertical View)

The Edit button is placed directly on the card — making the next step obvious and contextual to that specific clip.

Secondary actions like Download and Transcript are now inside a three-dot menu, reducing visual noise.

Transcript is now directly attached to the video, visible without a separate click — based on behavior we observed from users scanning clips via transcript.

Card shows only essential info upfront — additional details appear on hover, keeping the layout clean while offering depth when needed.

Clip Card (Vertical View)

The Edit button is placed directly on the card — making the next step obvious and contextual to that specific clip.

Secondary actions like Download and Transcript are now inside a three-dot menu, reducing visual noise.

Transcript is now directly attached to the video, visible without a separate click — based on behavior we observed from users scanning clips via transcript.

Card shows only essential info upfront — additional details appear on hover, keeping the layout clean while offering depth when needed.

Toast Message

Creates a positive emotional cue, rewarding users for reaching the generation step.

Tells users how many clips were created, encouraging full exploration.

Acts as a subtle behavioral nudge: “You have 10 clips, don’t stop at 1.”

Toast Message

Creates a positive emotional cue, rewarding users for reaching the generation step.

Tells users how many clips were created, encouraging full exploration.

Acts as a subtle behavioral nudge: “You have 10 clips, don’t stop at 1.”

Toast Message

Creates a positive emotional cue, rewarding users for reaching the generation step.

Tells users how many clips were created, encouraging full exploration.

Acts as a subtle behavioral nudge: “You have 10 clips, don’t stop at 1.”

Encouraging Exploration with Scroll Animation


Mimics natural scroll/swipe gesture, like on YouTube Shorts or Instagram Reels, to guide discovery subtly.

Triggers after 20secs of first clip playback if user hasn’t scrolled, giving time to engage before nudging.

Triggers again when the first clip ends, in case the user still hasn’t explored further.

Encouraging Exploration with Scroll Animation


Mimics natural scroll/swipe gesture, like on YouTube Shorts or Instagram Reels, to guide discovery subtly.

Triggers after 20secs of first clip playback if user hasn’t scrolled, giving time to engage before nudging.

Triggers again when the first clip ends, in case the user still hasn’t explored further.

Encouraging Exploration with Scroll Animation


Mimics natural scroll/swipe gesture, like on YouTube Shorts or Instagram Reels, to guide discovery subtly.

Triggers after 20secs of first clip playback if user hasn’t scrolled, giving time to engage before nudging.

Triggers again when the first clip ends, in case the user still hasn’t explored further.

Silences & Filler Words Removal

Instead of hiding changes behind an icon, we made AI edits visible inline.

Removed words are shown with an asterisk, making edits transparent, scan-friendly, and easy to spot.

This reduced ambiguity and gave users a sense of control and awareness.

Silences & Filler Words Removal

Instead of hiding changes behind an icon, we made AI edits visible inline.

Removed words are shown with an asterisk, making edits transparent, scan-friendly, and easy to spot.

This reduced ambiguity and gave users a sense of control and awareness.

Silences & Filler Words Removal

Instead of hiding changes behind an icon, we made AI edits visible inline.

Removed words are shown with an asterisk, making edits transparent, scan-friendly, and easy to spot.

This reduced ambiguity and gave users a sense of control and awareness.

Encouraging Feedback to Make AI Smarter


In the old UI, feedback buttons existed, but users had no idea why they mattered.


This toast educates users that their likes help improve future results.
Used just-in-time guidance without interrupting the clip review flow.


Gave users a sense of contribution — creating a feedback loop between their actions and AI performance.


Toast disappears after the action is completed — making it temporary, purposeful, and satisfying.

Encouraging Feedback to Make AI Smarter


In the old UI, feedback buttons existed, but users had no idea why they mattered.


This toast educates users that their likes help improve future results.
Used just-in-time guidance without interrupting the clip review flow.


Gave users a sense of contribution — creating a feedback loop between their actions and AI performance.


Toast disappears after the action is completed — making it temporary, purposeful, and satisfying.

Encouraging Feedback to Make AI Smarter


In the old UI, feedback buttons existed, but users had no idea why they mattered.


This toast educates users that their likes help improve future results.
Used just-in-time guidance without interrupting the clip review flow.


Gave users a sense of contribution — creating a feedback loop between their actions and AI performance.


Toast disappears after the action is completed — making it temporary, purposeful, and satisfying.

Create your own clips

Positioned as a last-mile fallback, not a primary action — so it doesn’t distract from AI-first flow.

Keeps users inside the same system instead of forcing them to start over elsewhere.

Offers two options based on user type: visual editors (timestamps) vs. text-oriented users (transcript).

Create your own clips

Positioned as a last-mile fallback, not a primary action — so it doesn’t distract from AI-first flow.

Keeps users inside the same system instead of forcing them to start over elsewhere.

Offers two options based on user type: visual editors (timestamps) vs. text-oriented users (transcript).

Create your own clips

Positioned as a last-mile fallback, not a primary action — so it doesn’t distract from AI-first flow.

Keeps users inside the same system instead of forcing them to start over elsewhere.

Offers two options based on user type: visual editors (timestamps) vs. text-oriented users (transcript).

Final Grid View


The grid view will be launched as an A/B test with a layout toggle at the top:

  • List View: Default vertical scroll

  • Grid View: Optional layout for power users


We’ll measure:

  • Editor entry rate

  • Clip exploration depth

  • Feedback engagement

  • Export conversion rate

Grid View


The grid view will be launched as an A/B test with a layout toggle at the top:

List View: Default vertical scroll

Grid View: Optional layout for power users


We’ll measure:

Editor entry rate

Clip exploration depth

Feedback engagement

Export conversion rate

Grid View


The grid view will be launched as an A/B test with a layout toggle at the top:

List View: Default vertical scroll

Grid View: Optional layout for power users


We’ll measure:

Editor entry rate

Clip exploration depth

Feedback engagement

Export conversion rate

Coach Marks


We also introduced two coach marks as part of the new design to support first-time user guidance:

Toggle View Coach Mark: To help users understand they can switch between List View and Grid View, we added a coach mark that highlights this toggle at the top of the screen.


Filter Coach Mark: To encourage advanced use of the review clips, showing users they can filter clips by type, score, or duration.

Coach Marks


We also introduced two coach marks as part of the new design to support first-time user guidance:

Toggle View Coach Mark: To help users understand they can switch between List View and Grid View, we added a coach mark that highlights this toggle at the top of the screen.


Filter Coach Mark: To encourage advanced use of the review clips, showing users they can filter clips by type, score, or duration.

Coach Marks


We also introduced two coach marks as part of the new design to support first-time user guidance:

Toggle View Coach Mark: To help users understand they can switch between List View and Grid View, we added a coach mark that highlights this toggle at the top of the screen.


Filter Coach Mark: To encourage advanced use of the review clips, showing users they can filter clips by type, score, or duration.

Final Takeaways

Final Takeaways

Final Takeaways

What We Set Out to Do

Improve Clip Discoverability: Users were watching only the first clip

Boost Editor Engagement: Only 26% were reaching the Editor

Provide Flexibility When AI Falls Short: Users needed fallback options

What We Did

Created Guided Exploration: Stronger layout, toggles, and visual hierarchy

Made Editor the Next Step: Contextual buttons and simplified actions

Gave Users Control: Manual clip creation from transcript or timestamps