Growth Handbook: How to write landing pages

image

Landing page

This page teaches you to write and design websites that convert visitors into customers.

I walk you through the template I use for today's fastest-growing startups.

I cover how to structure your page, write copy, and maximize purchase conversion. It's everything you'd want to know.

Why this is important

75%+ of your site traffic will leave after only seeing your homepage.

A great homepage isn’t a nicety. It’s your first impression.

Not blowing this impression means following a de-risked template. Don't do something unique with your landing page unless you have a good reason to.

The more you detour from the following template, the more confused the average visitor becomes: you'll make it more laborious for them to identify what your company does and why they should care.

Don't stand in your visitors' way.

Landing page variants

Let's start by identifying the three types of landing pages we're focused on:

  • Homepage — Your catch-all page for visitors of every persona.
  • Persona landing page — Where you tailor messaging to a specific audience.
  • Product page — Where you narrowly explore the details of one product.

These three pages can be structured identically. They differ only in what is being pitched and which words and images are used to pitch.

Homepage approach

Think of a landing page's creation from the perspective of a visitor's likelihood to convert. We can think about conversion as an equation:

Conversion Rate = Desire - Labor - Confusion

In other words, to increase the rate of conversion, we increase the visitor's desire while decreasing their labor and confusion.

Here's what that looks like:

  • Increase desire — Entice visitors with how much value you provide. Create intrigue. Pitch your product in a way that successfully resonates.
  • Decrease labor — Reduce the work your visitors have to perform so they don't get tired or annoyed and leave prematurely. How? Be concise and ensure every word and design element is of value.
  • Decrease confusion — Don't confuse visitors with obscure or verbose messaging. Ensure every sentence can be easily understood. And make it self-evident which action they should take next (e.g. signup or buy). Ensure the design of your action elements (e.g. buttons) are unmissable.

The implication is that the first step in creating a landing page is not actually to design the page. Instead, it's to first hone your message. You then back out from that message to what it is you should say and, only at the end, what it should look like.

In other words, growth is not a design-first process. It's almost always messaging-first.

Landing page ideation process

A messaging-first approach to landing pages embraces the conversion equation:

  1. First, identify the selling points that are most desirable about your product.
  2. Next, identify the text and media that convey those points clearly and concisely.
  3. Finally, design your page in a way that enhances the clarity and impact of #2.

So, let's begin by identifying and conveying your selling points. In marketing jargon, selling points are called "value propositions."

After this value prop creation exercise, I'll introduce my landing page template.

Value propositions

One more marketing term before we dive into value props: "copy" is the marketing jargon for text. I'll be using it going forward.

Creating value props

A value proposition is a quality of your product that is matched with a benefit.

For example, your product may have the qualities of fast and secure. Below, I match fast with three resulting benefits to create distinct value propositions:

  • Quality: Fast, Benefit: Quicker output, Value prop: Get work done faster.
  • Quality: Fast, Benefit: Greater output, Value prop: Get more work done.
  • Quality: Fast, Benefit: Greater efficiency, Value prop: Save yourself time.

Each variation shares the same core quality — speed — but each articulates a unique outcome of speed. In other words, a unique benefit.

Take a moment to chew on that before moving on.

One more example to make sure we got it. Let's take the quality of secure this time. And let's say the product we're marketing is a messaging app:

  • Quality: Secure, Benefit: Privacy, Value prop: Only your friends can see your messages.
  • Quality: Secure, Benefit: Protection, Value prop: If your phone is stolen, your data cannot be stolen.

It's a straightforward process. But, for some reason, most people don't do it. Almost every client my agency has worked with simply wings their copy.

They don't dig to find the very best value props that motivate visitors to convert 3x better than the next.

To harden yourself against this laziness, below is my process for systematically generating compelling value props. Put another way, it's a process for coming up with the qualities and benefits you should be focusing on.

Use this process whenever you're pitching anything.

Value prop generation

Let's use a live chat app (example) as our sample product.

As you follow these four steps to generating your props, refer to the green chart further down for specific examples:

  1. In column one, list all the non-desirable alternatives people resort to when they don't have your product at all. Next, describe what makes each alternative bad. (Now scroll down to see the examples below before continuing to the next point.)
  2. Your list of what makes each alternative bad is now your starting point for generating value propositions: In column two, write out how and why your product is better than the bad alternative. (Scroll down for examples.)
  3. In the third column, which is a separate brainstorming exercise from the first two columns, simply list your most valuable customer personas. (Most valuable means they pay you the most.) This third column is to remind you what audience you're pitching to. For each persona, list the two product benefits they care most about.
  4. Now, reduce the second column's list of value props down to just those that satisfy what the top customer personas care about. In other words, use the third column to filter the second column to your most valuable value props.

What should be left in column two are the value props you'll be using to pitch.

To recap, you identified them by finding the market pain points that resonate most strongly with the personas most valuable to you.

Many readers find they need to re-read this section a couple times before they get it. Take your time — it's important!

Bad alternatives

Visitors leave the site • Lost sales opportunities

Visitors read FAQ's • They're long, boring

Visitors email support • Most don't bother

Help more visitors get more questions answered by immediately handling objections via live chat.

Address objections proactively so you can better satisfy visitors and close more deals.

The cleverness of this process is in ideating value props by comparing your product to the bad alternatives customers would have been stuck with if they didn't have you. Doing this ensures you remain focused on the benefits that resonate with customers— instead of on those that customers don't actually experience in the real world.

Perhaps more importantly, following this process ensures you're exhaustive in your value prop brainstorming. You want to dig up the diamonds in the rough.

You'll learn to master copywriting on the upcoming Making Ads page.

Where to use value props

Think of value props as the ammunition that you collect to later disperse across a page. Specifically, value props form your header, subheader, and feature paragraphs.

In short, value props are the selling points that increase a visitor's conversion desire.

You can of course also use your value props everywhere else you pitch your product:

  • Ads
  • Emails
  • Sales calls
  • And so on.

Try to be consistent with your use across those channels. Value prop consistency breeds familiarity.

Articulating value propositions

With value props in hand, you have to fully write them out before you can use them.

The trick to writing out value props is to say a lot with a little. This is the principle of information density, which aims to avoid giving the visitor surplus labor in the form of too many words to read.

Here's how to write value props with high information density:

  • Iterate copy until it can't be betterDon’t write a paragraph with the first phrasing that comes to mind then never touch it again. Instead, write a dozen variations until you find the most enticing and concise variation. To be sure, ask others to rank your best ones.
  • Remove unnecessary words — Every word existing on your page must be necessary. If you can remove a word without it reducing how enticing, clear, or useful a sentence is, remove it. (Excess verbiage increases the visitor's labor, which triggers their impulse to skim.) A tip: avoid clichés like revolutionary, incredibly powerful, best-ever, and so on. Other products claim these qualities, so visitors are blind to them. It's better to specifically describe how you're different.
  • Don’t pitch everything — The more visitors are given to read, the less they read in total. So don't trigger their reflex to skim. Instead, take an 80/20 approach: Always identify the two or three sub-points that convey the most value.

Keep your refined value props on hand. You're going to be using them shortly throughout your page.

Counterintuitively, concise doesn't mean short

Every client I work with at some point asks, “Why is the landing page you made for us so long?” My answer: So long as every word provides unique and compelling value, it's okay to err on the longer side. Length provides more surface area so that you can appeal to more customer types.

I don't use length to be redundant. I use length to be holistic.

Succinct doesn’t mean short. It means a high ratio of ideas to words.– Paul Graham

Landing page template

Finally, we've arrived at the landing page template. Sorry I took so long to get here.

Start with the following template and only detour away from it if you've already nailed its implementation and want to A/B test variations:

  1. Navbar: The top of the page — where your logo and navigation links are.
  2. Hero: The main section at the top of the page, which includes your header text, subheader text, and captivating imagery.
  3. Social proof: Logos of press coverage or your well-known customers.
  4. Call-to-action (CTA): Your signup button and a concise incentive to click it.
  5. Features and objections: Your key value propositions fully written out.
  6. Repeat your call-to-action
  7. Footer: Miscellaneous links.

Here it is visualized:

image

I'll walk through and thoroughly teach you each section. As I do that, keep PersistIQ.com open in a new tab so you can follow along. Their site, which my agency wrote and designed, roughly follows this landing page template.

Element — Navbar

This is the first element at the top of your page:

All your navbar needs is:

  • A logo
  • Optional: Links to key sections on your homepage
  • Links to the other pages on your site
  • A call-to-action button (e.g. Signup)

The fewer links you have, the more your primary CTA stands out. So be selective.

In fact, if you're feeling bold, you can drop all links except for the CTA. This prevents visitors from being pulled away to other pages that may not help them convert.

Element — Hero

"Hero" is designer jargon for the big section at the top of your page — what visitors first see before they scroll down.

Your hero consists of your header text, subheader text, and often an image.

You must put a lot of thought into each of these. Nailing header copy has the highest impact on whether people continue scrolling and reading. And it's the first place we put our value props to work.

But, before we do that, let's explore the hero's image.

Hero — Image

Let's start with hero's image.

The purpose of your image is to visualize the value prop described in the header and subheader.

The imagery should always reinforce the copy. It doesn't distract from it. Remember, messaging-first — not design-first.

In practice, this means your image should typically show off the product.

Look at how the example above uses a literal screenshot of the product. That's typically what you want.

If you're instead selling a physical good, show a picture of it. If you're selling services, perhaps an illustration could be effective.

As another example, here's how Slack uses illustrations to show employees using their app:

image

In contrast, what you don't want is random stock photography of, say, a smiling woman at her desk. There's zero value in that. People reflexively ignore generic imagery. So it just takes up precious space in your hero. A wasted opportunity.

Note that this isn't just my subjective philosophy on page design. Extensive experimentation shows conversion increases when visitors have an immediate visual understanding of what you're selling them. Only makes sense, right?

Then do what makes sense — instead of just copying others' bad design habits.

That's actually the theme of this handbook: be literal, be specific, and be clear. There's so much fluff on the web that you stand out simply by getting to the point.

In advertising, the greatest thing to be achieved is believability, and nothing is more believable than the product itself.– Leo Burnett
image

Your hero section has two pieces of text: its header (the primary text) and its subheader.

Let's start with the header.

The header must be fully descriptive of what you're selling. Because, if the visitor doesn't understand exactly what you do immediately upon landing, they'll either bounce out of laziness or skim-read the rest of the page until they get the gist. Once they get that gist, they'll likely bounce anyway because they're still too lazy to re-read the page from the beginning.

So, start with a good first impression. And that begins with the top of your page. Which means your header text must be fantastic.

Here's the litmus test for whether your header is sufficiently descriptive: If the visitor reads only this text on your page, will they know exactly what you sell?

The subheader, which I cover soon, must satisfy a related litmus test: If the visitor reads only the subheader, will they know why they should care about what you sell? Usually the best way to convey the "why" is to explain how you uniquely do things.

Hero — Header — Be specific

Bad headers — found all over the web — are those that read like slogans instead of descriptions. For example, "Improve your workflow!" or "Supercharge your collaboration!" are useless slogans. If that's all I read on your page, I'd have no idea what the product actually is.

As in, I wouldn't know how the product accomplishes those vague aspirations.

And people critically want to know the how. And they want to know it immediately.

What does a good, descriptive header look like? Like this:

  • For a website design tool — "Visually design and develop sites from scratch. No coding."
  • For a grocery delivery service — "Groceries delivered in 1 hour. Say goodbye to traffic, parking, and long lines."
  • For a home rental service — "Rent people's homes. So you can experience a city like a true local."

Ahh. Now those help me understand what you're selling! I don't have to dig deeper.

And so I can immediately self-identify as someone who does in fact want this thing you're advertising, which means I'll have patience to read through the rest of the site to gleam the juicy details.

Hero — Header — Writing it out

In summary, a header is written to hook visitors into your product through a description that explains how you solve a problem people care about.

But you can't just throw in a value prop and call it a day. There's a specific way to write a great header.

Let's introduce the two-step copywriting process for writing headers:

I. Identify a value prop that conveys the product's core purpose

Find your product's representative value prop that's also the most compelling thing to talk about when pitched by itself.

For example, here are some value props a video chat app may have:

  • ‍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

Most of these are standard to many video chat apps. And your header is too valuable of a place to highlight something generic. Instead, we’re looking for the value prop that’s the most compelling, yet still fairly represents our product’s core value.

Personally, I think the auto-translate feature is amazing. Not only is that value prop differentiating the product within a saturated chat app market, but it's also representing the app's core purpose: the ability to chat with anyone.

Turning this value prop into a header may look like: "Have auto-translated video chats with absolutely anyone in the world."

In contrast, a value prop that doesn't represent the core purpose of the product would be "get emailed transcripts." Is this a transcriptions service? No, it's a chat app. So don't put this value prop in your header.

One more example of a bad value prop to highlight: "Chat with anyone quickly." A header for this may read as follows: "Find someone to video chat within less than 30 seconds."

This is not a good header because the product quality of speed isn't likely why people actually like one chat app over another. Meaning, it's not compelling.

So let's revisit the good header examples from earlier. Notice how we highlight a representative value prop in the first sentence of each:

  • For a website design tool — "Visually design and develop sites from scratch. No coding."
  • For a grocery delivery service — "Groceries delivered in 1 hour. Say goodbye to traffic, parking, and long lines."
  • For a home rental service — "Rent people's homes. So you can experience a city like a true local."

To summarize: Identify one product value prop that you can call out in your header to represent 1) what makes you unique and 2) what you fundamentally offer.

This serves the dual purpose of generating intrigue while also being clear. In other words, it increases desire and decreases labor.

Let that soak in before you continue reading. Most people overlook their headers.

II. State the high-level purpose

Now that we've intrigued visitors with a value prop, we need to finish the header text by also stating why the value prop even matters.

Here are two examples of extending a header with the why:

"Riley texts your real estate leads for you — to automatically qualify them."

"Have auto-translated chats with foreigners — to have fun learning any language."

Or, once again, our examples from earlier. Notice the purpose that the second sentence always serves: pointing out what makes the first sentence valuable.

  • For a website design tool — "Visually design and develop sites from scratch. No coding."
  • For a grocery delivery service — "Groceries delivered in 1 hour. Say goodbye to traffic, parking, and long lines."
  • For a home rental service — "Rent real people's homes. So you can experience a city like a true local."

Finally, for contrast, here are some bad header examples:

  • Bad — "Forest App: Stay focused, be present." This is too much of a slogan.Better — "Forest is an app that prevents phone addiction. So you can focus on what’s more important in life."
  • Bad — "Payments made simple." There are tons of payment processing services. And this text doesn’t explain why yours is better or even who it's uniquely for — companies, freelancers, buyers, ecommerce sites? Better — "Start accepting payments in one click. No coding knowledge required."
  • Bad — "Extend your software development team."Better — "Add senior remote devs to your team. Get higher quality for less cost."
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

Hero — Subheader

Now that your header explains what you do, use your subheader to describe how. People really like to know the how. (Millions read Wikipedia for a reason.)

Specifically, how is critical to landing page conversion because it lifts the veil on what you do — to prove you have thoughtful solutions to the visitor's real problems.

Plus, when someone learns the how, they become further invested in your solution.

For example:

  • Real estate app subheader — "Our network of remote concierges monitor your email inbox and respond to leads when you're too busy to."
  • Video chat app subheader — "In real-time, our on-call team transcribes and translates your words into over 20 languages."

There are two exceptions to this "explain the how" rule:

  1. Self-evident products — If your product's how is truly self-evident (e.g. your header is "We are a photography agency" or "We sell mattresses"), use your subheader to proactively address visitors' major concerns or to differentiate yourself from competitors. Do this in a single, concise sentence.
  2. Obscure products — If people don't yet know much about your product category, use your subheader to explain why what you sell is valuable to begin with.

Tip — Keep subheaders within 10-13 words. Otherwise they turn into paragraphs.

Element — Social proof

Now that you've succinctly described what you do and why, it's time to convey the credibility of everything you do through social proof.

Your social proof section is a collage of logos showing off your press coverage and/or your most well-known customers. Or if you're an ecommerce product, you can state how many customers you have (if it’s an impressive amount).

Your goal is to make it seem like everyone in the world already knows about you, and to make the visitor feel left out of all the excitement. Foster dat FOMO, am i rite.

Effectively, that's the goal of social proof: creating intrigue by getting people wanting to be part of your elite club.

Tip — If you don’t yet have noteworthy customers, provide your product for free to people at well-known companies. Then place their company logos on your site if they wind up using you.

Your call-to-action (CTA) section is what prompts a visitor to continue to the next event in your funnel — such as signing up or adding to cart.

Your CTA consist of at least two components: its header and its button.

CTA — Header

The CTA header summarizes what the visitor gets from signing up.

You want to specifically state what they'll get by clicking your button. For example, "Get a new logo in 24 hours."

In contrast, don’t use something high-level like "Get started with your free trial." They've seen that copy so many times that they're programmed to gloss over it. It also doesn't actually remind them why they should sign up.

As you repeat your CTA section throughout the page, use a slightly different header each time. This way, if one header doesn't appeal to someone, the next might.

I talk more about how to write enticing copy on the upcoming Copy page.

CTA — Button text

In keeping with our approach of "remind people why they came," make the CTA section's button either a single action word, e.g. "Signup" or "Start," or use a verb phrase that describes what's about to happen next.

Example verb phrases:

See dashboard →
Start trial →
Browse listings →

Don’t write sleazy "clickbait" CTA text like “Give me my free PDF!” That is, unless you're trying to attract idiots as customers. (Some businesses — usually seminar series — genuinely may be 😂)

Visual contrast

While your CTA's copy is responsible for getting visitors to act, your CTA's design that's responsible for getting them to notice they can act in the first place.

When designing your CTA, follow two rules:

  • Stand out — Don’t let your CTA blend into the rest of your page. Use a background color that contrasts the page's dominant colors. And make the CTA button a bit bigger than you think it should be.
  • Weight it — If you have multiple CTA’s on one page that aren’t all prompting the same action (e.g. a signup), don't visually weight them the same. Instead, give visitors an idea of which CTA entails a bigger commitment by making it bigger or more contrasted.
image

If your hero section doesn't do enough on its own to get people to convert (it usually won't), it's the job of your Features and Objections to deliver your product's complete sales pitch.

That's the part of the template we're at now.

To put this objective back into visual context, see where Features is:

The Features section spans the bulk of your page. It's your opportunity to proactively address a visitor's concerns and skepticism about your value props.

This section contains multiple features. Usually 3 to 6. Each is simply a value prop paired with copy addressing objections that arise upon hearing that value prop.

Specifically, each feature subsection consists of three elements:

  • Header that states value prop
  • Paragraph that explains the value prop and handles objections
  • Image to reinforce the value prop

For example:

Tip — If you’re having a hard time deciding which value props and objections to highlight, study your competitors' sites to learn how to differentiate yourself from what people already know about your space.

Feature — Construct an ongoing narrative

The best feature sections carry a running narrative: Each feature ties back to the dominant value prop pitched in the hero section.

For example, if your hero value prop is “We help you put down your phone so you can focus on the rest of your life,” a description of your Push Notification Blocking feature could include a callback to the header such as this: “… so that you put an end to the habit of constantly looking at your phone for updates.”

Remember how back in school you wrote essays with this 5-paragraph format?

  • Introduction
  • Supporting paragraph #1
  • Supporting paragraph #2
  • Supporting paragraph #3
  • Closing

In the introduction, you made your claim. Then you highlighted three pieces of evidence to support that claim. Finally, your Closing summarized the argument.

Your landing page as a whole follows this very same structure:

  • Introduction — Header and subheader. Make your claim here.
  • Supporting paragraphs — Features/objections. Does each paragraph support your introductory claim?
  • Conclusion — Final CTA section.

You learn to write content marketing with narratives on this page.

Anyway, back to the Feature section: Let's dive into its three components.

Feature — Value prop header

Write a 3 to 5 word title describing the value prop. Don't use vague language like "Empower your sales" or "Revolutionize your workflow." No, just bluntly describe the value prop so visitors can quickly decide whether the value prop is relevant to them. And whether they should read the feature paragraph.

Here are feature headers for a product that sells a portable grill:

"Cooks and Sears"
"No Prep or Cleanup"
"Cooks More than Just Meat"

Feature — Paragraph

Either write a paragraph of three concise sentences or list a handful of bullet points.

Your goal is to concisely describe the feature and optionally address common objections if they're important ones that often prevent people from converting.

By the way, here's a trick for having these paragraphs carry the overall narrative: Consider how the end of every feature paragraph is a little break for the visitor to self-reflect: "Do I keep reading or leave the site?"

You can circumvent that decision-making by concluding each feature with a hook that makes them curious to keep reading. For example, you can end a paragraph with:

  • ‍But that doesn't actually work...
  • ‍But there's a big problem...
  • ‍It gets worse, though...

Then pick up that thread in the next feature section.

When should you go really in-depth?

If this is a complex or unintuitive feature for which going into extreme detail is going to help materially improve conversion, either link to a separate page where visitors can learn much more or have a button they can click to reveal additional details.

The latter is preferable because it keeps users in the flow of your current page.

Feature — Image

Features are paired with an image so that your page isn't a giant wall of text.

In your feature image, include a product screenshot or some relevant photography that demonstrates the feature in action. Remember, don't just include meaningless eye candy. Visualize the feature in a way that further reinforces the value prop.

Better yet, use an auto-playing GIF or SVG animation. It’s better to show than to tell.

Tip — If you’re showing a screenshot of your SaaS dashboard, and it's too small to easily read all its text, recreate the screenshot in Sketch and exclude the non-essential UI elements and text.

Should I include a video?+

Getting feedback on your page

Once you have your landing page draft, pass it by two types of reviewers:

  • People not in your market — Learn how appealing and comprehensible your copy is to those who aren't familiar with your market or product. Do you give them enough context to want to know more? This will help cover the common problem where your site over-assumes base-level knowledge on behalf of your audience. This is important because there may be a lot of people on the edge of your market who'd become customers if they merely better understood why they should be.
  • People in your market — Learn if your messaging is sufficiently unique and descriptive to convince people high in intent to choose you over the competition.

For both of these audiences, ask them to assess these six criteria for you:

  • Conversion — Are you willing to hand over your credit card and sign up right now? If not, what would you need to see to get to that point?
  • Interest — Rate how well 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?
  • Clarity — What’s unclear? What unanswered questions are you left with?
  • Expansion — Did you find something awesome you wanted even more details on?
  • Brevity — If you had to delete half the page's imagery and copy, which would it be?
  • Disbelief — What triggered your “Untrue! That’s scammy sales speak!” reflex?

Copy paste the above criteria into an email and ask as many people as you can.

Getting professional feedback

In the Demand Curve growth program, we'll audit your landing pages and leave in-depth commentary on all your copy.

If you'd like us to run growth for you, we also run the Bell Curve growth agency.

Landing page design+

If dogs don't like your dog food, the packaging doesn’t matter.– Stephen Denny

Landing page types+

Assessing landing page conversion+

Dive much deeper into growth

Via Demand Curve, I'll train you or your company in ten times more growth marketing topics than were featured in this handbook.

We also run a growth agency for larger companies looking to scale: Bell Curve.