Landing Page / CRO
January 21, 2024
Written by Rachid Ehabi
How I turn a landing page into a hot persuasion page
There’s a big difference between what is well-designed / looks good and what actually converts well and what turns visitors into leads and then leads into customers. I've been designing websites for 10+ years (over 500+ websites). This is usually the pattern of a landing page that best converts for SaaS. A landing page should not explain everything in the fullest detail, but instead, entice them to the next step. Here's a Saas landing page structure to turn your page into a persuasion page to help reduce friction to convert:
Section 1: Navigation bar
This is the header of the page with links to different pages of your website. The best practice is the fewer the links the better. It makes your primary CTA stand out.
Have only the links that keep them interested. Remove the nav bar for the non-intent audience (interruption marketing campaigns such as Youtube and social ads). You want them to focus on the page and offer solely.
A good practice is:
Who for pages (specific personas)
Pricing
Features
Success stories
Resources
CTA button +
Login buttons
Example:
Section 2: Hero section
This is the most important part of the whole page. A lot of thought is needed as this is your first impression.
You have to hook visitors to get them to keep scrolling and keep investigating the offer/ product. Here’s a Hero section framework:
Headline: Your boldest claim, the most attractive benefit and who it's for.
The formula for a headline:
Headline: The hook. How to go from to in with/without «Biggest Pain>
Subheadline: Elaborate on the header and tee-up the CTA. The bridge between the primary header text and primary CTA.
Creative visuals: In the image, gif or video format show and visualise the product that aligns with the headline and subheadline.
СТА: Your button with a concise incentive to click to learn more along with logos of well-known customers.
Section 3: Old Way
People are experiencing pain right now hence need your product or service to fix their pain points. When you create your copy, you need to highlight some kind of challenge, the old way of doing things. Do this by:
Agitate pains
Surface problems with the current state
Show the consequences of continuing in the old way
Create urgency to fix the problem.
Section 4: New way
This is the meat of your pitch to them. Tease the desired state, and talk about how your features benefit them and how your product solves their problems.
Highlight 3-5 points about:
How your product fixes their problems
Achieves their desired result
Gets the outcomes they want.
Explain and illustrate how each feature benefits them and address any questions or objections proactively.
Section 5: Social Proof
A strong form of social proof builds trust and credibility. It proves the cause-effect relationship between your solution and the customer's positive outcome. Examples can be:
Reviews
Testimonials
Case Studies
Without evidence, the market is less likely to believe your claims and the lower the lead to opportunity will be.
Section 6: Primary & SecondaryCTA
The CTA should be clear, easy to understand, and not overcomplicated. Providing a "what's in it for me" element that entices them to act. There are 2 types of CTAs:
Primary: Talk about the next steps - Demo or Trial. Address objections and risk reversals:
Freebies
Guarantees
Migration services
Customer support access
Help docs
Show how many people who have signed up in the last week etc.
Secondary: The vast majority won't respond to your primary CTA. Pitch a lower commitment offer such as:
Ebook/Guides
Video Sales Letter
Tools
Community Access
Webinar
BONUS: Exit intent pop-ups
The key for CTAs is adding value, insight and information to prospects free of charge, with no pressure or risk.
That's the structure.
The structure of your page is divided into sections. Each section serves a purpose. You need to set a clear visual hierarchy and draw attention to key sections. Guide visitors through the copy allowing them to easily find the info they're looking for.
Conversion-focused Design:
Content is powerful but never underestimate the design. What makes a great landing page is a conversion-focused design.
Responsive Design
Come on, I should not be explaining this. You will be surprised by the number of landing pages that are not fully set up to convert on mobile. Please make your website mobile responsive.
Around 49.5% of your traffic will come from mobile devices. Don't put opportunity at risk by not making your page mobile responsive. How do you optimise it? Simplify the layout:
Single-column layout with minimal clutter.
Make the text smaller
All elements fit the screen
Make buttons large and easy to tap
Reduce spacing between elements
Cross-reference on different mobile devices
Colours
Colours set the tone / create the overall aesthetic and feeling. Different colours evoke feelings such as trust, friendliness, and energy. Use the colour-psychology map Pick 1 /2 colours that convey the right feelings to your target audience:
Fonts
Fonts determine whether your prospect will read your content or not. Fonts should be easy to read / visually appealing. They create a sense of trust, professionalism, authority and credibility. Use tools like Google fonts to select both the heading and body font.
A little nugget from me:
For body text (paragraphs) Use black text on a white background. It reads a whole lot better than anything else.
Graphics / Visuals
These break up text and attract the attention of visitors. Graphics like Images, videos and gifs boost conversions.
They can be used to demonstrate your product/service. Providing visual cues that make it easier for them to understand what it is / how to use it.
The importance of Page speed:
The biggest contributor to conversions is speed. Research has shown that visitors expect a page to load in 3 seconds or less. Otherwise, they get frustrated and bounce. You can have the best page since sliced bread but it's not fast, you’re toast.
Get a web developer to create HTML-only landing pages or use Landing page builders like Webflow or Framer as they work like a charm when it comes to web speed.
Fix the following:
Delete any non-essential code snippets. Put rest on Tag Manager
Convert images to .svg, .png or .webp
Compress images (use Optimizilla)
Use embedded videos (Vimeo, Wistia)
Remove unnecessary text Bonus: Test different landing page builders
Run a speed test on Google Page Speed Insights This reports on the user experience on mobile & desktop.
Providing suggestions on how your page can be improved. Search engines are heavily influenced by site speed; You can get penalised resulting in less organic traffic
Here are some key metrics to keep an eye on for tracking your landing page performance:
Speed Score: Make sure your Google Page Speed Insights score is aiming for 90 or higher.
Cost per Conversion: Compare the costs associated with conversions on your pages.
Conversion Rate: Monitor the percentage of visitors who click on the Call-to-Action (CTA) and proceed to the thank you page.
For a bird's eye view, consider reporting these metrics in a funnel format:
Percentage of Page Views: Out of 100 clicks, how many views does the page receive?
Average Visit Duration: What is the average time spent on the page?
Page Conversion Rate: Out of 100 page views, how many visitors click on the CTA?
Cost per Action: Determine the average cost to achieve a specific action, whether it's a lead or a sale.
This approach will provide a clearer understanding of your landing page performance. Let me know if you have any questions or if there's anything else I can help you with!
To maintain an effective landing page, make weekly improvements:
Adjust CTA: Experiment with different Call-to-Action (CTA) approaches.
A/B Test H1 Section: Test variations in the H1 section for optimal impact.
Hotjar Heatmap Analysis: Use Hotjar to understand user interactions and behaviours.
Form Iterations and CTR Tracking: Regularly refine the form and track the Click-Through Rate (CTR).
Consistent execution of these optimisations will enhance your landing page. Let me know if you have more questions or need further assistance!
One final thing: An easy checklist you can use:
TL;DR
To turn your landing page into a persuasive tool for SaaS conversion, follow this structure:
Navigation Bar: Keep it minimal with links to essential pages.
Hero Section: Grab attention with a bold headline, subheadline, visuals, and a clear CTA.
Old Way: Highlight problems with the current method, agitate pains, and create urgency.
New Way: Showcase your product's benefits and features in solving their problems.
Social Proof: Build trust by building trust by including reviews, testimonials, and case studies.
Primary & Secondary CTA: Have clear calls to action for different audience responses.
Design Tips: Optimise for mobile, choose colours wisely, use readable fonts, and incorporate visuals.
Page Speed: Ensure fast loading times for better user experience and search engine rankings.
Metrics to Track: Monitor speed score, cost per conversion, conversion rate, and other key metrics.
Continuous Improvement: Regularly adjust CTAs, conduct A/B testing, analyse user behaviour, and refine forms for ongoing optimisation.
Consistently applying these principles and making weekly improvements will enhance your landing page's effectiveness in converting leads to customers.
Other Posts
