10 Winning Elements Of Product Landing Pages [With Examples]

The Landing Page Pyramid of Importance

There are a lot of moving parts to building a successful landing page.

So rather than giving you a bunch of things to add at random, let's start by building the right mental model to approach your landing page.

We first heard of this way of breaking it down from legendary marketer Peep Laja, founder of CXL.

And we took the concept and expanded upon it to build the mental framework we use at our agency.

To plan out the structure of your landing page, follow this hierarchy of importance:

To get visitors to take your desired action, you need to address the concerns of each level before moving on to the next one.

Level 0: Is this for me?

Right at the base of the hierarchy of importance are 2 core principles: Clarity and Relevance.

A strong landing page needs to be clear on what it is, what problems it solves, and who it is for. Users must know within 3-5 seconds:

‍"Did I land in the right place? Is this relevant to me?"

If your visitor needs to think too hard to answer any of these… you lost them for good.

Don't get clever, don't get cute. Cut straight to the chase and spell it out for them.

❌ What to avoid:

What does this new H1 even mean?

The Patreon redesign is nice as an art piece but fails to answer Level 0's primary concerns. They positioned the headline in a weird place, and worse, made it cryptic and unclear.

It's almost impossible to tell that Patreon is "a platform for creators to build a community and monetize their audience".

So, what to do instead?

Well, in order to climb the first foundational rung of your landing page pyramid, use these elements:

Element 1: A strong headline

You can think of your headline as the gate to the rest of your landing page.

Here's how Mad Men era copywriters used to teach headlines:

A good headline makes the user read the subheadline.

A good subheadline makes the user read the first line.

A good first line makes the user read the second line... and so on and so forth.

"5 times as many people read the headline as read the body copy." – David Ogilvy

So, the goal of a good hero headline is to get your visitor to read the next section. And the next section's goal is to get them to read the following, and on and on until they reach your call to action.

How to write it then?

Well, that's enough for a whole blog post on its own.

But the best way to think about it is this:

If you were a door to door sales person, what would you say to your prospect to get them to open the door?

Getting it right takes a while.

But if you do get it right... if you resonate with your users... and if your messaging is relevant_?

They'll keep reading your landing page.

You now have a fighting chance.

But, if your headline is:

• Irrelevant
• Vague
• Generic
• Unclear

...you can expect visitors to bounce, leaving your site in seconds.

<aside class="blog_callout"><span>Want to dive deeper? Check out this post from CopyHackers on how to write a great headline</span></aside>

Element 2: A clear USP

Within your hero section, you need to communicate what your uniqueness is. What is the value only you can deliver.

A strong USP is to a crystal clear statement, usually placed in your subheadline, that informs your target audience about:

1. Exactly how your product solves your customers' problems
2. The specific, quantifiable, and unique benefits that your product delivers. Go hard, and make your one-of-a-kind features shine.
3. Why you're different from the competition. Is your product more straightforward to use? Faster? Has less overhead? Fewer steps involved? A better UX?

What does a USP look like?

USPs can have many faces. Even marketers have differing views on what a USP should look like.

But we've got some favorites that display what boxes your USP needs to tick:

USP Example #1

What we like: Artboard's hero section, although unconventional, does a great job of communicating it's uniqueness. It's graphic + motion (a rarity in the design tools industry) plus has automation features. As a designer I say gimme.

USP Example #2

What we like: Secfi does a lot of things right in their landing page, but their headline + subheadline combo makes their USP extra clear. With options and equity being notoriously tricky to navigate, if I were a startup employee, I'd be all over it.

‍

Level 1: Should I trust you?

Companies are always wary of investing resources in setting up a platform that could shut down in the future.

They're double wary if you're new to the game. And triple wary if no one else is using your product yet.

And so, you have to put them at ease in trusting you with their business.

But here's the thing. It's easier to destroy trust than it is to build it up. So you'll need to put a lot of effort in providing the right trust markers (and making sure your site looks professional.)

This tweet by Jordan O'Connor sums it up :

‍

Here are a few elements you can use:

Element 3: Demonstration

We process visuals about 60,000 times faster than words. So across your site, use visual demonstration elements to show, instead of tell.

Here are some practical ways to do it:

Use interactive animations to demonstrate your USP

In this brilliant example, Cycle showcases how their product works with a clever scroll based interaction. Kudos to the team!

Display individual UI pieces as visuals to demonstrate each of your features.

I love to use parts of the platform's UI on bento boxes. This one is from our recent landing page for Spine AI (YC S23). Bonus points if you use animations!

Use creative illustrations and animations to demonstrate abstract benefits

Illustrations are twice as important if your product is abstract or doesn't have a UI. In this example, the amazing team at Evervault (one of the GOATs of Landing Pages) cooked up a tasty graphic to showcase how they're an additional layer between data collection and the server. A critical feature for PCI compliance that is very hard to showcase otherwise.

Build a mini-platform that users can test themselves without signing up

Check out this incredible example by Height. Their visitors can experience the entire platform, right from the landing page without even having to provide their email. Great for conversions!

The good old demo video

Notice we left demo videos last. Decision makers get exposed to hundreds of requests to "show a quick demo." So getting them to play your lengthy demo video can be a big ask.

Usually best is to use either:

• A very short demo.
• A dedicated landing page with the goal of booking a full demo session.

Element 4: Social proof

Front load your social proof and add as much as possible – no amount is ever enough.

Here's a rule of thumb:

For every claim you make, you want to provide a proof element to back it up.

Here is a semi-exhaustive list of social proof elements you can use:

Proof element #1: Users' logos

Display as many as possible above the fold. Bonus points if you have high-profile customers that are recognizable.

In this example, the fine folks at Wiza stacked their social proof elements really well.

Proof element #2: Users' faces

Include your users' avatars right after the first call to action.

Bonus points if they are recognizable people within your niche, as in Typefully's case.

Proof element #3: User counts

How many users do you have? Show that you have a healthy business that's here to stay (see both previous examples for how it looks in action!)

Proof element #4: Text testimonials

Include as many as you can, peppered through your site. I like adding at least one short and relevant quote above the fold whenever possible.

Proof element #5: Video testimonials

This is the most potent form of proof. Make sure they're believable and rough around the edges. If it looks overproduced, visitors will be skeptical.

Here's a recent implementation for one of our clients, Tiny Health.

<aside class="blog_callout"><span>Tip: use a tool like Senja to collect and display your testimonials in auto-pilot.</span></aside>

Proof element #6: Third-party reviews

Trustpilot, Google Reviews, ProductHunt comments, G2 Reviews, Capterra… all work here.

The Folk team humble-bragging for all the right reasons, front and center right after their hero graphic. Brilliant!

Proof element #7: Case Studies

Present them with a single headline showing the result you got for the customer.

Here you can see Webflow executing this proof element at the highest level in their new landing page.

Other proof tools to pull from

• Partner/investors logos: High-profile partners allow you to borrow from their credibility.
• Endorsements: Don't have many users? Reach out to a high-profile personality in your industry. Ask them to try out your software and reproduce any praise they give you.
• Awards: Trickier to get, but worth it as 3rd party recognition over your work. Submit your product to as many awards opportunities as possible.
• Accreditations & certifications: The better-known the accreditor, the more you can instill trust. This is one of those rare instances in which we do recommend adding a link out of your landing page. It's ok to your profile on the accreditor's page. Make sure to open in a new tab, though.

Level 2: Alright, tell me more

At this point, you're starting to earn your visitors' trust. And you've also earned the right to make your case. Here's what comes next:

Element 5: Main Features & Benefits

The best way to go about listing your features is to highlight the main ones with a dedicated section for each, or a box inside a bento layout.

Invest additional time in your graphics for your main features, and remember the demonstration elements we covered above.

When deciding how to order your features, lead with the ones that have unique benefits that set your solution apart.

These are the features that help the users either:

1. Achieve their desired goal
2. Reduce/relieve a pervasive pain point.

In this example, BetterStack does a wonderful job of tackling two of the biggest pain points of product teams: stack wide observability & aggregation. Building it in-house is near impossible, so their biggest feature section highlights how it eases the pain with their solution. Bonus points for inlcuding secondary feature explainers (necessary for technical products) and a testimonial right under the image. Flawless execution.

About leading with the benefit

<aside class="blog_callout"><span> Note: feel free to skip this section if you have this part dialed in 🫡 We're about to go into the very basics of benefits vs features</span></aside>

‍

In 2011 bestseller Thinking, Fast and Slow, Daniel Kahneman, Nobel Prize recipient and behavioral psychologist, explains:

When we think of ourselves, we identify with System 2, the conscious, reasoning self that has beliefs, makes choices, and decides what to think about and what to do. Although System 2 believes itself to be where the action is, the automatic System 1 is the hero of the book. I describe System 1 as effortlessly originating impressions and feelings that are the main sources of the explicit beliefs and deliberate choices of System 2. The automatic operations of System 1 generate surprisingly complex patterns of ideas, but only the slower System 2 can construct thoughts in an orderly series of steps.

Now benefits speak to the primal side of the brain. The "System 1", our emotions.

Those emotions, as explained above, trigger our "deliberate choices."

So, does that mean you should *only* speak in benefits if you want to be persuasive?

Not quite.

Here's Kahneman again on the second part of the equation:

One of the main functions of System 2 is to monitor and control thoughts and actions “suggested” by System 1, allowing some to be expressed directly in behavior and suppressing or modifying others.

And that's the role of features. Tap into our logic brain, the "System 2."

This mechanism, even if by mere intuition, led to the popular marketing adage:

"Logic tells, emotions sell".

Putting it all together

When presenting your platform's features, always lead with what your customers will gain by using your product, the benefit.

To determine the core benefit, you can ask yourself: "What are the specific ways in which my product benefits the user? How does this specific feature better my customers' lives?"

Let's look at some practical examples:

Product: Email marketing platform

• Features: Drag-and-drop email builder, A/B testing, Analytics and reporting
• Benefits: Createall your email campaigns without writing a single line of code. Optimize your email performance + maximize engagement. Get insights on tap for data-driven campaigns

Product: Project management software

• Features: Task assignment and tracking, Gantt charts and timelines, Collaboration tools
• Benefits: Real-time communication, Optimized resource allocation, Delegate tasks and projects in a breeze.

Product: CRM software

• Features: Contact management, Sales pipeline tracking, Automated email campaigns
• Benefits: Personalize your client interactions and improve customer service. Visualize and manage sales opportunities to close deals faster and increase revenue. Nurture leads, and engage customers at the right time with automated email sequences

❌ What to avoid:

With the rise of "Benefit-first" into the mainstream, a lot of companies have taken this concept into the realm of "woo."

They go full esoteric, with vague statements that feel nebulous and grand but mean absolutely nothing to your target users.

Remember, keep things grounded. As long as you stay within your users' world, you can't go wrong.

But as soon as you try to get "creative" or "cute" so much that thing start to lose meaning... that's when benefits stop working.

Here's an example: 

Although the Modern Life's marketing site is very pretty, most of their headlines have vague meanings ("Modern solutions for modern lives", "Eleveted technology that's also down to earth...") Those catchy phrases sound good on a marketing brief, but won't connect with potential users.

This tweet from marketer Andrea Bosoni says it all: 

Element 6: Secondary / Technical Features

After taking care of the main features & benefits, list your table stakes features.

The ones that:

• Are now a part of the standard for your industry.
• Need to be present for a company to even consider doing business with you.

These continue to hit that "logic brain". You can be more straightforward here.

Group them, plus all other technical / niche features in a section or two. No need to call them out on individual sections.

Level 3: Why you, why now

So, by now, you have presented your product. Visitors' logical brain is working hard to justify the need to take action and sign up.

And at this point, the sneaky old brain comes up with one couple of last retorts:

"I'm sure there's other out there that do the same thing…"

And…

"There's no rush, let's look around and come back."

Element 7: Comparison tables

Comparison tables are rather self-explanatory, but here are some best practices to keep in mind:

• Organize the rows so that your USPs shine. These unique features should be the top-level rows.
• Display all the table-stakes features so users know they're getting all the basics.
• Don't cherrypick; be truthful and fair. People can smell BS from a mile away, so doing unfair comparisons will likely backfire.
• For the love of Steve Jobs, make sure it displays well on mobile.

Here, ClickUp pulls a masterclass in comparison tables. Great, visceral design. Their USPs shining bright. Great execution!

Element 8: Urgency

This is a slippery slope. Fake urgency and scarcity are a no-no, but there is an elegant, less "on the nose" way of doing it.

Throughout your page, hint at the cost of not taking action. Are your target competitors shipping the feature you enable? Are they losing customers for not taking action? Call it out.

Is the outdated process that you replace generating thousands in overhead? Spell it.

The point is to remind them of the cost of procrastinating. Show how not taking action is their most expensive option. Both for their finances... and for their emotions.

Level 4: The ask

Once you've traversed all the rungs in the pyramid, the last step is asking your user to convert.

Element 9: A clear call to action

For whatever reason, the call to action is one of the first things people obsess about. What should it be? Where should I place it? What color should my buttons be?

We like to leave it last because unless you do levels 0 through 3 right, no one will ever click on them.

However, once all other elements are dialed in, there are a few things you can do to make your CTAs more effective:

• Focus on 1 action per page: Decide on the action you want your users to take and make all your CTAs go to the same place. Each additional action 'request' you add to your page will reduce your chances of visitors taking any of them.
• Place your buttons where they are expected. Don't make your visitors hunt down your buttons, follow existing patterns so people know where to look when they're ready to take action.
• Add a sticky CTA button on mobile: Save users the scroll to take action. Wherever they are on your page, when they're ready to take action a button should be readily available.
• Be consistent: use the same label across all buttons. Avoid "changing it up" on each instance.
• Make your CTA clear and easy to understand: CTAs are not the place to be clever. Clarity above all.
• Always include an action verb: sounds like a duh, but some teams try to be cute... and it doesn't go right.
• Make sure users understand what will happen when they click: CTA labels like "It's time!" or "Surprise me" are not good. Your button needs to make it easy to know what's at the other side.
• Include your main CTA above the fold.
• Add visual cues pointing to your CTA: This is CRO lore, but whenever possible add design elements that point to your CTA. Most evidence from this comes from one single eye tracking study, so take with a grain of salt and test on your own.
• Make your CTA the highest contrast element in your page: If people need to squint or search for your button, you're doing it wrong. For high contrast, go 180deg opposite in the color wheel.
• Avoid placing your buttons on top of a busy background. CTA buttons need to be the main character, the center of focus.
• Make your buttons look like buttons: Another place where creativity is best avoided. A button should look like what people expect is a button.
• Avoid overdoing it: it's easy to want to over engineer or over design your buttons. Instead, opt for a simple and recognizable design.

❌ What not to do:

An otherwise beautiful page by the team at Psi has a few shortcomings on their CTA design that could be hurting their conversions:

• It has 2 competing CTAs, "Get started" vs "Book a demo"
• Button near the bottom of the page in an unexpected position, hidden with very low contrast
• Actual desired action (Book a demo) at the top of the page, hidden on a busy background

But deeper than that, there is a bigger problem on Level 0: it is very hard to tell what the product is at a glance. Takes way longer than 3-5 seconds to decipher what the product is, which decreases the probability that people will click on either CTA even more.

Element 10: Friction Removers

Friction removers are the sidekicks to your CTAs.

They're a catch-all for any extra element to grease the wheels.

They're the little things you can add to address the last objections to taking action.

Go through your user research and determine why people hesitated to pull the trigger. Interview checkout abandoners. Chat with leads that went cold and determine what prevents them from converting them.

Then, use friction removers to smooth the path to conversion:

Objection: "I don't want to enter my CC details to test a platform for my company."

Friction remover: A "No CC Required" underline on all your CTAs.

Objection: "I need to invite stakeholders so we can all test it together."

Friction remover: A "Invite your whole team to try it out, for free" headline on your primary call to action.

Objection: "Don't know if your platform is secure enough for us."

Friction remover: A "Secure by default" section. Highlight all the compliance & security features built into your platform.

Here, the team from Tella.tv (which we use in the studio every day, btw) use the "7-day free trial – no credit card required" underline as a friction remover.

Bonus: reinstate your most significant friction points in the FAQ section. Write out each objection in question form. Use the same language your prospects use. Address their concerns in the answers.

Don't let your product fade into oblivion

Let's face it.

Product tech is becoming more accessible. Startups are whipping out MVPs in weeks using ChatGPT and the like.

Competition is at an all-time high.

So, if you want to save your product from being forgotten in the bottom drawer of ProductHunt's graveyard...

Your landing page needs to make it shine.

And with this framework, it will be more like a 12000w spotlight.

A bat-sign-sized reflector shining the light your platform deserves.

So go through each level. Conquer each rung.

Put the time into polishing each of these crucial elements.

Put purpose and intention on every line and graphic.

Build the well-oiled acquisition machine your product is yearning for.

And go change your users' lives.