cft

The Anatomy of Your Landing Page Depends on This Tactic

An easy way to figure out how to structure your landing page for optimized conversions


user

Mauro Accorinti

3 years ago | 10 min read

Me neither.

But then I came across a video with this picture of an orange hot chain as its preview. So of course I had to watch it.

Did you know chain starts as a kind of wire rod?

It’s weird right? I mean, it kind of makes sense, but it’s not what you would have expected, is it?

Not to mention, the material looks so flimsy compared to an actual steel chain when you look at it. And then you wonder…

How the hell does it go from that to the wonderful don’t-you-dare-steal-my-bike chain we all know and love?

Well, it starts by passing the rod through a machine that lubricates the wire so that it can pass through another set of machines to thin it out. Because apparently, thinning it out makes it stronger.

Why does thinning out the rod make it stronger?

I don’t know!

But they force the wire through something called a “die” (which doesn’t look anything like a die. It’s cylindrical) that has a smaller diameter than the wire going through.

My guess is that the metal gets compressed this way, which increases it’s internal density?

But then it goes through another machine that creates millimeter-perfect cuts through-out the rod on each side, after which the wire is taken through a machine called a “former”.

And here’s something you have to know about the former…

It’s satisfying to watch.

I could watch this all day.
I could watch this all day.

It “forms” the wire into its shape, by exerting an incredible amount of force.

And then, uhh, movie magic happened?

Because in the video, the narrator says “Now a pulley system drops the freshly-welded chain into a heat treating coil”

Which makes me wonder, when the hell did was welding a part of the process?

Oh Hollywood…

But then you instantly forget about that detail once you see the orange hot chain come out the other side of the coil. (The image you saw before.)

Something cool I can share from my physics classes in university (and a bit of googling) is how the coil is able to generate so much heat.

The video mentions that electricity is running through the coil from the outside, right? The reason why it does that is because of the cool relationship electricity has with magnets.

The flow of electricity through a wire creates a magnetic field around that wire.

Magnetic fields!
Magnetic fields!

Woah.

But that’s not all. Because when you make the current in the wire constantly change (in other words, you make the current vary across time), the magnetic fields themselves also start to constantly change.

And it’s these magnetic fields, which are constantly alternating, that themselves create their own electrical currents…

Through the chain itself.

THIS is what heats up the chain, through a process called Joule heating. Because it’s causing friction (like when you rub your hands together), but through the chain.

Isn’t physics just cool?

*Ahem*, anyway…

Afterwards the chain is immediately run underwater to cool, then heated up one final time, and then run underwater again.

And all this, just so you can lock up your bike while you’re at work.

Absolutely amazing.

And it was while I was watching this video that I had a funny thought.

Isn’t this how marketing campaigns should be?

Your lead being guided through your campaign…

Each ad, article, email, landing page, sales page representing a step (or a machine in this case) that helps them become stronger, less naïve, have less problems in their lives…

Until finally, they get reborn into their strongest selves, resurfacing from water as if having been born again and then becomi-

Okay, maybe I’m pushing the metaphor too far.

But could you imagine having a landing page that is this efficient at getting leads from one end of your campaign to the other?

This could be your landing page

Is that even possible?

Well, yeah.

Because you can break down your page into sections.

And each section has it’s own purpose. Just like every machine part of the forming machine.

So are you ready to read how to structure your page to do just that?

Let’s jump right in then.

What constitutes the anatomy of a landing page?

If you were to sit down and study some of the most popular landing pages out there, you’d find there are a few components or sections that always repeat.

You know what I’m talking about. Things like:

  • Hero section and image
  • Logo set of companies that serves as social proof
  • How it works section
  • Testimonial section
  • Use case section
  • Call to action
  • etc.

There are a few reasons why these show up again and again across the web. And, funny enough, it has to do with industrialization.

  • First, because a lot of landing pages (think Unbounce or Instapages) are created from a base of already made templates. There’s no need to reinvent the wheel if it’s already out there. And especially if your business needs to churn out a lot, it helps to save both time and money compared to starting from scratch.
  • Second, these repeated sections that show again and again have been proven to increase trust, reduce clutter and disarm lead objections when used. Before the internet, the most common way of seeing long form ads was either through the newspaper, magazines or your junk mail. (The good kind of junk mail). And what happened was everything that worked back then got transferred online. The best marketing concepts became re-useable software components you can stick onto your page whenever you wanted. It became repeatable and it usually worked.
  • Third, reusable components in web development, with slight alterations in color and design, save a LOT OF TIME. Business wise, it’s good for the client and the developer. Although this is more of an industry thing.

Taking a look at one of the most overrated examples on the web (hopefully in a new fresh way), let’s look at Unbounce. If we were to analyze it, we’d immediately find…

  • Headline with Hero Image And CTA
  • Social proof in the form of company logos
  • A testimonial that puts a spotlight on a certain aspect of their software through results (Double conversion rates & Unbounce’s Templates)
  • A second headline that is going to dive into benefits/features
  • Features/benefits sections
  • And a final CTA

And so when you hear the word “anatomy of a page”, a funny thing happens where all you’ll find is the same sections popping up again and again.

And the reason why?

It’s an easy way to define “the skeleton” of what a good landing page needs to have.

(As a side note, this isn’t to say you can’t put in custom sections outside of this “skeleton”. After all, your job is to do anything you can that will help you sell. Here’s an example from Bellroy:

Bellroy Wallet example

The tradeoff for this approach is, again, increased complexity to your page and increased resources needed to make them.)

The problem lies when you try to go deeper into how each section works together and how to meld them together.

Which reminds me, let’s talk about something nobody else is talking about.

How do you decide the order of components?

Which sounds like a dumb question, right? I mean, why does the order even matter?

The short answer is: It increases conversions.

The long answer is: It increases conversions BECAUSE order matters.

Here’s the thing.

Whenever you’re reading a book, an article or hey, even listening to a conversation, have you ever noticed there’s an internal voice that pops up while you’re taking in information?

An internal voice that is always asking question?

Questions like:

  • How does it do that? / How does it work?
  • Is this page trustworthy?
  • How do I know I’ll like this product?
  • What if I don’t like it? Can I return it?
  • Is the product’s process hard to implement? Do I have to change my way of doing things to do so?
  • Who is the company who’s offering me this? How do I know this isn’t a scam?
  • How easy is this to use?
  • And much more. These are just off the top of my head.
  • (Actually… aren’t you doing the same while you’re reading this article?)

And here’s the thing about these questions…

They don’t pop in random order.

They pop up as you’re presenting the information.

Going back to the Unbounce example…

(And assuming the person already knows about Unbounce as a landing page builder but doesn’t know about the benefits…)

[Lands on the page and reads the headline]

“Oh? So Unbounce can help me grow my business by getting more conversions. They also seems to have new tools. But how do I know this will work? What guarantees the conversions?”

“Ah, so they’ve worked with thousands of brands and well known agencies. A lot of these are big ones too. Alright…”

“Oh wow! Seems like their stuff works. People seem to (according to them on this site) get good results with their service. But I still don’t understand how this whole thing works…”

“Ahh, so here’s the info on how they do it. Let’s see…”

[And here is where they explore to see more features or to the template gallery.]

(Small note here: Over the years it seems like Unbounce went more towards the B2B route in their landing page. It’s not so much about introducing their products anymore as it is conveying why and how it helps businesses as a landing page builder. Because of this, it’s more of a presentation page with a number of different CTA’s. This would be different if this was a pure campaign, where the page would normally follow the rule of one. But since this is their website’s main page, it’s a strange landing/homepage hybrid. I personally like it.)

This page does a pretty solid job of presenting the different sections in an order where, as their internal questions are popping up, they’re immediately being answered. At least, for as well that a homepage/landing page hybrid could do so.

But let’s imagine for a second what would happen if it didn’t do that?

What happens if the page has its sections in the wrong order?

Well, your lead’s questions will go unanswered as they’re reading.

When that happens, it increases friction, their internal monologue of questions piles up and they’re not even reading anymore.

And then…

*click*

They sign off and you never see them again.

That’s why it’s so important.

Not because it increases conversions if done right…

But because you lose conversions if you DON’T.

So then, that leads us to the question on everyone’s mind…

How do you know what order to put every section in?

  • When should you put in social proof? In the beginning or at the end of the page?
  • Should you first put up the testimonials early on so leads know its been used before or should you explain how it works first?
  • How many CTAs should you have sprinkled across your page?

These are not obvious questions.

And a lot of times, the only way to get the answer to these questions would come from:

  • Testing
  • Knowing your audience
  • Common sense

And since I imagine you’re already doing testing (you’re doing that, riight?)

We’ll stick to tactics that focus on these last two.

So with all of that said, here’s my process for getting a feel of what, when and how to implement the components of my pages.

The philosophy behind this is:

  • If you can imagine you’re talking to your ideal customer persona…
  • Imagine what they know about you, your business and your products…
  • Imagine what they know about alternatives out there…
  • Imagine you have just a few minutes to tell them about what you’re offering…
  • And turn that dialogue into a page…

Then you have everything set.

If we were to put this into a physical process you can do at home, it would look something like this:

1) First, turn off your monitor’s screen or close your laptop. And close your eyes.

2) Now put yourself in your lead’s shoes. What did they just click to get to your page? What do they know right now? What don’t they know?

3) With that information in mind, now imagine you’re the salesman of your offer. Whether it’s for a free ebook, a newsletter or an ecommerce product page, it doesn’t matter. Just imagine you’re standing in this giant white room. Your lead, who walks in after walking through a door that had your ad on it, sees you. It’s your job to greet them with a smile.

4) Write down (or record) what you would say to that person. If you have an outline of a landing page, it would more or less follow that. If you already have a landing page, make that your pitch. Remember the idea is to make your offer interesting and focused on them.

5) Done? Great. Now read it back and edit. Do things sound out of place? Do things flow naturally from one component to the other? Try moving things around and rewriting until the pitch sounds great.

6) Now the hard part. Give that pitch to somebody you know and analyze their reaction. But more importantly, jot down what questions they have during or after your pitch. Then go back and edit to account for these questions.

I love this exercise for 2 reasons:

  • You don’t touch anything software related until you have a basic idea of what you want to be on the page, and in what order.
  • If you get stuck at any point, whether it’s because you don’t know who your customer persona is or what to say, you instantly know what the weak knowledge areas are. Time to research your customer persona or how your offer serves your customers.

That’s how you structure your page. Not by “following a formula”, but by deciding what you want first and THEN using the copy-paste components to do it.

Don’t be a sheep.

P.S. Here’s the video of how chain is made I talked about at the start of this article. Enjoy.

Upvote


user
Created by

Mauro Accorinti

I’m a front-end developer and digital marketer. My newsletter "In One Snap" features weekly insights to help marketers, designers and devs increase conversions on landing pages. You can get my free landing page swipe file (and sign up to In One Snap) by going here → http://bit.ly/Free-landing-page-swipe-file


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles