← Back to work

AI Outbound

Redesigning personalized outreach to feel human, not automated.

Role
End-to-end product design
Timeline
June 2026
Team
Product, Marketing, Engineering
Company
HoneyBook
  • AI
  • Product design
  • Growth
The final AI Outbound landing page: a personalized, deck-style HoneyBook page addressed to a named recipient.

Overview

HoneyBook needed a way to reach high-value businesses that weren't actively shopping for new software.

I designed an AI-powered email and landing page system that personalized outreach at scale while staying consultative, not creepy.

My role
End-to-end product design: research, UX/UI, prototyping, and prompt engineering for AI-generated content.

I also designed the landing page as a deck: structured, scannable, and distraction-free. I rewrote the AI prompts to make cold outreach feel human.

Objective
Increase acquisition and activation of proven ICP verticals by creating a scalable, AI-powered outbound motion that could simulate personalized, human-grade consultative outreach at scale.

What we built

An outbound system, not just an email.

The system took existing ICP lead lists, enriched them to infer operational pain, and generated personalized email and landing page combinations.

The email created the opening.
The landing page continued the conversation.

Together, they created a more consultative path from cold outreach to product discovery.

A stack of generated cold emails in Gmail, each opening with a different inferred pain point.
Personalized emails. Pain-led, JTBD-oriented, written in a human tone.
The personalized HoneyBook landing page addressed to Marcus, continuing the email's narrative.
Personalized landing pages. Echoes the email, one clear next step, zero distractions.

The problem

The original concept felt like AI was doing the selling.

The development team had already built an initial landing page using AI.

It had three problems:
The design looked obviously AI-generated.
There was no meaningful interactivity or movement.
The personalization felt invasive.

The initial AI-built landing page: a generic marketing layout with a bright purple hero and stock photography.
The landing page the development team built with AI. This is the concept I inherited, not the final work.

Using someone's name in a traditional marketing page made the experience feel less like someone reaching out and more like surveillance.

This became the central design challenge: how do you make personalized outreach feel thoughtful rather than creepy?

The shift

I wanted it to feel like a personalized deck, not a marketing page.

Since we'd be surfacing personal data, the experience needed to feel intentional and custom.

I looked for formats that could make personalized information feel useful rather than invasive. Two inspirations shaped the direction:

growth.design
Their case studies use a structured, modular format. Users move through slides, progress indicators show where they are, and the information is easy to scan. It feels more like an experience than marketing.

Spotify Wrapped
They take personal data and present it in a way that's engaging and easy to navigate. The format respects the reader's time and makes the experience feel thoughtful.

growth.design case studies in a structured, slide-based format with progress indicators.
growth.design: a modular, slide-based format that doesn't feel like marketing.
Spotify Wrapped for Artists: personal stats presented as an engaging, swipeable story.
Spotify Wrapped: personal data made engaging, not overwhelming.

Email design

Lead with the pain, not the product.

I shaped the email approach by reviewing the initial versions and providing direction on tone, structure, and pain mapping.

Design principles:
Pain-led, JTBD-oriented
Read like a founder or peer, not a SaaS team
Specific over impressive
Only use the recipient's name and inferred pain. No scraped personal data.

Four pain hooks:

Efficiency gaps
"What would 30 fewer admin minutes per booking feel like?"

Tool fragmentation
"Still quoting gigs in a spreadsheet?"

Admin burden
"Chasing Venmo payments after every event?"

Migration anxiety
"Switching feels risky. We can make it painless."

The proposed email template: subject line formula, message structure, and generation rules.
The template. Structure and rules fed directly into the AI prompt.
A finished personalized email in an inbox: subject 'Portfolio sharp, intake messy', a short conversational note that names one specific pain and links to a page.
The result. Names one real pain, offers a look, and doesn't push.

Email refinement

The first version was too data-heavy.

The initial emails all followed the same basic structure and forced the data into the message in ways that didn't feel human.

I shifted the approach from data-heavy to conversational.

The goal wasn't to prove how much we knew about someone. It was to show that we understood a real problem they might be experiencing.

Two early AI-generated email drafts with red marks through the phrases that tried too hard or overused the recipient's data.
The first pass. Same structure every time, with the data forced into every line.

Landing page

Personalization needed a better container.

The landing page carried the conversation forward from the email.

Instead of dropping someone onto a traditional marketing page filled with product claims, I designed it as a personalized deck.

The structure gave the experience a clear beginning, middle, and end while keeping the amount of information on screen intentionally focused.

IA + Figma

I designed the experience as a modular system.

I mapped the user journey through the page with an eight-module structure.

Then I moved to Figma to build modular components that could be reused, personalized, and tested in code before engineering started.

The eight-module information architecture: an email-to-landing-page flow with a table naming each module's job.
Information architecture. Eight modules, from hero to closing CTA.
The Figma file: modular hero, shift, solution, and CTA components organized for reuse.
Figma. Built to be reused, personalized, and tested in code.

Claude Code

I used code to validate the experience before engineering.

I used Claude Code to validate the design before handing it to engineering.

I started with rough HTML to establish the foundation, then layered in parallax and deck-like interactions.

From there, I took each Figma module and iteratively refined them until I had a working prototype to share with the team.

The prototype made the interaction model tangible before engineering committed to the final build.

The rough first pass in Claude Code: dark theme, before the final polish.
Refining the prototype in Claude Code, one module at a time.

Shaping the direction

I helped turn an early AI-generated concept into a more human, credible, and scalable growth experience.

Challenged the initial approach
Called out where the experience felt generic, overly personalized, and visibly AI-generated.

Aligned the team on a stronger concept
Introduced the deck-like format and a consultative narrative that connected the email and landing page.

Made the idea tangible
Built the interaction model in Claude Code, giving Product, Marketing, and Engineering a working vision to align around.

Guided it through execution
Refined prompts, reviewed implementation, and protected the design intent through launch.

Key design decisions

Every interaction had a job.

Scroll bar
Shows your position in the story. Gives momentum and makes the page feel finite rather than endless.

Side navigation
Lets people jump to the sections that matter to them. Power users can skip ahead without losing the narrative.

Parallax transitions
Creates depth as you scroll. Each section feels like turning a slide rather than reading a wall of text.

Fixed bottom CTA
Keeps trial and demo accessible throughout the experience while supporting conversion and accessibility.

The scroll progress bar running along the top of the page.
Scroll bar.
Side navigation dots letting readers jump to chapters of the page.
Side navigation.
A parallax transition carrying depth between two sections of the page.
Parallax transitions.
The fixed bottom bar with trial and demo CTAs, visible throughout the scroll.
Fixed bottom CTA.

Handoff + QA

The design didn't stop at handoff.

I handed off the working HTML from Claude Code with a detailed walkthrough demo.

As the team developed, I provided feedback through Loom. I recorded expected interactions, called out bugs, and showed exactly what needed to change.

I stayed close to implementation to keep the original design intent intact throughout the build.

A Slack message with handoff feedback next to a Loom recording reviewing the landing page build.
Feedback via Slack and Loom: specific, recorded, and easy to act on.

Final design

A personalized growth experience that feels intentional.

The final experience connected the personalized email and landing page into one continuous conversation.

The email earned attention.
The landing page continued the story.
The product gave the prospect a clear next step.

The same system generating for a different recipient.

Early results

The first test showed a strong signal.

We launched a small batch test with 195 DJs to validate the approach before scaling.

The early numbers showed that the consultative, personalized strategy was resonating.

195
Email sent
70
Opened emails
38.6%
Open rate
9
Landing page visitors
7
Email replies

Impact
Strong email engagement signaled that the pain-led, consultative approach was resonating.

Next steps
Expand to an additional DJ batch of 800 and proven ICP verticals.
Measure landing page conversion and trial-to-activation.
Track CAC against the paid baseline.