LANDING
PAGES
& COLLECTING LEADS

How to structure
What to write
What imagery to use
How to think about design
Asking for feedback
Assessing conversion
Inspiration

You’ll only get one chance
to make a first impression

THE GOOD NEWS IS
I’ve ruined enough first impressions
to help you make a stellar one

Landing page conversion as an equation
Conversion = Desire - Labor - Confusion

+ Increase Desire
Entice with value. Create intrigue. Go out of your way to make it as
easy as possible for visitors to imagine their improved lives with your
product in it.
- Decrease Labor
Minimize the work visitors have to do to get your value props. The
more words and imagery to process, the harder and more tiresome it
becomes. Aim for every word, visual and element to add meaning.
- Decrease Confusion
Make it crystal clear how your product improves visitor’s lives.
Be specific and consistent at every step and turn.

Messaging > design
1. Hone your message. Identify the selling points that
are most enticing about your value proposition.
2. Put together copy and imagery to convey those
selling points as clearly and concisely as possible.
3. Design your page in a way that enhances the
clarity and impact of your messaging.

GETTING YOUR STORY STRAIGHT
Value proposition generation
A product quality matched to a customer benefit
“Here’s what our
product can do.”
“Here’s what you can
do with our product.”
vs.

VALUE PROPOSITION GENERATION
A product quality matched to a customer benefit
Imagine your product
is fast
Benefit: Quicker output → Value prop: Get work done faster.
Benefit: Greater output → Value prop: Get more work done.
Benefit: Greater efficiency → Value prop: Save yourself time

VALUE PROPOSITION GENERATION
A product quality matched to a customer benefit
Imagine your product
is secure
Benefit: Protection → Value prop: If you lose or misplace your card, freeze it from the app.
Benefit: Control → Value prop: Turn off contactless, online payments and ATM withdrawals from the app.

VALUE PROPOSITION GENERATION
A product quality matched to a customer benefit
Imagine your product
is secure
Benefit: Privacy → Value prop: Only your friends can see your messages.
Benefit: Protection → Value prop: If your phone is stolen, your data cannot be stolen.

VALUE PROPOSITION GENERATION
A product quality matched to a customer benefit
Imagine your product
doesn’t charge fees on international transactions
Benefit: Spend globally → Value prop: Spend abroad in over 150 currencies at the real-time exchange rate.
Benefit: Transfer globally → Value prop: Transfer money to anywhere in 24 currencies. No additional fees.

VALUE PROPOSITION GENERATION
How to write effective value propositions
Column 1
List all bad (non-desirable) alternative solutions people resort to when they don't have your product.
Illustrate what makes each one bad.
Column 2
For each bad alternative, write one value prop that highlights that badness and point out how your
product offers a better solution to make life better.
Column 3
List top personas and identify the two things they most care about. Ignore lower priority audiences.
Match column 2 with column 3
Reduce your list of value props in column 2 to those that are most appealing to your top personas.

VALUE PROPOSITION GENERATION
Example: Livechat software
BAD ALTERNATIVES VALUE PROPS TOP PERSONAS
Low quality sales calls
Wasted sales resources
Visitors bounce
Lost sales opportunities
Long, boring FAQ’s
No one reads them
Support emails
Most don't bother
Process more leads using
fewer senior sales reps by
asynchronously handling
customer objections via
templated live chat.
Hear visitors' objections
proactively so you can
address and close more
deals before they bounce.
Head of marketing
Conversion rates
Traffic volume
Chief revenue officer
Reduce churn
Increase ARPU/LTV
Head of sales
Increase qualified leads
Qualify leads accurately

VALUE PROPOSITION GENERATION
Example: Digital banking services
BAD ALTERNATIVES VALUE PROPS TOP PERSONAS
Transaction fees
Moving money costs money
Transaction delays
Wastes productivity. Hinders opportunity.
Limited control
Difficult to budget. You lose money.
Cumbersome to open an account
Takes a lot of time.
Not available for everyone.
Spend, withdraw and send money anywhere in
the world. No additional fees.
Send and get money in real-time, to and from
anywhere in the world.
We’ll send real-time spending notifications and
show you exactly where your money is going
every month so you have full control over your
personal finances.
Open an account in seconds without street
address or credit checks.
Traditional account holders
Travel & move money without extra fees
Better overall service
Increased budget control
International freelancers
Maximum control and flexibility
Get paid instantly from anywhere in the world
Expats
No street address needed, no credit checks
Easy, quick account setup

INFORMATION DENSITY
Use copy and visuals to maximize information density: the art of saying
a lot with a little. A high ratio of ideas to elements (words + visuals).
DECREASING LABOR & CONFUSION
VALUE PROPOSITIONS
Use copy and imagery to tell a compelling story of a world with
your product, setting it off against a world without your product.
INCREASING DESIRE

GET TO THE BEST COPY VARIATION
Don’t settle for the first phrasing that comes to mind.
Write variations until you find the most enticing and
concise version. Ask others for feedback.
REMOVE UNNECESSARY WORDS
Every word on your page must be necessary. If you
can remove a word without reducing how enticing,
clear or critically informational a sentence is, do it.
DON’T PITCH EVERY VALUE PROP IN FULL
Stick with the ones that entice your ideal customers
most. Take a 80/20 approach. The more visitors must
read, the less they’ll read in total.
NO SALES FLUFF
Avoid meaningless sales speak. Steer clear of empty
cliché words like ‘revolutionary’, ‘incredibly’,
‘powerful’, ‘best-ever’ and whatever else. They don’t
tell visitors anything and you’ll seem like a copycat.
Instead, specifically describe exactly how you're
unique.
MINIMIZE SCROLLING
Provide the main value props at the first impression.
Visitors shouldn’t have to scroll to understand
fundamental value propositions.
Nailing information density

The winning formula
1. NAVBAR — Top of the page: company logo and site links.
2. HERO — Big section with header text, subheader text and most enticing imagery.
3. SOCIAL PROOF — Logos and/or testimonials of best-known clients.
4. CALL-TO-ACTION — Signup button or similar with a concise incentive to go for it.
5. FEATURES & OBJECTIONS — Key value propositions. Why people would choose you.
6. CALL-TO-ACTION REPEAT — Repetition cooks an idea into people’s heads.
7. FOOTER — Miscellaneous links.

Navbar
LOGO —————————-——————————————-——————————— LINKS —— CTA
• Logo
• Links to key sections on your page
• CTA - button (e.g. Buy now, Notify me, Request access,…)
The fewer links, the better. Maximize focus on the CTA. Thumbs up for sticky navbars.

Hero
—————————-—————————————— (IMAGERY) ————————————-———————————
HEADER
SUBHEADER
—————————-—————————————— (IMAGERY) ————————————-———————————
If the visitor reads nothing else on your page,
they should still get your product and why they should use it.

Hero — Imagery
The purpose of the hero imagery is to visualize the value propositions
conveyed by the header and subheader.
It should complement and reinforce the copy. Not distract from it.
This often comes down to showing off your product.
Software → screenshot
Physical products → picture
Services → illustration
Avoid videos. Thumbs up for animated screenshots. But don’t make this a priority.

Hero — Imagery
“In advertising, the greatest thing to be
achieved is believability. Nothing is more
believable than the product itself.”
LEO BURNETT

Make them want to scroll. But don’t require them to scroll.
Descriptive, while concise.
Hook them. Or lose them forever.
Be specific. Don’t be vague. “Improve your workflow!”
If a visitor reads only this text on the page, would they know exactly what you sell?
Hero — Header

Hero — Header
How to write great headers
01
Identify a compelling feature that captures your product’s purpose
02
Point out the high-level purpose

Hero — Header
What makes a compelling feature?
“I want that!”
“Finally, a reason to sign up for one of these products!”

Hero — Header
Compelling features — Example: Video Chat App
Chat with anyone quickly.
Chat on your phone, tablet, or desktop.
Auto-translate real-time conversations in any language.
Get transcripts for every conversation — emailed to you.
Have auto-translated chats with foreigners.
Find someone to video chat with in less than 30 seconds.

Hero — Header
Compelling features — Example: Video Chat App
Chat with anyone quickly.
Chat on your phone, tablet, or desktop.
Auto-translate real-time conversations regardless of language.
Get transcripts for every conversation — emailed to you.
Have auto-translated chats with foreigners.
Find someone to video chat with in less than 30 seconds.

Hero — Header
High-level purpose
Does the visitor get why the value proposition matters?
Riley texts your real estate leads for you — to automatically qualify them.
Have auto-translated chats with foreigners — to have fun learning any language.

Hero — The Ladder Of Product Awareness
They’re motivated to solve the problem and are convinced your product is the best solution
They’re motivated to solve the problem, but aren’t sure which solution is best
They’re aware solutions exist, but aren’t sufficiently motivated to solve the problem.
They’re experiencing the problem, but are unaware solutions exist.
They’re not experiencing the problem.
The lower on the ladder, the more you’ll need to go out of your way to educate them.

Hero — Header
Good examples
Visually design and develop sites from scratch. No coding.
Groceries delivered in 1 hour. Skip traffic, parking, and long lines.
Invest in crypto even if you’ve never invested in crypto.
Create engaging animations for any app or website.
Rent real people's homes. So you can experience a city like a true local.

Hero — Header
Bad examples
BAD Forest: Stay focused, be present.
BETTER An app that prevents phone addiction. So you can focus on what’s more important.
BAD Extend your software development team.
BETTER Add experienced remote devs to your team. Higher quality for lesser cost.
BAD Keep your money safe.
BETTER — We create secure virtual cards for you so you can pay without revealing your real card details.
BAD — The smarter way to send business payments internationally.
BETTER — Send money to anywhere in minutes at the real-time exchange rate. No hidden fees.

Hero — Header
“When I write an advertisement, I don't want you to tell me that you find it
'creative.' I want you to find it so interesting that you buy the product.”
DAVID OGILVY

When you depict an amazing life, here’s what visitors typically think:
“Ok great. But how?”
Now that people understand what your product does,
use your subheader to describe how.
Hero — Subheader

Riley texts your real estate leads for you — to automatically qualify them.
A network of vetted concierges monitor your lead chats to respond whenever you're busy.
Have auto-translated chats with foreigners — to have fun learning any language.
In real time, we transcribe and translate your words into 100 languages.
Hero — Subheader
Examples

Hero — Subheader
CRYPTO PAYMENT SOLUTION
Our app accepts cryptocurrency payments, converts it into your currency at a locked-in exchange rate,
then transfers it to your account.
INTERACTIVE VIDEO SOLUTION
Mindstamp helps you engage and educate your viewers by adding notes, pop-up questions, and CTAs
to any video in seconds.
Examples

Social proof
As soon as visitors look/scroll down from the amazing value props in the hero, they should
be seeing other people/companies that are not you, vouching for those value props.
LOGO —————————-— LOGO —————————-— LOGO —————————-— LOGO
TESTIMONIAL ——————TESTIMONIAL ————-— TESTIMONIONIAL ————-— TESTIMONIAL

Social proof
Aim to make the visitor feel as if everyone (people/
companies they identify with) is already using your product.
Except for them. Create irresistible FOMO.
What if nobody is using your product because, well, you’re an early-stage startup?
Give people your product (or mockup) for free, then ask them for a testimonial.
Let’s say the idea of “fake it till you make it” is relevant here.

Call-to-action
—————————-——————————-— HEADER —————————-——————————-—
—————————-——————————-— (FORM) —————————-——————————-—
—————————-——————————-— BUTTON —————————-——————————-—

The visitor is excited now.
The goal of your header is to get them to act on that excitement.
Call-to-action — Header
Aim to make the CTA header specific about how close they are to your amazing value prop.
Make it tangible how the awesomeness is only 1 step away.
“You just have to do this and you can get all of this!”
“Get a new logo in 24 hours.”
“Just set your price and go.”
“Open an account right from your laptop.”

Have the button specifically describe what happens after,
what specific action the visitor is taking.
Call-to-action — Button + Form
To collect email addresses, you’ll need a form.
Consider including the form directly in the CTA section.
(Cut out as many steps you don’t necessarily need.)
• Name
• Email address
• “How did you hear about us?” (+ dropdown)

Features & Objections
FEATURE #1 —————————-——————————————————————-———————————
—————————-——————————————————————-——————————— FEATURE #2
FEATURE #3 —————————-——————————————————————-———————————
This is where you put all of your chips on the table for visitors that don’t
convert from the hero + social proof (spoiler: many won’t).
In other words: time for the full sales pitch.

Features & Objections
This is where you go all out with value props. While you’re at
it, seize the opportunity to proactively address possible
objections visitors may have concerning them.
• Header that states the value proposition (~ framework Hero section)
• Paragraph to elaborate on the value prop and address potential objections
• Image/illustration to visualize/reinforce the value prop
Elements

Features & Objections — Examples

Features & Objections — Examples

Features & Objections — Examples

Features & Objections
The more expensive or unintuitive your product is, the more
objections you should address.
If you’re having a hard time deciding which objections to
highlight, study your competitors’ messaging to learn how
to differentiate yourself from what people expect you to say.

Features & Objections — Header
3-7 WORDS DESCRIBING FEATURE OR VALUE
Avoid vague language → “The bank of the future”
Be descriptive so visitors can decide whether it’s relevant to them as they scan the page.
If they don’t care, they can skip → You reduce labor and increase focus.

Features & Objections — Paragraph
Blunt brevity
Concisely describe the feature.
~ Value proposition generation
+ Address possible objections.
Point out how the status-quo is no good and
describe how you make it better.
Keep it short and simple.
Specific. No sales fluff.
Bullet points.

Features & Objections — Examples (Copy)
Header
A simpler workflow for docs & tasks
Paragraph
Tired of linking Google Docs and Trello? Notion seamlessly
blends the two. Full-powered project trackers with docs inside.
Save your team from context switching.
Header
Invest for free
Paragraph
We’ve cut the fat that makes other brokerages costly, like manual
account management and hundreds of storefront locations, so we
can offer zero commission trading.
Header
Truly Private Messaging
Paragraph
Status uses the peer-to-peer protocol Whisper and end-to-end
encryption to protect your communication from third party
interference. Only you can view your messages.
Header
With LOOP, parents are more connected with each other.
Bullet points
• Create a chat room to organize school carpools.
• Find a trusted babysitter on the fly.
• Arrange playdates and (kid-free) social gatherings.

Features & Objections — Visual
Product screenshot (or mockup).
Image that demonstrates the feature in action.
Illustration that captures the purpose.
Make sure it adds value to your story.
Avoid meaningless eye candy.
Thumbs up for animated GIFs.

Almost there
1. NAVBAR — Top of the page: company logo and site links.
2. HERO — Big section with header text, subheader text and most enticing imagery.
3. SOCIAL PROOF — Logos and/or testimonials of best-known clients.
4. CALL-TO-ACTION — Signup button or similar with a concise incentive to go for it.
5. FEATURES & OBJECTIONS — Key value propositions. Why people would choose you.
6. CALL-TO-ACTION REPEAT — Repetition cooks an idea into people’s heads.
7. FOOTER — Miscellaneous links.

Storytelling
1. INTRODUCTION — Header and subheader. Make your claim
2. SUPPORTING PARAGRAPH — Features/objections. Does each paragraph support your introductory claim?
3. CONCLUSION — Final CTA.
Remember when you were writing essays?

Landing page design
A visually appealing design does help conversion.
By showing you’re not an amateur.
Don’t overdo it, but make sure:
1. It's enjoyable to visually skim.
2. It looks thoughtfully put together.
3. Each section is clearly structured and partitioned.
4.It represents the personality of your brand.

Landing page tools
landerapp.com
instapage.com
leadpages.net
unbounce.com
wix.com
webflow.com
These tools typically include:
• Drag-drop building blocks for various elements (including forms)
• A built-in mechanism for collecting your leads
• Easy integration services like Google Analytics, Facebook Pixel, Hotjar

Assessing conversion
[# of Visits Containing the Conversion Event] / [Total Visits]
To keep track of how effective your page is at converting visitors
Visitors from geographies you service
Don't include people from overseas if they can't purchase.
Unique visitors instead of total visits
If you're counting every visit, you're including return visits too. This doesn't
make sense if someone can only convert once. (e.g. signup for an account).

Getting feedback on your page
People outside of your target audience
Learn how enticing and comprehensible your copy is people who aren't
familiar with your market or product. A mistake many make is to over-
assume the baseline knowledge of an audience.
People from your target audience
Learn if your messaging is sufficiently unique and descriptive to
convince people from your target audience to choose you over
competitive solutions.

Getting feedback on your page
Are you willing to hand over your credit card and sign up right now? If not, what would it take?
Rate how the page sustained your interest on a scale of 1-10.
What do you suggest be rewritten or redesigned to help it better sustain your interest?
What unanswered questions are you left with?
Something awesome you wanted even more details on?
If you had to delete half the page's imagery and copy, which would it be?
What triggered your “bulls*t” reflex?

Inspiration
https://persistiq.com
https://streak.com
https://copper.com
https://frontapp.com/
https://gyrosco.pe/
https://figma.com/
https://tryshift.com/
https://cindergrill.com/
https://monzo.com/
https://managedbyq.com/
https://grammarly.com/
https://duolingo.com/
https://cover.com/
https://frame.io/
https://withjoy.com/
https://slite.com/
https://flat.io/
https://shape.space/
https://paste.bywetransfer.com/
https://wake.com/
https://usepastel.com
https://goodweb.design https://pageflows.com/pages