Skip to main content

Landing Pages

A landing page exists to drive a single specific action from the visitor.

Capabilities:

Product Suite:

Purpose​

A landing page exists to drive a single specific action from the visitor. This action could be anything from:

  • Signing up for a newsletter
  • Signing up for future events
  • Making a purchase
  • Registering for a webinar
  • Downloading an eBook

Remember, the best type of landing page depends on your specific goals and the nature of your product or service.

Jobs to be Done​

Lead Capture Landing Pages: These pages are used to collect user information, like names and email addresses, to build an email marketing list. They often offer something of value, like an eBook or a webinar registration, in exchange for the user's information.

Sales Landing Pages: The goal of these pages is to sell a product or service directly. They often include detailed product descriptions, testimonials, and strong calls to action.

Click-Through Landing Pages: These are used to warm up potential customers before sending them further into the marketing funnel, such as an e-commerce shopping cart or registration page.

Splash Pages: These are introductory pages that users see before they get to the actual website. They might be used to promote a specific product or offer, or to ask users to choose a language or region.

Content Landing Pages: These are used to offer high-quality content, like blog posts, articles, or videos, in exchange for user information. The content is usually related to the product or service being promoted.

Viral Landing Pages: These pages are designed to be shared on social media. They might contain a game, a funny video, or a controversial piece of content.

Microsites: These are small websites, separate from a company's main website, dedicated to a specific product, service, or campaign.

The Hybrid Strategy​

A hybrid landing page combines informative content with sales content to increase traffic and lead generation. This strategy has proven effective for various businesses, with some reporting it as their highest-converting landing page.

Outline​

  1. Topic and Title
  2. Write the Content
  3. Bridge the Solution
  4. Highlight benefits
  5. Showcase testimonials
  6. Simple process
  7. Beneficial outcomes
  8. Final Call-to-action

Topic and Title​

  1. Identify the main problem your business solves for customers.
  2. Use AI tools like ChatGPT to brainstorm engaging topic ideas.
  3. Create an intriguing title that addresses the problem without using colons.

Write the Content​

  1. Start by connecting with the reader over their problem.
  2. Make the problem relatable by providing specific examples.
  3. Transition to a positive outlook, offering hope for a solution.
  4. Write the main content, which can be in a list format (e.g., 5 tips or steps).
  5. Aim for at least 1,000 words if targeting search traffic.

Bridge the Solution​

  1. Use a transitional sentence to move from content to sales.
  2. Introduce yourself or your company, explaining your passion and expertise.
  3. Include a photo to build trust.
  4. Add your first call-to-action (CTA) button with specific action text.

Highlight Benefits​

  1. Focus on three main benefits, not features.
  2. Use ChatGPT to help translate features into benefits if needed.
  3. Include icons or images to represent each benefit visually.

Showcase Testimonials​

  1. Use video testimonials if available.
  2. Choose testimonials that highlight real results or address common objections.
  3. Format testimonials with powerful headlines and bold key phrases.
  4. Include a five-star graphic, customer name, and photo if possible.

Simple Process​

  1. Create a three-step process to show how customers can get started.
  2. Make the steps clear and easy to understand.
  3. Simplify your work process to make it appear effortless for the client.

Beneficial Outcomes​

  1. Include a comprehensive list of features to appeal to logical decision-making.
  2. Provide brief descriptions for each feature.

Final Call-to-Action​

  1. Create a simple CTA block asking if they're ready to get started.
  2. Use clear, action-oriented text on the CTA button.

By following this playbook, you can create a hybrid landing page that effectively combines informative content with sales elements, potentially tripling your traffic and doubling your leads.

Positioning​

Who are your target audience? What makes them tick? What would drive them to take decisive action?

  • What are their needs and pain points?
  • How specifically will you help them?
  • What triggers the demand for your service?
  • Where will you reach them?

Collect user stories to identify triggers and prove demand for desired outcomes.

Conversion Flow​

Conversion funnel/flow, the steps a user takes until they are "converted" to take the primary desired action. Each element of a landing page should be designed with the goal of triggering a specific action.

The headline, copy, images, form, and call-to-action should all work together to persuade the visitor to take the desired action. Any elements that don't contribute to this goal can be distractions that reduce the effectiveness of the page.

Landing pages need to be tested and optimized over time. This can involve changing the copy, adjusting the design, or experimenting with different calls-to-action. By tracking the performance of your landing pages and making continual improvements, you can increase their effectiveness and achieve better results from your marketing efforts.

Lastly, landing pages are not one-size-fits-all. Different campaigns and objectives might require different types of landing pages. It's important to match the type of landing page to your specific marketing goal and audience needs.

Question

What does progress look and feel like?

Design and Build​

Using AI to build a Landing Page.

Review UX Design Protocols to Clarify Intent and Desired User Flow.

  1. Open v0.dev (sign up for free)
  2. Copy and Paste the following AI Prompt into the chat
  3. Enter instructions between the XML meta tags Enter your instructions
  4. Unless you have technical requirements, you can leave this section as is
  5. Use follow-up prompts to iterate on the design
  6. See a list of notable designers to consider for inspiration

AI Prompt​

See prompt engineering for more detailed instructions on best practices.

<prompt>
  <role>You are a world renowned expert in creating high converting Landing Pages</role>
  <task>Create a landing page for {product or service name} with the following specifications.</task>
  <target_audience>REPLACE-ME</target_audience>
  <primary_goal>{lead generation, sales, sign-ups}</primary_goal>
   <content>
    <business_name>REPLACE_YOUR_BUSINESS_NAME</business_name>
    <type_of_solution>Service | Product</type_of_solution>
    <value_proposition>REPLACE_WITH_YOUR_VALUE_PROPOSITION</value_proposition>
    <features_benefits>
      Key features and benefits:
      <item>REPLACE_WITH_FEATURE_BENEFIT_01</item>
      <item>REPLACE_WITH_FEATURE_BENEFIT_02</item>
      <item>REPLACE_WITH_FEATURE_BENEFIT_03</item>
    </features_benefits>

    <call_to_action>REPLACE_WITH_CTA</call_to_action>
  </content>

  <aesthetic_design>
    <design_style>MODERN | MINIMALIST | BOLD | PLAYFUL</design_style>
    <heading_font>Playfair Display</heading_font>
    <body_font>Source Sans Pro</body_font>
    <color_palette>
      <base>White (#FFFFFF)</base>
      <primary>Dark blue (#003366)</primary>
      <secondary>Light blue (#4D9FEC)</secondary>
      <accent>Orange (#FF9900)</accent>
      <neutral>Light gray (#F5F5F5)</neutral>
    </color_palette>
    <design_inspiration>REPLACE_WITH_DESIGNER</design_inspiration>
  </aesthetic_design>

  <sections>
    Required Sections:
    <cta_button include="true">
      <email_link>REPLACE_WITH_CONTACT_EMAIL</email_link>
    </cta_button>
    <hero include="true"></hero>
    <features include="true"></features>
    <social_proof include="true">
      Social proof
      <testimonials include="false">testimonials</testimonials>
      <trust_indicators include="true"/>
    </social_proof>
    <faq include="false">FAQ section</faq>
  </sections>

  <technical>
    Technical Requirements:
    <animations include="true">Framer Motion</animations>
    <responsive_design>Mobile First</responsive_design>
    <seo>Optimize for SEO</seo>
    <tech_stack include="true">Please build as T3 App with Nextjs</tech_stack>
  </technical>

  <best_practices>
    Please aim for perfect balance across.
    <inclusive_design>Highest Priority</inclusive_design>
    <visual_design>Scale, Visual Hierarchy, Balance, Contrast, Gestalt Principles</visual_design>
    <lighthouse_score>100% Lighthouse Score</lighthouse_score>
  </best_practices>

  <instructions>
    Please generate a landing page that guides visitors towards a clear call-to-action.

    Please double check best practices to achieve the highest UX metrics for a high converting landing pages.
  </instructions>

  <design_images include="false">
    Please refer to the attached images as the style guide
  </design_images>

</prompt>

UX Follow-up Prompt​

See design review above for tips.

<prompt>
  <task>Please review and ensure best practices for accessible / inclusive web design</task>
  <requirements>
    - Ensure mobile first design with good readability of text on all screen sizes
    - Use a color palette that provides sufficient contrast between text and background colors. Aim for a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, as per WCAG 2.1 guidelines.
    - Ensure color is not the only means of conveying information. Use additional visual cues like patterns, icons, or labels.
    - Include ARIA attributes in HTML elements to enhance accessibility for users of assistive technologies.
    - Structure the page using semantic HTML elements like `<header>`, `<nav>`, `<main>`, and `<footer>`.
    - Provide text alternatives for images using `alt` attributes.
    - Ensure interactive elements like buttons and links have clear :focus and :hover states.
  </requirements>

  <deliverables>
    - Color palette with hex codes and contrast ratios
  </deliverables>
</prompt>

Iteration​

  1. Learn (Research new tools & techniques)
  2. Play (Mess around)
  3. Map Flow (Inputs, Actions, Outputs)
  4. Plan (Estimate Time, Costs)
  5. Act (MAKE SHIP HAPPEN)

Review​

How well does the landing page design align with intended objectives?

Checklist​

  • Value Proposition: Explain value of the product/service upfront
  • Clear and Compelling Headline: The headline is often the first thing visitors see, so it should be clear, compelling, and communicate your unique selling proposition.
  • Single Strong Call to Action (CTA): The CTA should be clear and direct, telling visitors exactly what action you want them to take.
  • High-Quality Images: Use high-quality, relevant images to engage visitors and illustrate what you're offering.
  • Customer Testimonials: These can build trust and credibility.
  • Minimal Distractions: Remove anything that isn't essential to the goal of the page. This includes navigation menus, links to other parts of your website, and excessive information.
  • Mobile Optimization: Ensure your page looks good and functions well on mobile devices.
  • Fast Load Times: Slow load times can lead to high bounce rates.
  • Easy-to-Complete Forms: If you're collecting user information, make the form as easy to complete as possible.

See UX Design for more details on best practice design principles.

Design Failures​

Common mistakes to avoid when designing landing pages.

  • Too many competing calls-to-action which can reduce conversions
  • Unclear what the main action is for users to take

Products​

Leading SaaS Landing Page Products in the market.

Integrations:

Technology​

Requirements of a tech stack for engineering landing pages that convert.

Functionality​

  • Mobile First Design
  • Light and dark theme
  • SEO friendly with RSS feed, sitemaps
  • Easy styling customization
  • Table of Contents Component
  • Multi-choice Newsletter Subscription
  • Blog Templates
  • Support for nested routing of blog posts
  • Support for multiple authors

Performance​

  • Automatic image optimization
  • Near perfect lighthouse score
  • Lightweight, fast first load of JS
  • Self-hosted fonts
  • Supports a range of (Google) analytics tools

Architecture​

See product engineering for more.

Element / ToolDecision
UX Designv0.dev, galileo.ai
AI CodingCursor AI
FontsFonts
Image HostingImageKit
Content Management (optional)Payload CMS
AB TestingPosthog