Landing Pages
Header image featuring woman eating, sleeping, and working out

This is page two of a handbook on Growth Hacking. Begin here.

Follow the proven template

This page teaches you to write and design home pages according to the growth template that's been proven across all my clients to maximize conversion rates.

I cover how to structure your page, write compelling copy, deal with design, and assess landing page conversion. It's everything you need to know.

A great home page isn’t a nicety. It’s your first impression. The better your first impression, the better all your user acquisition efforts perform.

If you throw together a serviceable landing page then call it a day, you’re missing out on drastically improving your conversion rate.

And I've tested all this on my agency's clients. I've been able to show that landing page optimization is responsible for the biggest ROI impact in your growth funnel. It matters more than the quality your ads — and even more than your product's pricing.

Landing page variants

There are three types of landing pages: 

These three types are structured identically. Frankly, there aren't many different ways to design a compelling page. They differ in just one way: their focus on value propositions.

Let’s learn how to thoughtfully write and design them.

Landing page optimization

I want you to think of landing page optimization from the perspective of desire:

Conversion = Desire (Increase this) - Labor (Decrease this) - Confusion (Decrease this)

It's less work to reduce a visitor's labor and confusion than to increase desire:

Hence, the first step in creating a landing page is not to design it. The first step is to hone your message. You need to answer the question: What value can I deliver? 

Figure out what copy (text) and creative (images, graphs, animations, videos) convey that value. Then the design of your page simply serves to clearly present this value.

Let's begin with copy.

Landing page copy

("Copy" is just a fancy word for text.)

Before we create our landing page, let's familiarize ourselves with two critically overlooked aspects of copy: value prop identification and information density.

These decrease labor and increase desire. As per our formula.

Value props

A value proposition ("value prop") is a product quality matched to a benefit.

For example, your product may be fastsecure, and cheap. Those are its qualities. 

If you match, say, fast to the benefit of "getting work done" then your resulting value prop is "get work done faster."

You could alternatively generate the value prop of "reduce repetitive work." That's a variation of the same fast quality, but the value proposition focuses on a new benefit.

One more example. If we take the security quality, we can generate value props like "Message your friends securely" or "If your phone is stolen, your data stays secure."

It seems like generating value props is easy.

It's not, and it's where most landing pages fail to be compelling. Don't wing it. Here's my process for systematically generating compelling value propositions:

Value prop generation

Follow these steps:

  1. List all the bad (non-desirable) alternative solutions people resort to when they don't have you. And describe what makes each one bad.
  2. With each bad alternative, write one value prop that highlights that badness and how your product offers a better solution to make life better.
  3. In a third column, list your top customer personas and remind yourself of the two things they most care about. Don't list personas that are low on your priority list.
  4. Finally, reduce your list of value props in column two to those that are most appealing to your top personas.

The leftover value props will be the focus of your landing page. And your ads.

Value prop example

Let's consider a live chat widget for websites. The purpose of the tool is to help support and sales teams qualify and intercept leads before they leave the site.

Our brainstorming columns may look like:

Bad alternatives

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

Value props

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.

Top personas

Head of marketing
•  Conversion rates
•  Traffic volume

Chief revenue officer
•  Reduce churn
•  Increase ARPU/LTV

Head of sales
•  Increase qualified leads
•  Qualify leads accurately

If this process is lost on you, re-read the above before continuing. It's key.

These value props will decide the copy featured on your page. You write the copy through the filter of information density.

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

Information density

Say a lot with a little.

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

These value props will decide the copy featured on your page. But, first, we must talk about how to structure your page.

Landing page template: elements

You have a loose idea of how to write. It's time to learn what to write.

Start with the following page structure and only test variations of it once you've nailed this implementation:

  1. Navbar: The very top of the page — where your company logo and site links reside.
  2. Hero: The big section at the top of the page that includes your header text, subheader text, and most enticing imagery.
  3. Social proof: Logos of your press coverage or best-known clients.
  4. Call-to-action (CTA): Your signup button and a concise incentive to click it. This could alternatively be designed into your Hero section.
  5. Features and objections: Your key value propositions. Why people would use you.
  6. Repeat your call-to-action
  7. Team info (Optional): Increase your perceived credibility by highlighting your team.
  8. Footer: Miscellaneous company links.

Let's start simple: All your navbar needs is your logo, links to key sections of your page plus links to the other pages on your site, and a call-to-action button (e.g. signup).

The fewer links you have, the more your CTA stands out. This is a good thing. You want few distractions between your users and the CTA.

In fact, if you're feeling bold, you can drop all links except for the CTA. This prevents visitors from being pulled away from your conversion-optimized landing page.

Element — Hero

"Hero" is designer jargon for the big section at the top of your page. It consists of your header text, subheader text, and an optional image.

Hero — Image

Let's start with the image component of your hero section.

website hero section

The purpose of your hero image is to complement your hero's copy, which is tasked with explaining what the product does (and teasing the visitor to keep scrolling).

Therefore, your image must show off the product. Look at how the example above uses a literal screenshot of the product. That's what you want.

Illustrations work as well. Particularly if a screenshot doesn’t do your product justice. Or if you want to demonstrate interactivity and action. See how Slack uses illustrations to show workers using their app:

In contrast, do not use vague, stock imagery of, say, people using their laptops at coffee shops. This conveys nothing other than your intended demographic, and wastes precious space.

Perhaps stock imagery would be valuable for brand marketing, but it doesn't incentivize landing page conversions as much as a literal depiction of your product will.

And that's the recurring theme of this handbook: be specific when pitching. There's so much fluff on the web that you must stand out by transparently 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

Hero — Header 

Nailing header copy is the most important component of landing page optimization.

Your hero has two pieces of text: your header (primary text) and subheader (secondary).

Let's start with your header. It must be descriptive while being concise.

Here’s the litmus test for having a sufficiently descriptive header: If the visitor reads nothing else on your page, they’d still know who you are and why they should use you.

Headers are often written vaguely (e.g. "Improve your workflow!"), which requires additional scrolling before the visitor understands how you specifically deliver on that.

But most visitors won't have the patience to scroll. So they'll just leave.

The header is written to hook people into your product through an intriguing feature. Then it tells them why that feature matters to them. 

Let's distill that into a two-step copywriting process.

1. Identify a compelling feature that captures the product's purpose

Find your product's feature that's most compelling when it stands alone. And ensure that feature also represents the product's compelling purpose. 

Compelling means that most people who read it think, "I want that!" Or, if you're in a market with many similar competitors, compelling means it's your key differentiator that makes people think, "Finally, a reason to signup for one of these products!"

Here's a header example for a video chat app that needs to differentiate itself from competitors. First, I'd start by identifying all its novel features. From that list, I'd choose whichever is most representative of the product's purpose. Its purpose is what it's designed to accomplish for its customers on the highest level. 

Here are some novel features of our video chat app:

As you can see, most of the features listed are standard with any video chat app. A header is too valuable a space to highlight those. We’re looking for the feature that’s most compelling, yet still speaks to our product’s purpose. 

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

Here’s an example header to represent that feature: "Have auto-translated video chats with foreigners.”

In contrast, here's a novel feature I would have not used because it doesn't represent purpose: "Find someone to video chat with in less than 30 seconds."

If speed is not representative of why people would most want to use your app over the competition, don't highlight it as the first thing people read on your page.

One more example. This time for a business that doesn't need to differentiate itself from competitors. 

A business targeting real estate agents might write its header to be, "We text your real estate leads for you."

If this business offers many features, but auto-texting real estate leads is A) likely to be the most compelling to their target audience ("I want that!") plus B) the most representative of the product's most compelling purpose (the business helps agents automate the most laborious parts of lead interaction), then it's the correct feature to be highlighting.

To recap: Specifically describe one feature that's compelling and representative of the high-level purpose of your product.

2. State the high-level purpose

Now that we've alluded to the purpose of our product, we need to complete the thought by explicitly stating the purpose for visitors who are unable to connect the dots themselves. 

This step is only required if your purpose is not completely self-evident by the feature alone.

Here are two examples of extending a header with a description of purpose:

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

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

Now, here are good examples of header text:

Keep your header to within 6-12 words so it reads quickly.

And here are bad examples: 

This isn't the only paradigm for writing header copy, but I guarantee it's the safest way to ensure you write header copy that isn't bad.

Hero — Subheader

Now that people understand what you do, use your subheader to describe how. 

How is critical to landing page conversion because it lifts the veil on what you do to show people you have real, sensible solutions to their tough problems. They want to know you've thought this through so that they're not wasting their time signing up.

This is counter-intuitive to marketers who think they're supposed to use every square inch of header copy to pitch a product's vague lifestyle benefits.

No. You're not advertising Coke here. Landing page optimization has nothing to do with brand marketing. People are tired of being pitched vague value props. They've seen a million TV commercials do it. They've built up a reflex to ignore sales talk.

Do you know what the antidote to vague sales talk is? A precise description of how your product works.

For example:

There is, however, an exception to the mandate of describing how in your subheader.

If your product's how is very self-evident and therefore non-illuminating to describe (e.g. your header is "We are a photography agency" and your subheader is "We are a team of top photographers"), instead use your subheader to list the 1-3 most compelling benefits you offer:

Keep your subheader within 10-13 words. Otherwise it turns into a dense paragraph.

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

Julian's handbooks

To read handbooks (like the one you're reading now) months before they're published, subscribe below. I'm releasing how to write well, think critically, and play piano.

I only email once every three months.

I have another handbook that's already been released: The Science of Building Muscle.

Element — Social proof

Now that you've succinctly described what you do and why, it's time to convey the credibility of your company 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, simply state how many customers you have (if it’s an impressive amount).

Your goal is to make it seem like everyone already knows about you, and to make the visitor surprised that they haven't yet heard of you.

(In fact, that's kind of the goal of a lot of growth messaging.)

If you don’t yet have notable customers, provide your product for free to employees at well-known companies. Then place their logos on your page if they wind up continuing to use you. 

Element — Call-to-action

You need to write your call-to-action (CTA) section like an ad. It has to be laser-focused on enticing people to convert. 

To this end, it should consist of two sections: its own header copy and a button.

CTA — Header

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

This is the second most important component to landing page optimization.

For example, "Get a new logo in 24 hours" or "Just set your price and go." You want to build a sense of momentum, and you do that by thrusting them to the next step.

In contrast, don’t use something generic like "Get started with your free trial." They've seen that text so many times that they're programmed to gloss over it.

Specifically remind them why they came here.

But don't keep reminding them with the same copy for every instance of your CTA. Have each CTA section's header highlight the value prop that was discussed in the page's preceding section. This rides the page's momentum: If a value prop resonates with a visitor, let them immediately sign up to realize that particular value prop.

CTA — Button text

In keeping with our approach of "remind them what they're here for," make the CTA section's button either a single action word, e.g. "Signup" or "Start", or use a verb phrase that further 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 

Your CTA's text is responsible for getting visitors to take action. It's your CTA's design that's responsible for getting them to notice they can take action in the first place.

When designing your CTA, follow two rules:

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 the next section — features and objections — to deliver your full sales pitch. Then, after they've read it, you hit them with the CTA section again.

Element — Features and objections

Pitching any product boils down into listing out the key values customers will receive once they purchase. In doing so, you want to portray yourself as uniquely valuable.

This is also an opportunity to proactively address their concerns and skepticism about your features. Hence, the name "Features and objections."

Remember that chart we created at the start of this exercise?

Bad alternatives

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

Value props

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.

Top personas

Head of marketing
•  Conversion rates
•  Traffic volume

Chief revenue officer
•  Reduce churn
•  Increase ARPU/LTV

Head of sales
•  Increase qualified leads
•  Qualify leads accurately

The information found here will directly influence not only the types of features and objections you add to your landing page, but also the order you present them in. 

This section will span the bulk of your page. Each feature consists of three elements:

For example:

website feature section
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' homepages to learn how to differentiate yourself from what people expect you to say. 

Let's dive into the three components:

Feature — Title

Write a 3-5 word title describing the specific feature or value. Don't use vague language like "Empower your life" or "Revolutionize your workflow." No, just bluntly describe what it is so visitors can decide whether it's relevant to them.

When you empower visitors to skip over sections they don't care about, you reduce their labor and improve their focus on the sections they do care about.

Here are feature header examples from the CinderGrill.com site:

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

Feature — Paragraph

I talk more about how to write enticing text ("copy") on the upcoming Copy page.

Construct an ongoing narrative

The best feature sections build a running narrative: They tie each feature paragraph back to the primary value prop being pitched in the hero section.

The consistency of your narrative makes your product more divisive and singular. 

You want people to think, “Yeah, you know what, after reading about this for 20s, I am tired of dealing with this problem!”

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 should mention something such as this in its paragraph: “… so that you put an end to the habit of constantly looking at your phone for updates.”

If you’re struggling with your ongoing narrative, try this approach. Back in school, you probably wrote essays with this type of 5-paragraph format:

In the introduction, you make a claim. Then you highlight three pieces of evidence to support your claim. Each paragraph has one focal point, e.g.:

Finally, your Closing paragraph sums up why your claim is correct. While compelling them to move forward.

Your landing page as a whole follows this very same premise. 

Before writing your copy, organize your page like you would an essay:

You'll learn to write in-depth content (e.g. blog posts) that convert on this page.

Feature — Image

website feature section image

For your feature's image, include a product screenshot or professional photography that demonstrates the feature in action. Remember, don't just include meaningless eye candy. Visualize the feature in a way that further educates the visitor.

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

Think of it this way: Don't add graphics to your site that couldn't be sourced from the product itself. Whether it's a short demo, a link to an interactive component, or a dashboard screenshot, think internally instead of externally.

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

Should I include a video?+

Most promo videos are terrible. They take too long to get to the point, they have derivative, uninspiring visuals, and wordy voiceovers. 

Visitors don’t finish watching them. This is a problem because visitors watch videos at the expense of spending time reading more of your page. 

Remember, visitors only have so much attention to go around. So don't distract them with something that converts worse than the rest of your page.

However, a foolproof reason to include a (good or great) video is when you’re selling a physical or visual product that's intriguing to see in action. 

If your product qualifies, follow these rules:

You can feature a video anywhere. It can stand alone in the header or, my preference, it can complement a feature paragraph that provides context.

To find video ideas worth stealing, watch the promo videos for the top performing Kickstarter and Indiegogo crowdfunding campaigns.

Diagrams instead of videos

If you don’t qualify for a video, and if your intent was to use the video to illustrate how your product fits into its complex marketplace, instead diagram this relationship. 

A well-designed diagram can say in 10 seconds what your took your video 90. 

Landing page design

You want to expend at least some effort presenting your page in a visually appealing way. It does help with landing page conversion — by showing you're not amateur.

For example, instead of just listing your features in a grid or line-by-line, you can stagger them (example). Or you can copy Intercom and blend unique, beautiful imagery into the page’s surrounding white space. 

Your site has to look good enough that:

You can find landing page inspiration on GoodWeb.Design.

This isn’t a design guide, so I’m going to suggest you hire a designer if you don't have one on staff. I also suggest you read the best book ever written on landing pages.

Working with a designer

I strongly recommend creating landing pages through a visual design tool like Webflow (the best, but complex) or Leadpages (much easier to use if you're not already a developer). They allow you to iterate quickly and avoid coding.

I’m an engineer myself, yet I prefer Webflow over coding sites manually. There's no point in wasting time on that. Not for a landing page with nearly zero functionality.

Better yet, if you have the budget, pay a professional designer to create a landing page mockup for you. Then you can recreate it pixel-for-pixel in Webflow. 

To find a designer, head to Dribbble and browse for someone whose aesthetics suit your brand. (I've pre-sorted that landing page link by new Dribbble users — since they haven't yet been flooded with work requests. Feel free to re-sort.)

Contact these designers and convey the following:

If you don’t have the budget to hire a designer and aren’t an experienced designer yourself, read this series on design basics before you take a stab at it.
If dogs don't like your dog food, the packaging doesn’t matter.
– Stephen Denny

My growth agency does this for you

Bell Curve is the growth agency I built using many of the strategies in this handbook. We work with some of the fastest-growing companies in SaaS and ecommerce.

Asking for feedback+

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

For both audiences, assess six factors:

These questions are appropriate for requesting feedback on anything you write — including your blog posts.

Home versus persona

Remember, there are three types of landing pages: your homepage, your product pages, and your persona landing pages. 

Homepages are what we’ve covered so far. 

Product pages

If you sell multiple products, product pages supplement your homepage by going in-depth on each product you sell. Or each grouping of features your product offers.

They can be identical to your homepage, save for a few tweaks: 

  1. Rewrite the hero subheader to highlight the value prop most appropriate for why someone clicked on this in-depth product educational page.
  2. Make the hero section take up minimal height so it gets out of the way of point 3:
  3. Increase the length of the Features section from 3 or 4 features to 5 or 6. And go further in depth on each now that you know which specific product or feature set the visitor is most interested in learning about.

Persona pages

Persona pages (e.g. company.com/salespeople) are the pages we send ad traffic to. 

Persona refers to the fact that ads are targeted to specific audiences, e.g. new mothers or wealthy young men, and those audiences should be served landing page messaging that best suits their presumed interests. 

Persona pages are nearly identical to homepages, but with a few tweaks:

What I love about persona pages is they pull double duty as sales and content marketing collateral: We can handily link to these pages as pitch material when we're targeting well-defined audiences outside of paid ads.

Assessing landing page conversion

You assess landing page performance by tracking a conversion event: a measurable action a visitor opts into taking. Common landing page conversion events include signups, email submissions, and purchases.

You can also track which CTA's on your page are resulting in conversions. I recommend a free click tracking tool like HotJar. It'll reveal which of your CTA's are attracting clicks, and which elements visitors are falsely expecting to be CTA's.

For any period of time, measuring conversion rate is seemingly a matter of:

Visits Containing Conversion Event / Total Visits

But it's actually not this simple. 

To meaningfully measure conversion, only count qualified visits. I define this as:

You can track these metrics with any web analytics tool. Most sites use Google Analytics. SaaS apps tend to also use a tool like Mixpanel.

Furthermore, track conversion over time from each separate traffic source:

If you don't track conversion on a per-source basis, then a big monthly traffic spike from a source with a particularly low conversion rate will skew your month-to-month conversion average and you might mistake that as business doing worse than normal.

Never let the total distribution of your traffic distract you from per-source conversion trends. Focus on improving them individually.

You'll learn to improve landing page conversion through A/B testing on the next page.

Next page

A/B testing

How to improve landing page conversion.

Or, choose a page using the menu at the bottom of your screen.

Next page →