Fireflies.ai (Speculative Redesign)Visual & BrandingProduct Design

Fireflies.ai: Mobile-First Ad Redesign

How I redesigned Fireflies' Meta ads and landing page to communicate value in 3 seconds instead of 10—optimized for mobile legibility, time-to-comprehension, and ICP-specific messaging.

Ads Designed

3 per ad

Formats Designed

Landing Page Sections Redesigned

Built withAd DesignMobile-First DesignConversion OptimizationLanding Page DesignB2B SaaS MarketingFigma PrototypingLive site

Context

The working context

Team

DESIGNER (SOLO SPECULATIVE PROJECT)

Koushik Venkatesan

Overview

May 2026 · Speculative Redesign Fireflies.ai is an AI meeting assistant that records, transcribes, and extracts insights from meetings. They recently launched AI Apps—a feature that lets users extract specific insights (feature requests, candidate concerns, project risks) from meetings automatically. I noticed two opportunities: 1. Their Meta ads carried too much text for mobile screens (most ad consumption happens on mobile, and dense text = low time-to-comprehension) 2. Their AI Apps landing page section didn't communicate value fast enough (users didn't understand what AI Apps do or why they should care) So I redesigned: - 3 Meta ads targeting different ICPs (founders, sales reps, healthcare professionals) - 1 landing page section explaining AI Apps in ~20 seconds This was a speculative portfolio exercise—not client work, just exploring how B2B SaaS ads can communicate value faster in mobile-first environments.

My expertise

Ad design, mobile-first UX, conversion copywriting, landing page design, ICP-specific messaging, visual hierarchy

Problem

What needed to change

How do you redesign B2B SaaS ads to communicate value faster on mobile—where most ad consumption happens, and users scroll past in 3 seconds if the message doesn't land?

Fireflies.ai is a strong product, but I noticed their ads and landing pages struggled with mobile-first clarity.

Problem 1: Ads carried too much text for mobile screens. Most Meta ads are consumed on mobile (Instagram, Facebook feed). Dense text = hard to read at a glance = users scroll past. Fireflies' existing ads had 4–5 lines of body copy + CTA—too much for a 9:16 mobile screen.

Problem 2: AI Apps landing page didn't communicate value fast enough. AI Apps is a powerful feature but the landing page section didn't explain what AI Apps are or why you should care in under 20 seconds. Users were confused: "Is this automation? Is this templates? What am I actually getting?"

The Challenge: Redesign Fireflies' ads and landing page to communicate value in 3 seconds, use stronger visual hierarchy, target 3 different ICPs with ICP-specific messaging, and make the product feel simple and approachable.

Questions we had to answer

Why do most B2B SaaS ads fail on mobile?

What makes an ad "mobile-first"?

How do you communicate value in 3 seconds?

How do you balance ICP-specific messaging vs. broad appeal?

Ads designed

ICP-specific messaging for each audience (Founders, Sales Reps, Healthcare)

Formats per ad

Mobile-first (9:16), feed (1:1), desktop (16:9)

Landing page sections redesigned

AI Apps explainer focused on fast value communication (<20 seconds)

Figma prototypes delivered

3 ad prototypes + 1 landing page prototype with Smart Animate

Alignment

What success had to look like

Success criteria

This was a speculative project, so success wasn't about metrics—it was about proving I can design mobile-first ads that communicate value faster.

I defined success as: (1) Reduce time-to-comprehension from 10+ seconds to <3 seconds. (2) Improve mobile legibility with bigger text, less clutter, stronger hierarchy. (3) ICP-specific messaging where each ad speaks to a different persona. (4) Make the product feel approachable, not overwhelming.

The goal: If someone scrolls past this ad on Instagram in 3 seconds, they should still understand the value prop.

Design themes

Mobile-First Legibility

Most B2B SaaS ads fail on mobile because they're designed for desktop. I designed for mobile first, then adapted to desktop.

Time-to-Comprehension

You have 3 seconds to communicate value before someone scrolls past. Less text, stronger hierarchy, faster comprehension.

ICP-Specific Messaging

Founders care about efficiency. Sales reps care about closing deals. Healthcare pros care about time saved. Each ad speaks to a different pain point.

Process

01Research Existing Ads (Study Otter, Granola, Read.ai, Fathom, Cluely)

02Identify Mobile Legibility Issues (Too much text, weak hierarchy)

03Define 3 ICPs (Founders, Sales Reps, Healthcare)

04Design Ad #1: Founders (Pattern interrupt, AIDA framework)

05Design Ad #2: Sales Reps (Tension hook, BAB framework)

06Design Ad #3: Healthcare (Proof-led, PAS framework)

07Redesign AI Apps Landing Page Section (Fast value communication)

08Prototype in Figma (Smart Animate for format variations)

Constraints

The tradeoffs we had to work inside

Mobile-first design

Most ad consumption happens on Instagram/Facebook mobile. Had to design for 9:16 vertical screens first, then adapt to 1:1 feed and 16:9 desktop.

3-second time-to-comprehension

If the message doesn't land in 3 seconds, users scroll past. Less text, stronger hierarchy, faster value communication.

ICP-specific messaging (founders ≠ sales reps ≠ healthcare)

Each audience cares about different pain points. Had to design 3 separate ads with different hooks, frameworks, and CTAs.

Brand consistency

Had to work within Fireflies' existing brand (purple, dark mode, product UI screenshots) without redesigning the entire brand system.

Behaviors encouraged

Stop scrolling (pattern interrupt, strong visual hook)
Read the headline (clear, concise, mobile-optimized)
Understand the value prop (in <3 seconds)
Click "Try Fireflies Free" (CTA is clear and low-friction)

Behaviors discouraged

Scroll past without reading (weak hierarchy, too much text)
Feel confused (unclear value prop)
Ignore the CTA (buried or unclear)

Process

How the work moved from messy to shipped

This was a speculative redesign, so the process was research → design → prototype.

Step 1: Research Existing Ads — I studied how competitors position themselves: Otter (transcription accuracy + integrations), Granola (note-taking speed: "Stop typing. Start closing."), Read.ai (AI-powered meeting summaries), Fathom ("AI notetaker" with social proof). Key insights: Most competitors lead with outcome rather than problem. The best ads use product UI screenshots. Mobile-first ads have <10 words of body copy.

Step 2: Identify Mobile Legibility Issues — Fireflies' existing ads had 4–5 lines of body copy + CTA on a 9:16 screen. Too much text for mobile. I redesigned for: 1 headline + 1 optional subheadline + 1 product UI screenshot + 1 CTA. Nothing more.

Step 3: Define 3 ICPs — Ad #1 targets Founders/CEOs/Heads of Department (AIDA framework, pattern interrupt). Ad #2 targets Sales Reps at SMBs (BAB framework, tension hook). Ad #3 targets Healthcare professionals (PAS framework, proof-led testimonial).

Step 4: Design the Ads — Each ad designed in 3 formats (9:16 mobile, 1:1 feed, 16:9 desktop) and prototyped in Figma using Smart Animate to show format transitions.

Step 5: Redesign AI Apps Landing Page Section — Explain what AI Apps are in 1 sentence, show 3 real use cases (sales, recruiting, management), visualize the product, make it feel simple. Goal: 20-second value comprehension.

Ad #1: "You Can't Be in Seven Meetings. fireflies.ai Can." (Founders)

Target ICP: SMB founder, CEO, or head of department (60% of Fireflies' paid users)

Emotional angle: Recognition → Relief. Founders feel overwhelmed by meetings; Fireflies relieves that burden.

Framework: AIDA (Attention, Interest, Desire, Action) | Hook: "You can't be in seven meetings. fireflies.ai can."

Why this works: Pattern interrupt (unexpected statement). Recognition (founders immediately relate to being over-scheduled). Relief (Fireflies can attend meetings on their behalf). Formats: 9:16 (mobile), 1:1 (feed), 16:9 (desktop).

Figma assets may take 1–2 minutes to load from CDN. Please wait if you see a blank or loading frame.

Figma Prototype — All 3 Formats

Ad #2: "Take Notes or Close the Deal. Now You Can Do Both." (Sales Reps)

Target ICP: AE / SDR / sales rep at SMBs

Emotional angle: Tension → Relief. Sales reps feel torn between taking notes and being present in the conversation.

Framework: BAB (Before, After, Bridge) | Hook: "Take notes or close the deal. Now you can do both."

Why this works: Tension hook highlights the pain (you can't do both at once). UI showcase visualizes the solution. Relief — Fireflies takes notes so you can focus on closing. Formats: 9:16 (mobile), 1:1 (feed), 16:9 (desktop).

Figma assets may take 1–2 minutes to load from CDN. Please wait if you see a blank or loading frame.

Figma Prototype — All 3 Formats

Ad #3: "Minutes Instead of Hours" — Proof-Led, Healthcare

Target ICP: Clinician / Doctor / GP / Psychiatric NP

Emotional angle: Recognition → Relief. Healthcare pros spend hours on documentation; Fireflies reduces it to minutes.

Framework: PAS (Problem, Agitate, Solution) | Hook: "Minutes instead of hours" — testimonial from Dr. Jennifer Bowen, Psychiatric Nurse Practitioner

Why this works: Proof-led (real testimonial from a healthcare professional). Product UI screenshot of medical notes dashboard. Trust signal (HIPAA compliant, BAA available). Formats: 9:16 (mobile), 1:1 (feed), 16:9 (desktop).

Figma assets may take 1–2 minutes to load from CDN. Please wait if you see a blank or loading frame.

Figma Prototype — All 3 Formats

AI Apps Landing Page Section Redesign

The existing AI Apps page didn't communicate value fast enough. Users were confused: "What are AI Apps? Why should I care?"

I redesigned the section to: (1) Explain what AI Apps are in 1 sentence — "AI Apps turn raw meeting conversations into structured outputs". (2) Show 3 real use cases: sales (feature requests), recruiting (candidate concerns), management (project risks). (3) Visualize the product with an AI Apps dashboard screenshot. (4) Make it feel simple and approachable.

Goal: If someone reads this section for 20 seconds, they should understand the value.

Visual hierarchy: Headline ("100+ AI Skills Built by teams like yours") → Subheadline ("Extract specific insights from meetings automatically") → 3 use case examples → Product UI screenshot → CTA (Try AI Apps Free →)

Figma assets may take 1–2 minutes to load from CDN. Please wait if you see a blank or loading frame.

Figma Prototype — AI Apps Section (After)

Figma assets may take 1–2 minutes to load from CDN. Please wait if you see a blank or loading frame.

Fireflies' Existing AI Skills Page (Before)

Figma assets may take 1–2 minutes to load from CDN. Please wait if you see a blank or loading frame.

Landing Page Hero Video Storyboard

Figma assets may take 1–2 minutes to load from CDN. Please wait if you see a blank or loading frame.

Full Landing Page Redesign

Takeaways

What changed once the work met reality

What didn't go as planned

How much text is too much for mobile?

B2B SaaS ads often carry too much copy because marketers want to "explain everything." But mobile screens are small. I followed a strict hierarchy: 1 headline + 1 optional subheadline + 1 product UI screenshot + 1 CTA. Anything more is too cluttered. Lesson: if you can't communicate value in 10 words or less, the message isn't clear enough.

ICP-specific messaging vs. broad appeal

Fireflies works for everyone—but trying to appeal to everyone means appealing to no one. I designed 3 separate ads for 3 ICPs: Founders (Recognition → Relief, AIDA), Sales Reps (Tension → Relief, BAB), Healthcare (Proof-led, PAS). Lesson: ICP-specific messaging converts better. Founders don't care about HIPAA compliance. Healthcare pros don't care about closing deals. Speak to the pain.

What shipped

Designed 3 Mobile-First Ads (9:16, 1:1, 16:9)

Redesigned Fireflies' Meta ads to communicate value in <3 seconds: Ad #1 for Founders ("You can't be in seven meetings. fireflies.ai can."), Ad #2 for Sales Reps ("Take notes or close the deal. Now you can do both."), Ad #3 for Healthcare ("Minutes instead of hours" — testimonial-led). Each ad designed for mobile-first legibility, then adapted to feed + desktop.

3 (Founders, Sales Reps, Healthcare)

Ads designed

3 (9:16, 1:1, 16:9)

Formats per ad

Redesigned AI Apps Landing Page Section for Fast Value Communication

Redesigned the AI Apps landing page section to explain what AI Apps are and why you should care—in under 20 seconds. Clear headline, 3 concrete use cases, product UI screenshot, single CTA.

Reduced from 30+ seconds to <20 seconds

Time-to-comprehension

Explained in 1 sentence + 3 use cases

Value prop clarity

Outcome

What shipped and what it proved

Ads Designed

ICP-specific messaging for Founders, Sales Reps, and Healthcare

3 per ad

Formats Designed

Mobile-first (9:16), feed (1:1), desktop (16:9)

Landing Page Sections Redesigned

AI Apps explainer with fast value communication (<20 seconds)

Figma Prototypes Delivered

3 ad prototypes + 1 landing page prototype with Smart Animate

<3s ads / <20s landing page

Time-to-Comprehension

Mobile-first clarity and hierarchy

What came next

This was a speculative portfolio exercise, not client work. The goal was to explore how B2B SaaS ads can communicate value faster in mobile-first environments. Key learnings: 1. Mobile-first legibility matters — most ads fail because they're designed for desktop. 2. Less text = faster comprehension — if you can't say it in 10 words, the message isn't clear. 3. ICP-specific messaging converts better — speak to the pain, not "everyone". 4. Product UI screenshots beat abstract illustrations — show, don't tell. I'd love to apply this approach to real client work: designing mobile-first ads that convert, not just look pretty.

View more work