If you know your customers well enough and you have a good product to serve them then building your website with the right structure is the key to a great impression. It’s managing that impression of your product that get’s the visitors to the next step of your funnel.
Keep in mind this article will only teach you how to get that structure in place, if you want to know that previous steps that lead to this, there will be a free course at the end explaining you my own process.
Why structure is your ultimate tool
If you separate your website into sections then it’s easier to focus on the goal of each section and you tweak each one to obtain the best result. Here are some other reasons structure helps you a lot.
- Easier to change: if you have a style defined for the website it’s easy to change the copy, images, explanations, features covered and so on…
- Easier to test: you can more easily think of a different version of small portions of the website instead of the whole thing and it’s faster to tweak.
- Easier to optimize: you can isolate variables to find out what’s holding the website back from better CR’s.
- Easier to understand: by having a proper structure you are basically breaking down your message into easier to understand pieces that you can change and test so you can answer your visitor's objections as they navigate and make the website sell your product for you!
1. Header
The header is your opportunity to create a good first impression so make sure you can explain briefly what your product can do, it’s very important to create curiosity as a lot of people leave the website in a blink of an eye.
Pro tip: An effective header is not one where you try to cram everything the product can do in a single section, the key here is to make every section introduce the next one so the visitor becomes more and more interested and understands more and more the value you can provide at the same time.
Clear headline
Introduce the problem or solution you are solving in the headline.
Clear supporting test
Explain briefly a solution of you have for it.
Clear CTA
Make sure the CTA is visible and stands out otherwise people will miss it and you can’t expect them to convert regardless of your efforts elsewhere
Pro tip #1: Use this color pallet generator to help you with selecting colors with good contrast just select your brand colors and you are done, easy!
Pro tip #2: Use the button text to manage the expectations for the next step, a little caption below might help depending on the complexity of your offer.
Good Examples
2. Establish “quick authority”
What I call “quick authority” are some details throughout the website that create trust in your solution, if you focus a lot of the social proof in one place you will have two huge problems, a lot of people won’t get to see that (as they will leave) and it makes it seem you are trying to hard to sell them in some cases. Some examples that fit this category could be press coverage, some words from the press, a small testimonial, a great mention on twitter, well-known companies using your product and so on…
Pro-tip #1: Through in some numbers/stats when possible to contextualize the problem or the solution better, also acts as some social proof.
Pro-tip #2: Use high numbers in the social proof as anchors, combining the last tip for even better results.
Good examples:
3. How it works
More like “How it can get you results”…
If you think about it this way, it’s easier to focus on benefits instead of a list of, what looks like, “nice to have” features. Remember, a “nice to have” business doesn’t grow and worst doesn’t last!
Images that relate to the content
90% of people will scan through your website (that’s the sad truth) but if you have good screenshots, gif’s, explainer videos to complement the rest of your message you can grab their attention and make sure they see something that will impress them about the product and think of it as the solution.
Break it down
Think about it, do you learn better when you are overwhelmed with information? I assume your answer is no, so help your visitors learn about your product and break it down for them, it’s that easy.
Benefits, not features
People don’t want to buy features from you, they want to buy their time back, eliminate their stress, simplify things, increase productivity, the list could be endless! This triggers the investment mindset where they want your product to get results, if you don’t trigger this you will end up with price-conscious customers and once a cheaper, good enough alternative comes up they will leave you asap, sad stuff… :(
Good examples
4. Social proof
The real purpose of this section is to communicate: “Look there’s already a lot of people getting results”. Triggering some FOMO while creating a lot of faith in your product as a solution for their problem.
Pro tip #1: To make this as effective as possible make sure your testimonials are result focused.
Pro tip #2: To ask for results-focused testimonials simply come up with 2–3 examples of how the testimonial could sound like so when people give you the answer it unconsciously follows what you needed (without it being fake).
Good examples
5. Final CTA
You have been nailing their impression about your product with the previous steps so make sure you grab them as they ready to convert to the next step in your funnel.
Pro tip: Remember, it’s not the CTA that makes people convert it’s the work you did before to make them want to sign up, get a free trial, buy or schedule a demo. “The website is the decoy and CTA is the fishnet”
Good examples:
Final thoughts
The whole point of doing this is creating the right process for you to keep learning about your audience and therefore be able to pivot the product or the message to improve results, you don’t need a designer or a developer to make this happen now a days, this is a mindset and a process!
If you want to get to get insights like these every week I can send you 1 actionable step a week to help you turn your visitors into customers. Sign up here
_________________________
____________________Would love to discuss your problems so feel free to tell me about your current situation, needs or goals in the comments 👇 or …Services Testimonials Free email courseEmail: [email protected]_______________________
How do you structure your page?
Would love to understand your tought process when lauching a landing page and what you could take from this article.
Let's start the discussion in the comments 👇
Hi Pedro, nice article - short, lots of value and showing good examples to emulate.
I think my new landing page hits all your points, but would be great to hear how you would improve it: FreeTrain.co
Hey man, thanks for your comment ;)
The website seems good, I would just switch the order under the testimonials between the quoted text and the name + occupation as they are really easy to miss currently. I would also make that text darker and slightly bigger to help with that on my monitor is barely visible.
Good luck!
Great article Pedro.
Thanks Filipe!
Awesome! I realy love the article. What do you think about my landing page https://launchbeast.io?
Hey Emeka, glad you found it useful!
Here are my points:
How are you driving people to this page?
This page can sell itself for now as you need to interact with a team and you need to bring the social proof for another source if you ever want it to convert either from referrals or specialized articles people search for. If you are at an early stage I would focus on normal B2B sales process like cold emailing, marketing campaigns, cold calling and so on...
Also the founder from ManyPixel's is doing something similar for design very sucessfully and you can learn from his interviews on IH and on "the Early stage podcast", I know I am learning from him too ;
Good luck with this man!
Hey, I think the page looks great, it is clean and has good content which explains what you do very well.
BUT the initial load was unnervingly slow (circa 10 seconds in Ireland with a pretty good connection), as 'javascript experts' I would expect the page to better optimized.
Also, perhaps an 'About us' page would be good, to get an idea of the business background and what you hope to achieve.
Good luck with launchbeast :)
I have been online since the Fall of 1996. And I am testing and tracking hacker.
Here is my one biggest conversion secrets. It makes the landing page almost irrelevant:
I get at least 28 touch points on a blog.
I have several blogs. Each one ultimately leads to my simple landing page.
A touch point is a single visit to each blog post. As soon as I get at least 28 touch points (blog post visits), I can be sure I am going to get a $299.00 sale.
It is for this reason that I give away all my "here's what to do" info on my blog posts. And then my "here's HOW to do it" info behind my paywall.
Hey Markus, thanks a lot for sharing this, it's super interesting!
I am doing something similar with a new newsletter where I send weekly tips to increase conversion (http://www.cortes.design/1-tip-a-week) and that's pretty much what I want to achieve with a consulting call CTA at the end of each email.
Will definitely try to use "here's what to do" and "here's how to do it" stuff with it.
Cheers ;)
This is great. I think you hit on all the major things a landing page should have and I like the order you've recommended. I really like the idea of establishing authority fast. I haven't been doing that well enough on my pages.
What's your favourite (inexpensive) tool for building landing pages quickly?
Awesome to hear you got value from it David!
Don't know what inexpensive is for you but if you want something that is super powerful, fast, cheap and very low maintenance I would recommend Webflow. I use it with my website and plans for hosting are cheap IMO starting at $12/month.
I only have basic knowledge of HTML and CSS and got my website running pretty well and fully responsive.
Would love to know what you want to use it for btw! :)
Cheers!
I need to redesign https://www.clamberapp.com/.
I banged it together a couple of months ago but I've added some new features to the app that I should be showcasing and I'd like to improve the design while I'm at it.
I'll see what WebFlow is like now.
Awesome David, thanks for sharing!
Webflow also has a few themes people share and tons of tutorials I haven't look at those because I didn't need the themes but maybe there's something you could use as a base.
Good luck with your project man!
Hey @pedrocortes! I completely love the article ;) Thanks for sharing it.
Glad you liked it Rich! I try to have one on IH every week :)