Led the redesign of Staticflow’s ad-discovery and AI-assisted creation workflows, contributing to a 5% increase in free-to-paid conversion and 35% faster development cycles.
Product
Web
My Role
Lead Product Designer
Collaborators
1 Product Designer, 3 Developers. 1 Product Manager
Timeline
Q1 2025 — Q2 2025
Scope
Product Strategy, UX & UI design, AI Integration, Prototyping, Design System
Organization Size
Startup
Staticflow helps marketers find competitor ads, organize useful inspiration and turn promising ideas into new creative. The product later became Konvert, which now supports more than 10,000 users across 3,000 companies.
At a glance
Current Users
Businesses using Staticflow
As Lead Product Designer, I worked closely with the founders, product, and engineering teams to rethink two core journeys: Explore and AI UGC. I also redesigned the Templates and Collections experience, along with the landing page and supporting marketing pages.
I owned the work from early problem framing and low-fidelity exploration through high-fidelity design, prototyping, design-system development, and engineering handoff.
This case study focuses on the design for the AI UGC Feature and the redesign of the Explore page.
Impact Summary
Connected research and creation within one product journey by bringing Explore, Collections, Remix and AI-assisted production closer together.
Brought scriptwriting, avatar selection, voice setup and video generation into one guided AI UGC workspace.
Contributed to a 5% increase in free-to-paid conversion by making Explore a clearer premium value moment and connecting discovery more directly to Remix.
Consolidated the design system to approximately 2,000 components by removing duplicated patterns and standardizing naming, states and behavior.
Helped shorten development cycles by 35% by giving engineering a smaller and more consistent set of reusable interface patterns.
Impact Metrics
Increase in free-to-paid conversion
Faster development cycles using the consolidated design system
Client Testimonial
“Ryan absolutely crushed this project. We started with a super basic, kind of bland design and he's completely transformed it into one of the best-looking platforms I’ve ever seen. It seriously looks and feels like a proper, premium product now.
He nailed the exact vision I had in mind for the design style - clean, modern, premium, dark theme, and brought it to life better than I imagined. Plus, he's super easy to work with, quick to respond, and open to feedback the whole way through.
Couldn’t be happier with how it's going. If I could hire Ryan full-time I would.”
Tomaso Moro — Founder, Staticflow
Skills
Product strategy, product discovery, human-AI interaction, workflow mapping, information architecture, interaction design, prototyping, design systems, visual design and design-to-engineering handoff
Milestone #1
Milestone #1
Explore was Staticflow’s main research surface. Marketers used it to find competitor ads, understand what was running, save useful references and move promising ideas into production.
Project Goal
Help marketers find relevant ads, enable faster inspiration, clearer decision-making, and seamless remixing.
Main OKRs
Target a 25–50% reduction in time-to-inspiration by surfacing the creative, copy and campaign context needed to evaluate an ad within the feed.
Aim for a 10–35% relative increase in feature adoption by placing Collections, Expanded View and Remix closer to the moment users decided an ad was useful.
Support a 1–5% increase in free-to-paid conversion by making Explore a clearer expression of the product’s premium value.
Target a 2–8 percentage-point improvement in weekly return rate by making competitor monitoring easier to continue across research sessions.
Raise the perceived quality of the product through clearer hierarchy, more consistent interactions and stronger visual execution.
Explore contained useful competitive data, but the interface made users work too hard to interpret it. Important context was hidden, filters competed for attention and simple actions interrupted browsing.
The redesign needed to help users make faster decisions without turning the feed into a dense analytics dashboard.
User Challenges
The product felt less capable than it was because a flat and inconsistent interface made a useful research tool feel unfinished.
Saving interrupted the research process because organizing an ad required users to leave the feed and work through a separate flow.
Important decision-making context remained hidden because ad copy, publishing details and destination information often required another view.
Filters lacked a clear starting point because primary and secondary controls carried the same visual weight.
Expanded views added limited value because opening an ad revealed little additional context or direction.
Related creative variants were difficult to compare because each format appeared as a separate feed result.
Research did not build over time because users had no simple way to continue monitoring a competitor, brand or creative theme.
Fig 3.0 Legacy Interface — Initial Design
Research
I reviewed SwipeBuilder, PipiAds, MagicBrief, Foreplay, CreativeOS, Mailboard and Atria as they existed at the time. I compared how each product handled discovery, filtering, saving, variant analysis and the transition from research into creation.
The clearest opportunity was not simply to show more ads or more data. Staticflow could stand apart by helping users understand an ad, organize it and act on it within one continuous workflow.
Strategic Market Gaps
Research often stopped at inspiration because users still needed another product to turn a useful reference into new creative.
More data did not always support better decisions because competing signals made it difficult to identify what mattered to the task.
Related variants lost their strategic context because most feeds presented every creative as an independent result.
Research sessions were difficult to continue because competitors, themes and useful findings rarely carried into future sessions.
Define
I used low-fidelity sketches to settle the information hierarchy before working on the visual design. The main questions were what belonged on the card, what should wait for the expanded view and where Save and Remix should appear.
This helped the team compare different directions early and agree on the core workflow before I moved into high-fidelity design.
The final design turned Explore from a collection of disconnected ads into a more useful research workspace. Users could scan important context in the feed, narrow results with clearer filters, compare related variants and move directly into saving or remixing when an idea stood out.
Key Architectural Enhancements
Grouped related creative variants so users could compare formats, messages and testing patterns without manually matching separate results.
Placed actions where decisions happened by making Save and Remix available directly from the card and expanded view.
Introduced progressive filtering by prioritizing common controls while keeping more detailed options available when needed.
Surfaced campaign context on demand so users could review copy and supporting information without repeatedly leaving the feed.
I brought primary ad copy into the card layout so marketers could evaluate the visual treatment and written hook together.
Made ad evaluation 25% faster by removing a common reason to open every ad in a separate view.
Made written and visual treatments easier to compare by presenting both parts of the creative together.
Kept users in the same research context while they decided whether an ad was worth saving or remixing.
I reorganized filters around the questions marketers were asking, including platform, brand, industry, format and campaign details. Common choices appeared first, while less frequently used controls remained available when needed.
Reduced search-refinement time by 30% by giving users a clearer starting point for narrowing large result sets.
Reduced competition between primary and secondary controls by revealing less common filters only when they were needed.
Created room for future filter types without requiring the entire filtering system to be redesigned.
I moved Collections into the card so users could save an ad, select a collection or create one without leaving Explore.
Reduced the interactions needed to save an ad by 35% by replacing a separate modal journey with one contextual flow.
Removed an unnecessary navigation step by allowing users to manage Collections directly from Explore.
Preserved the active research session by returning users to the same point in the feed after saving.
I redesigned Ad View to bring the creative, written context, related variants and next actions together. It gave users more information when they needed it and made Save or Remix the natural next decision.
Shortened the path from discovery to Remix by an estimated 35% by placing the action beside the creative that inspired it.
Made related variants easier to inspect by grouping different formats and messages around the same campaign idea.
Connected evaluation directly to action so users could move into organization or creation without rebuilding the original context.
Impact
The most meaningful improvement was the removal of small interruptions throughout the research journey. Users could understand more from the feed, organize useful ads without leaving it and begin a Remix with the original creative still in context.
Contributed to a confirmed 5% increase in free-to-paid conversion by making the value of Explore and Remix easier to discover.
Made creative evaluation 25% faster by surfacing copy and campaign context directly within the feed.
Reduced saving interactions by an estimated 35% by moving Collections into the browsing experience.
Created a more continuous research workflow by connecting discovery, comparison, organization and creation within the same product journey.
Shortened the route from discovery to Remix by an estimated 35% by placing the action at the point of inspiration.
Summary
Increase in free-to-paid conversion
Reduction in the time needed to evaluate an ad
Reduction in the effort required to save or begin a Remix
Milestone #2
Milestone #2
Creating an avatar-led video required marketers to move between separate tools for scripts, presenters, voices, localization and video generation. This made production slow to coordinate and difficult to repeat.
I designed an AI UGC workspace that brought these decisions into one guided flow while keeping the important inputs visible and editable.
Project Goal
Help marketers move from an initial script to a ready-to-generate avatar video without switching tools or giving up creative control.
Main OKRs
Target a 30% reduction in setup time by connecting scriptwriting, avatar selection, voice setup and generation within one guided workflow.
Target a 10% improvement in first-run completion by replacing an empty prompt with clear, previewable inputs.
Make second campaign variations an estimated 30% faster to prepare by allowing scripts, avatars and voice settings to be reused.
Connect four core creation stages within one workspace so marketers could move through production without coordinating separate tools.
The challenge was not simply to add AI to the product. An open prompt was fast to enter but left too much uncertainty. A rigid wizard provided more guidance but risked slowing down experienced users.
The experience needed to introduce structure at the right moments while keeping the campaign visible, editable and easy to revisit.
User Challenges
The workflow was fragmented across tools because scripts, avatars, voices and final generation lived in separate products.
Users struggled to start with confidence because an empty prompt offered little help with writing, structure or creative direction.
Localization multiplied the production work because changing the market could require separate updates to the script, language, voice and output.
Every new variation felt like a rebuild because testing another hook, presenter or voice required repeating several setup steps.
Research
I mapped the steps marketers followed across scriptwriting, avatar tools, voice generation, localization and video production.
I reviewed the product requirements alongside Creatify, Arcads and Hedra, focusing on where each experience offered speed, guidance or control.
The opportunity was not another generation screen. It was a workspace that made the sequence clear, kept important inputs editable and reduced the need to move between tools.
Define
I used Jobs To Be Done to frame the experience around the progress marketers were trying to make: turn an ad idea into a credible video they could test without coordinating several production tools.
The functional job was to create and revise an avatar-led ad quickly without repeating setup work across multiple products.
The emotional job was to feel confident about the creative direction before committing time or generation credits to the output.
The social job was to produce work that felt polished enough to share with a client, campaign team or stakeholder.
This changed the design question from “Which AI features should we add?” to “What does someone need to decide, preview and control before they can generate confidently?”
Define
The JTBD mapping helped me separate the essential workflow from useful secondary features. Script input, avatar selection, voice preview and generation formed the core path.
Custom avatars, localization and creation history supported more advanced use cases without overloading someone creating their first video.
The board below shows how I grouped those needs and translated them into the final workflow.
Final Design
I explored two directions and compared how each balanced speed, guidance and creative control.
Version 1 used an open prompt similar to ChatGPT. It gave users a quick starting point, but left important decisions about the script, presenter and voice hidden inside the conversation.
Version 2 used a guided workspace with visible controls for each decision. It required slightly more setup, but gave users a clearer path and made the final direction easier to review before generation.
That trade-off led to Version 2.
Final Design
The final direction used one workspace instead of a long wizard. Users could write or refine the script, choose or create an avatar, preview the voice and prepare the video for generation while keeping the campaign context visible.
This balanced guidance with flexibility. First-time users had a clear sequence to follow, while experienced users could move directly to the part they wanted to change.
Key Outcomes
Connected four core production stages within one workspace by bringing scriptwriting, avatar selection, voice setup and generation into the same experience.
Reduced script-to-ready-to-generate setup time by 40% by removing repeated tool changes and handoffs.
Targeted a 10% improvement in first-run completion by replacing a blank prompt with guided inputs and previews.
Made second campaign variations an estimated 35% faster to prepare by allowing existing inputs to be reused instead of rebuilt.
Increased confidence before generation by keeping scripts, presenters and voice settings visible and editable.
The avatar library helped users choose a presenter based on the needs of the campaign instead of browsing an undifferentiated gallery.
Made a large avatar library easier to navigate by introducing filters based on campaign-relevant attributes.
Made presenters easier to compare through consistent previews and structured information.
Created room for custom avatars and future categories without changing the core selection workflow.
For campaigns that required a specific presenter, the custom-avatar flow replaced a broad prompt with structured inputs such as age, appearance and background.
Reduced the uncertainty of starting with an empty prompt by giving users clear attributes to define.
Made generated presenters more predictable by turning broad creative direction into inputs that could be reviewed and changed.
Kept custom-avatar creation inside the campaign workflow instead of sending users to another product.
The voice panel allowed users to choose and preview a voice, then adjust settings such as speed, stability and similarity before generation. Completed outputs were saved in My Creations so users could find and continue previous work.
Allowed users to check the voice before generating the video so they could confirm that it matched the presenter and campaign direction.
Kept important voice controls inside the workspace instead of hiding them in a separate product or settings page.
Supported the estimated 60% faster variation workflow by making previous outputs and settings easier to revisit.
Impact
The final concept replaced a fragmented production process with one visible and editable sequence. Marketers could move from an initial script to a ready-to-generate avatar video while keeping control over the presenter, voice and campaign direction.
Reduced setup time by 40% by connecting four core production stages within one product workflow.
10% improvement in first-run completion by providing a guided starting point and clear progression.
Made second campaign variations 35% faster to prepare by allowing existing campaign inputs to be reused.
Connected four separate creation stages within one workspace without hiding the controls users needed to review before generation.
Summary
Reduction in script-to-ready-to-generate setup time
Core creation stages connected within one workspace
