The 10 minute No-Nonsense guide on building the perfect Landing Page
The Landing Page is like the chocolate flavor of online projects. Sooner or later you’re gonna need it. While you probably shouldn’t spend months building it out, it is an important piece of the puzzle and you should make sure it is optimized for your goal (subscriptions, sales etc).
I decided to make a quick guide on what goes into making an optimized landing page. By the end of this article you will have a good high level idea of what pieces you need to incorporate in your landing page.
The easiest way to approach the Landing Page is to break it into small digestible components (you might literally want to do that if you’re coding in React haha).
The Hero Section
The first thing your users will see when they land on your website is the Hero. This is the big headline + accompanying image you see on most landing pages. The objective of the Hero is to a) capture the attention of the user and b) explain what exactly your product or service does.
You want to be succinct here. For example, Notion has a headline of All-in-one workplace. The sub heading further explains this: One tool for your whole team. Write, plan, and get organized. In a few words you have an idea of what they are about.
You also will typically have a Call-To-Action button or buttons next to your headline so users can immediately convert. This can be signing up or subscribing for your product.
Social Proof
You often see some social proof supplementing your hero. This can come later on in the form of customer reviews/testimonials as well (talked about later) so it can be considered optional but if you have companies already using your product this is a good place to add their logos to signal trustworthiness.
The How-It-Works Section
The how it works section quickly gives a brief overview of how your product achieves what it claims in the Hero. Again — you want to keep this short and simple. You can have a more detailed how to guide in other sections of your website.
It’s very common to show this in terms of Steps with some visuals. For example, Ubers would be Step 1) Request Ride on app, Step 2) Get in car and Step 3) Get off at your destination.
The Benefits Section
This is probably the biggest section in terms of space. You usually see the classic side by side layout of description-image, image-description (on desktop). The objective is to hammer home the benefits of your product. Note: this is different from the how it works section. You should focus on the pain you are solving and the value you bring to the customer.
A standard way to go about it is to talk about a pain in the first part (Are you tired of waiting for a cab?) and then hit them with the value of your product (now you can request a ride in a matter of minutes using your smartphone). The images are a good way to supplement the emotion of the benefit (sad, frustrated, happy, winning etc).
Features
Depending on your product you might not need a features section if you feel the how it works + benefits sections have gotten your points across. But it is a good way to highlight product attributes.
It’s also a good way to highlight supplementary product features and get in the obligatory buzzwords (supercharge your workflow, multi-disciplinary, fancy company integration etc).
Customer Testimonials
Alright — you’re on the home stretch now. You’ve gotten your points across about why your product is awesome. Now you just need to tackle that last nagging doubt that customers will have. Basically — the question boils down to, ‘How can I trust you?’ And the best way to answer that is by showing existing customer testimonials that can vouch for you/your product.
The Final Call-To-Action
Congratulations! You’ve done all you can. From catching their attention, to delivering your message, to removing any doubts about your product. Now all that is left is to once again ask them to buy/subscribe/whatever action you want them to take. This can be as simple as showing them a button or email capture form.
Other Things
Order
You don’t necessarily have to follow this order I have laid out. A lot of times features are shown before benefits or testimonials are positioned more towards the top. It really depends on your messaging. My advice is to test out different variations and see what feels more natural.
Header & Footer
I didn’t include these as part of the landing page because they are usually part of every page of your website and there is nothing inherently landing page related about them. You can play around with them, especially the header, to add to the visual aesthetic of your landing page. The footer is mostly reserved for links to other pages/resources etc.
And that’s it! By following these steps you have crafted a time tested funnel that will hopefully lead to more conversions whether that be sales or subscriptions or something else.
Want a done for you Landing Page?
Maybe you don’t want to go through the hassle of creating all these different pieces. Get a done for you landing page by yours truly :)
If you are interested you can learn more here.
Cheers,
Bilal
