Product
Web
My Role
Lead Product Designer
Collaborators
2 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
As Lead Product Designer, I spearheaded the end-to-end design strategy to scale Staticflow (Konvert) from a creative utility into a premium enterprise platform. Working directly with the founders, I unified competitive intelligence with AI-automated production to serve a rapidly growing market.
This evolution was anchored in three strategic milestones—from redefining discovery to automating high-fidelity production. Explore the deep-dive for each below if you're short on time:
Impact Summary
Spearheaded the visual strategy and transition to Konvert, creating a premium, dark-themed identity that supported enterprise-tier scalability for a platform supporting $3M+ ARR.
Designed the AI UGC suite, transforming a fragmented, multi-hour manual production process into a 60-second automated workflow, decreasing total "Time-to-Creation" by 80%.
Optimized "Remix" and "Template" discovery flows, contributing to a 5% increase in free-to-paid conversion by surfacing premium value at critical decision points.
Architected a token-based design system of 4,000+ components, eliminating technical debt and accelerating design-to-engineering handoff by 35%.
Impact Metrics
Reduction in TTV (Time-to-Value) for AI ad generation, moving from hours to under 60 seconds.
DAU/MAU Ratio, successfully transitioning the platform into a daily habit-forming research tool.
Faster Development Cycles achieved through the implementation of a standardized 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.”
Thomas Edward Moro — Founder, Staticflow
Skills
Product Strategy, Human-AI Interaction Design, Generative AI Workflows, JTBD Research, Design System Architecture, Token-based Design, Information Architecture, Data Visualization, Advanced Prototyping, Design-to-Engineering Handoff, Visual Design, Interaction Design.
Milestone #1
The Explore page serves as the platform’s central discovery engine, where users find, evaluate, and organize high-performing competitor ads. It is the primary entry point for research, designed to turn vast market data into actionable inspiration for new creative campaigns.
Project Goal
Main OKRs
Reduce Time-to-Inspiration by helping users identify relevant ad creatives and patterns in seconds, not minutes.
Increase Feature Adoption for "Save to Collection" and "Expanded View" actions through optimized information architecture.
Drive Free-to-Paid Conversion by positioning the Explore page as a primary value-hook for premium intelligence.
Improve Weekly Retention (DAU/MAU) by establishing the feed as a daily habit for competitive monitoring.
Elevate Perceived Product Quality to support the Konvert rebrand and align with enterprise-grade standards.
The Explore page was a critical yet underperforming surface. While rich in competitive data, a high cognitive load made it difficult for growth teams to effectively evaluate ad performance or take action. The objective was to transform passive browsing into a repeatable, revenue-driving workflow by clarifying intent and bridging the gap between discovery and execution.
User Challenges
Low Brand Trust
The discovery experience felt visually flat and non-premium, hindering its adoption as a professional-grade research tool for high-spending enterprise teams.
High-Friction Organization
Saving and organizing ads was a cumbersome, multi-step process that interrupted the active research flow and discouraged collection building.
Missing Decision Signals
Critical data, such as publish timing and destination URLs—was hidden, forcing users into unnecessary clicks to evaluate ad relevance.
Overwhelming Navigation
Filter controls lacked prioritization, creating analysis paralysis and significantly slowing down the user's "Speed-to-Inspiration."
Shallow Analytical Depth
Expanded ad views provided minimal insight into creative performance or copy, preventing users from extracting the strategic value behind successful ads.
Inefficient Variant Analysis
For ads with multiple creative variations, users couldn’t quickly compare formats or messages. This made it difficult to spot patterns or assess testing strategies.
Users Couldn’t Track Competitors Over Time
Isolated searches prevented a habit-forming, personalized research feed, forcing users into repetitive and time-consuming manual workflows.
Fig 3.0 Legacy Interface — Initial Design
Our review of competitors—including SwipeBuilder, PipiAds, MagicBrief, Foreplay, CreativeOS, Mailboard, and Atria—revealed a fragmented landscape. Most tools optimized either for volume of ads or surface-level inspiration, but rarely both usability and analytical depth.
These gaps highlighted an opportunity to reimagine Explore as a differentiated, premium experience: combining best-in-class discovery patterns with deeper ad context, remixability, and long-term competitive tracking. Early ideation sessions focused on distilling these insights into a cohesive, scalable product direction.
Strategic Market Gaps
Curation-to-Execution Void: Curation tools like Foreplay and Magicbrief functioned as static digital scrapbooks. They optimized for saving data but completely decoupled discovery from production, forcing teams off-platform to manually script or build creative variations.
Volume Over Usability: Databases like Pipiads prioritized raw metric volume over intuitive data design. Their dense interfaces created high cognitive load and analysis paralysis, trading actionable insights for an overwhelming, fragmented user experience.
Isolated Variant Frameworks: Competitors treated ad variations as single, disjointed feed entries. By failing to cluster creative iterations logically, they made it tedious to reverse-engineer competitor testing patterns and format strategies.
Transactional Session Retentions: Platforms like Mailboard and Tryatria were structured around reactive, one-off search loops. They missed the habit-forming, personalized feed architectures required to turn occasional research into a daily monitoring workflow.
Low-fidelity sketches were used to map end-to-end user flows across the Explore experience, helping define core screens, interaction patterns, and decision points early in the process. This phase allowed us to explore multiple directions quickly, validate assumptions, and organize complex ideas into clear, future-proof flows before committing to high-fidelity design.
The redesigned Explore page transforms ad discovery from a rigid, transactional search engine into a fluid, context-aware intelligence workspace. By replacing the flat information architecture of the legacy system with logical hierarchy and intentional action frameworks, the new interface dramatically reduces cognitive friction and significantly accelerates the creative loop for growth teams.
Key Architectural Enhancements
Clustered Creative Iterations: Legacy variations existed as separate, disjointed entries that cluttered the feed. The new architecture groups variants by core concept, enabling teams to instantly deconstruct a competitor's testing patterns without manual sorting.
Direct-to-Execution Workflows: Shifting from a static repository where discovery was isolated, the new card layout introduces micro-actions like Remix. This instantly bridges the gap between inspiration and production.
Intentional Filter Architecture: Replaced dense, high-friction data tables with progressive, multi-dimensional filters. Guided discovery paths and predictive taxonomies eliminate user analysis paralysis to surface high-value insights faster.
Visual Performance Overlays: Stripped away volumetric data sheets in favor of interactive hover overlays. This allows teams to evaluate an ad's creative viability at a glance without jumping between isolated detail views.
We integrated primary ad copy straight into the core card layout, allowing growth teams to evaluate visual assets and copywriting hooks simultaneously without leaving the main browsing experience.
Reduced feed "pogo-sticking" by ~45% by eliminating repetitive click-paths into nested detail views.
Increased ad comparison efficiency by surfacing visual and written context together
Enhanced campaign pattern recognition across competitor messaging changes instantly.
The filtering experience was redesigned to support how marketers actually search for inspiration. Users could narrow results by platform, industry, format, and campaign metadata, making exploration more relevant to their workflow.
Shortened search refinement time by ~35% for repeat users
Improved relevance of surfaced ads across high-volume search sessions
Reduced friction when narrowing down competitor examples for campaign planning
Saving ads was streamlined into a single in-context action. Instead of interrupting users with multiple modals, collections could now be created and managed directly from the card, reducing friction while preserving flexibility.
Reduced the save-to-collection flow from multiple modal steps to a single contextual action
Drove a ~50% increase in direct-to-collection interactions during creative research sessions
Made collection building feel seamless within the discovery workflow
The Ad View was redesigned to help users move beyond browsing and into execution. Once an ad was selected, the experience surfaced the creative itself alongside performance signals, copy variations, and generation tools, making it easier to analyze why an ad worked and quickly create new variations from it.
Drove a ~50% increase in direct-to-production feature adoption, including AI-powered remix workflows
Shortened the end-to-end asset loop from competitor discovery to concept incubation
Reduced workflow gaps for distributed growth teams moving from research into live ad testing
The Explore page was redesigned to address slow discovery, limited filtering, and fragmented workflows, helping marketers research, compare, and develop ad concepts faster through richer ad context and in-feed actions like Remix and Save.
Reduced friction across campaign research workflows
Designed a flexible filtering system that reduced search abandonment by ~35% during high-volume research sessions.
Increased adoption of AI-assisted creation tools
Integrated Remix and generation actions into the feed, increasing adoption of AI-assisted workflows by ~50%.
Improved creative evaluation speed
Surfaced ad copy and campaign metadata directly on cards to reduce unnecessary detail-page navigation.
Streamlined content organization
Simplified the collection flow into a lightweight in-context interaction for faster saving and organization.
Reduced the gap between discovery and execution
Connected research, iteration, and AI generation into one workflow to speed up campaign creation.
Summary
Increase in AI-assisted workflow adoption
Faster creative evaluation during browsing
Reduction in time-to-concept iteration
Milestone #2
Creating market-ready video ads required users to move between separate tools for scripts, voiceovers, localization, avatars, and production. This made the process slow, fragmented, and difficult to scale for marketers who needed to test creative quickly.
I designed the AI UGC experience to bring these steps into one guided workflow, helping users move from script to avatar-led video in minutes while keeping control over the final output.
Project Goal
Main OKRs
Ad creation was still a slow, manual, and fragmented process for many users. Marketers had to move between separate tools for scripts, voiceovers, avatars, localization, and final production, making it harder to test ideas quickly. The challenge was to design an AI-powered workflow that felt fast and simple, while still giving users enough control to trust the final output.
User Challenges
Manual Ad Creation Took Too Long
Users had to rely on multiple tools and manual steps to create a single ad, from writing scripts to preparing voiceovers and visuals. This made production feel slow, repetitive, and difficult to scale when teams needed to test campaigns quickly.
Users Struggled to Start With Confidence
For many users, the hardest part was knowing where to begin. Open-ended AI prompts created uncertainty around what to write, how to structure a script, and which creative direction would lead to a strong campaign.
Localization Added More Production Friction
Creating ads for different markets often meant rewriting scripts, finding new voices, changing languages, and exporting new assets. This slowed down global testing and made campaign variation harder than it needed to be.
Iteration Was Too Expensive and Slow
Testing different hooks, voices, avatars, or messages required users to rebuild large parts of the campaign manually. This made creative experimentation harder, especially for growth teams that needed to move quickly from idea to performance testing.
To shape the AI UGC experience, we studied how marketers currently move from idea to finished video across scripting, voiceovers, avatars, localization, and production tools.
We combined early user feedback, internal workflow reviews, and competitive analysis of AI video platforms to identify where users needed more guidance, control, and speed.
These findings helped define a creation flow that felt structured enough for first-time users, but flexible enough for experienced teams testing multiple campaign variations.
I wanted to better understand customer needs through the Jobs To Be Done framework. This shifted the focus away from demographics and toward user goals, motivations, and desired outcomes, helping us design around how people actually use the product rather than who they are.
Jobs are rarely about the functional aspect alone. They have important emotional aspects too, that consist of personal and social dimensions which can be even more powerful than functional ones.
Functional is mostly about cold rational utility or completing a task, which also makes it vulnerable to competition since the customer won’t think twice before switching to another tool which can do the same task faster or cheaper.
Emotional on the other hand, is about feelings, hence hard to quantify, but often irrational. It is about how using a product or service makes you feel and the perception it creates.
Rather than focusing on a list of features for a product, the JTBD framework forces us as designers to think about outcomes: will users be able to (happily and easily) complete the job they “hired” the product for? Does this solution provide a better outcome than the existing ones?
Subsequently, we used all the created UX deliverables to evangelize UX research findings and their output for all members of the development team.
The Jobs To Be Done (JTBD) framework helped us prioritize features around what users were actually trying to accomplish throughout the ad creation process. Instead of focusing purely on features, we mapped workflows around user goals, friction points, and desired outcomes to better understand where AI could reduce effort while still preserving creative control.
The embedded FigJam board below captures part of the exploration, prioritization, and thinking process used to shape the final experience.
We explored two versions of the Staticflow UGC feature and tested them with users through an A/B test to validate viability.
The first version shown below followed a ChatGPT-like experience, allowing users to prompt the system and generate a UGC ad quickly. The second used a more guided workflow, where users could write a script, select avatars, and personalize voices for deeper customization.
The final AI UGC experience turned a fragmented ad production process into a guided creation workflow. Users could write a script, choose or create an avatar, adjust voice settings, and generate an avatar-led ad from one focused workspace.
This helped users move from blank canvas to generated video faster, while giving teams more control over creative quality, iteration, and campaign testing.
Key Outcomes
Unified fragmented production tasks into one workflow
Combined scripting, avatar selection, voice setup, and generation into a single guided flow, reducing campaign creation time by ~60%.
Improved first-time user completion
Gave users a clearer path from blank canvas to generated output, improving first-time completion by 45%.
Made avatar selection faster and more intentional
Introduced avatar browsing, filtering, and custom avatar creation so users could quickly choose or generate presenters that matched their campaign direction.
Increased confidence before generation
Added voice controls, previews, and editable script inputs to help users review the ad direction before producing the final output.
Enabled faster creative testing
Brought scriptwriting, avatar selection, voice setup, and video generation into one product experience, reducing dependency on separate production tools.
The avatar library gave users a faster way to choose the right presenter for their campaign, with filters for gender, age, industry, and environment. This made avatar selection feel less like browsing a gallery and more like choosing the right creative direction.
Reduced decision fatigue by helping users narrow avatar choices based on campaign context.
Improved confidence before generation by making avatar options easier to compare visually.
Created a scalable avatar selection pattern that could support future avatar categories and user-generated characters.
For users who needed more control, the custom avatar flow allowed them to generate a presenter from structured inputs like name, gender, age, ethnicity, and appearance. This turned a broad AI prompt into a more guided and predictable creation experience.
Reduced “blank prompt” anxiety by giving users clear fields to guide avatar creation.
Helped support more specific campaign needs without requiring external avatar tools.
Contributed to replacing reliance on 5 external production tools across scripting, voice, avatar, localization, and video creation.
The voice settings panel gave users control over voice generation, preview, speed, stability, and similarity before producing the final ad. Generated assets were then saved into My Creations, giving users a clear place to track outputs and continue working from their generated videos.
Improved trust in AI output by giving users control before committing to generation.
Supported faster creative testing by making it easier to adjust voice direction and generate variations.
Helped drive 50% adoption of AI-generated ads among active paid teams by making the workflow easier to repeat.
Getting individuals to discuss personal matters on their phones proved to be quite challenging. Who would've thought, right? In the early stages of the project, we interviewed and surveyed over 900 participants to understand their use-cases and struggles.
Introduced a premium, scalable visual system aligned with Staticflow’s positioning
Simplified save-to-collection flows, reducing steps to organize inspiration
Added at-a-glance ad context (publish timing, descriptions, URLs, formats)
Designed richer expanded ad views with performance estimates and AI-driven insights\
Summary
Active Users
Businesses using Staticflow
More Work
The editor had not had a refresh in almost 4 years. The main objectives for the redesign were to enhance usability by improving current features, resolving pending bugs and UI inconsistencies and introducing new features such as AI, Request Review, and Compare Versions.
I also did:
1. The design of Helpjuice’s Design System
2. File Manager Redesign
3. Translations Feature Redesign
4. Landing Page Redesign
5. About us Page Redesign
6. Dashboard Page Redesign
If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
If you’re short on time, here’s a quick overview of the main milestones, which are detailed further in the UX case. You can also click the link below to dive straight into the solutions.
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
Improve ad discovery efficiency by reducing time to evaluate and compare competitor ads
