Team 4 · B2B SaaS Landing Page Reference

Inbound Engine Component Framework

A working reference for B2B SaaS marketing pages. Forty-one components, ten page recipes, twenty-four behavioural principles. Same library, different assemblies. Built for teams who want consistency at scale, and a faster path from brief to launched page.

New here?

Read the introduction. Five minutes to understand how the document works.

Planning a page?

Jump to a template recipe. Find the page type you're building.

Looking for a block?

Browse the component library. Or search the sidebar by name.

Introduction · Read first

Internal Reference Manual

What this is

A working reference for B2B SaaS landing pages. Forty-one reusable components in twelve categories, ten page-template recipes showing how those components assemble into the common page types, and twenty-four behavioural principles explaining why each block does the job it does.

It's opinionated on purpose. Every component, every recipe, every annotation comes from what we've seen work across hundreds of B2B SaaS pages, and what we've seen quietly fail. Where there's a trade-off, the document picks a side and tells you why.

Why component-first

Most B2B SaaS marketing sites get designed page by page. The homepage gets one creative treatment. Pricing gets another. Product gets a third. Six months in, three different templates are doing similar jobs in different ways. Internal links are tangled. Every new page becomes a fresh design exercise.

Component-first fixes that. Pages stop being designs and become recipes, ordered stacks of pre-decided components. A new page is 80% structural decisions you've already made and 20% content. Pages launch faster. The design system stays coherent. The conversion experience is consistent across the funnel. It also matches how the tooling actually works. Webflow has Components. HubSpot has Modules. Every modern CMS works in blocks.

How to read this document

01 · Component Library

The inventory. Each component has a wireframe, the behavioural principles it uses, the variants worth knowing about, and the templates it shows up in. Use it to look up a specific block.

02 · Page Templates

The recipes. Each template shows the components in order with notes on why this stack and not another. Use it to plan or evaluate a specific page.

03 · Psychological Principles

The reference appendix. Twenty-four behavioural levers, one paragraph each. Useful for defending a structural choice, briefing a copywriter, or pressure-testing a competitor's page.

If you're a client

Use this to understand the structure we're proposing for your site, and to push back on it. The wireframes are deliberately rough so the conversation stays on what goes where and why, not on colours, fonts or animation. Brand and visual layer come on top once the structure is agreed.

Read the page templates first. Find the page types that match what you're building (homepage, pricing, product, etc.), look at the assembled stack, and read the assembly notes to understand why each block is there. If a block doesn't make sense for your business, tell us. The recipe is a starting point, not a contract.

Click any component in a stack to jump to its detail. Use the search in the top-left to find a specific block by name.

If you're a designer

Treat this as the structural constraint for your design work. The components define what kinds of blocks can exist. The templates define which blocks go where for each page type. Within those, you have full freedom on typography, spacing, imagery, motion and micro-interaction.

Start with the template you're designing. Read the assembly notes to understand why the stack is built this way before you change anything. If you want to break a structural rule, read the component's annotations first. Most rules can be broken. Some are load-bearing.

Each component and template has Download PNG and Copy image buttons underneath the wireframe. Drop the image into Figma as a reference layer and build your design from there.

What this is not

Not a brand book

Colours, fonts, spacing scales and component aesthetics belong in a separate design system. This document is structural only.

Not a CMS schema

Components map cleanly to Webflow and HubSpot modules but the technical build needs its own spec. This is the model, not the build.

Not pixel-perfect

Numbers, layouts and proportions are indicative. The wireframes are rough on purpose. Fidelity goes up at the design stage, not here.

Not the only way

Other taxonomies of B2B SaaS pages exist. This one is how Team 4 thinks about the problem. We argue for it. We also know other framings work.

Annotation key

Principle behavioural or cognitive lever applied · Evidence research, study, or data behind the choice · Watch common mistake to avoid

Category 01 · 2 components

Navigation

The header is the first conversion choice every visitor makes. Nav density and link choice signal what kind of page they've landed on. Two variants cover the full funnel.

C01.1

Standard nav

LOGO

PRODUCT ▾SOLUTIONS ▾RESOURCES ▾PRICINGCUSTOMERS

Purpose

Persistent top-of-page navigation for marketing pages. 5 main links max plus dual CTA. The primary CTA (Book Demo) sits visually distinct from the secondary (Sign In).

Principles applied

Hick's Law Visual hierarchy

Watch out for

No more than 5 nav links

Variants

Default Product / Solutions / Resources / Pricing / Customers
Pre-product Drop Pricing if not public, swap for "Why us"
Sticky Adds shadow on scroll, keeps demo CTA visible

Used in

Homepage, Use Case, Industry, Role, Product, Story, Lead Magnet, Comparison, Pricing

C01.2

Stripped nav

LOGO Need help? hello@brand.com

No menu · No footer links · No exits

Purpose

Conversion-only header for demo, signup, and high-intent landing pages. Strips every navigation choice so the only forward path is the form on the page.

Principles applied

Distraction reduction 20–40% lift on demo conversion

Variants

Logo only Pure minimum, no contact link
Logo + email Adds a low-friction contact for last-resort questions
Logo + phone Enterprise demo pages where direct contact builds trust

Used in

Book a Demo, paid landing pages, signup flows

Category 02 · 5 components

Heroes

The hero is the page's contract. It says what this page is, who it's for, and what the next step is. Five hero patterns cover the full set of B2B SaaS page jobs.

C02.1

Outcome hero

EYEBROW (OPTIONAL)

Outcome-led headline that names the result the buyer wants in their language

PRIMARY CTA SECONDARY CTA

★★★★★ 4.8 · G2 LEADER · SOC 2

PRODUCT SCREENSHOT / HERO IMAGE

Purpose

The most-used hero pattern for B2B SaaS. Leads with the outcome the buyer wants, supports it with one specific subhead, and offers a primary CTA (high-intent) plus a secondary (low-intent escape valve).

Principles applied

JTBD framing Loss aversion Specificity heuristic

Watch out for

Avoid feature-led headlines

Variants

Image right Default. Eye lands on headline, then image anchors meaning
Image left Used when image is metaphor, not product
Centered No image. Used for high-conviction copy plays or pricing/landing pages
With video Replace image with auto-playing muted product clip (60s max)

Used in

Homepage, Use Case

C02.2

Audience hero

FOR [INDUSTRY / ROLE]

Built for [Construction firms / RevOps leaders] who [specific job to be done]

SEE [INDUSTRY] DEMO [INDUSTRY] CASE STUDY

INDUSTRY-SPECIFIC IMAGE / SCREENSHOT

Purpose

Tells a specific audience "this product was built with you in mind". Names the audience explicitly in the eyebrow tag and headline. Far more persuasive than a generic outcome hero for vertical or persona pages.

Principles applied

Liking Specificity heuristic Self-reference effect

Variants

By industry "Built for construction", eyebrow + industry-specific image
By role "Built for RevOps leaders", eyebrow + role-relevant dashboard
By company size "Built for mid-market", eyebrow + scale-relevant proof

Used in

Solutions / Industry, Solutions / Role

C02.3

Product hero

[PRODUCT NAME]

What the product is, in one sentence, with the primary capability named

START FREE TRIAL WATCH 2-MIN TOUR

REAL UI SCREENSHOT (NOT ABSTRACT)

Purpose

Used on Product pages where the visitor already knows roughly what they want and is evaluating capability. The hero image is a real, specific UI screenshot, not abstract art. Show, don't suggest.

Principles applied

Specificity Real screenshots beat illustrations on conversion

Watch out for

No mystery boxes or abstract gradients

Variants

Static screenshot Single product view, annotated
Loop video 5–8 second silent product loop, no controls
Interactive Live mini-product or click-through demo embedded

Used in

Product pages

C02.4

Story hero

CUSTOMER LOGO

"Headline result quote that names the metric and the outcome"

, PERSON NAME · ROLE · COMPANY

73%

METRIC LABEL

12hrs

METRIC LABEL

Purpose

Customer-story page hero. Logo + headline metric quote front-loads the entire payoff. The visitor knows in 5 seconds whether this story is relevant to them. The 3-up metric strip below the quote anchors the rest of the read.

Principles applied

Anchoring Specificity heuristic Social proof

Variants

Quote-led Default. Big quote + 3 metrics
Metric-led Lead with the biggest single metric, quote below
Video story Replace quote with embedded 60–90s customer video

Used in

Customer Story

C02.5

Form hero

Action-oriented headline ("See [Product] in 30 minutes")

WHAT YOU'LL SEE

• Bullet 1
• Bullet 2
• Bullet 3
• No obligation

SHORT QUOTE / LOGO STRIP

FORM

BOOK DEMO

Purpose

Conversion-page hero. Form sits on the right (where the eye lands after scanning the headline left-to-right). Left side carries supporting context: what the prospect will see, short proof, and uncertainty reducers.

Principles applied

F-pattern Uncertainty reduction Distraction reduction

Variants

Demo form 4–6 fields, books a sales call
Inline calendar Replace form with embedded Calendly/Chili Piper
Lead magnet Email-only, gated download
Free trial Email + work email validation, no sales touch

Used in

Book a Demo, Lead Magnet, paid landing pages

Category 03 · 4 components

Trust & social proof

Borrowed credibility blocks. Used early to validate the buyer's instinct, repeated late to nudge action. Density and recognisability matter more than count.

C03.1

Logo bar (full)

TRUSTED BY 5,000+ TEAMS

LOGO 1

LOGO 2

LOGO 3

LOGO 4

LOGO 5

LOGO 6

Purpose

Borrowed credibility immediately after the hero. Validates the buyer's "is this legitimate?" check before they invest more time. 6 logos is the sweet spot, fewer feels thin, more feels like a brag.

Principles applied

Social proof Authority transfer

Watch out for

Five logos from buyer's segment beats fifty mixed

Variants

Static 6 logos in a single row
Marquee Animated horizontal scroll for 12+ logos
Industry-filtered Logos auto-filtered by visitor's vertical
With caption "Trusted by 5,000+ teams" / "Used by 3 of the Fortune 50"

Used in

Homepage, Use Case, Industry, Product, Pricing

C03.2

Compressed logo strip

JOINING 5,000+ TEAMS:

Purpose

Thin reinforcement band placed mid-page or near a CTA. Smaller, denser, less prominent than the full logo bar. Bandwagon nudge at the moment of consideration.

Principles applied

Bandwagon Reinforcement

Variants

Inline caption "Joining X teams" leading caption
Pre-CTA band Thin band immediately before final CTA
Mid-feature Between feature deep-dives to maintain trust momentum

Used in

Homepage, Demo, Pricing, Product

C03.3

Stats bar

12.4M+

METRIC LABEL

98%

METRIC LABEL

5,000+

METRIC LABEL

Purpose

Three big numbers that quantify the brand's scale, accuracy, or impact. Specific numbers beat round ones, "12.4M users" lands harder than "millions of users". Used as a credibility anchor at any point in the page.

Principles applied

Specificity heuristic Anchoring

Variants

Brand stats Users, customers, scale metrics
Outcome stats Avg ROI delivered, hours saved, etc.
Story stats 3 headline metrics from a single customer (in story hero)

Used in

Homepage, Customer Story, Product, Lead Magnet

C03.4

Awards / analyst row

G2 LEADER

SPRING 2025

GARTNER

PEER INSIGHTS

SOC 2

TYPE II CERTIFIED

FORRESTER

WAVE STRONG PERFORMER

Purpose

Third-party endorsements that transfer credibility. Most useful in industries where buyers reference analyst reports (mid-market and enterprise B2B SaaS). Below the logo bar in trust hierarchy but above customer testimonials.

Principles applied

Authority transfer Risk reduction

Watch out for

Don't pad with vanity awards

Variants

4-up grid Default. G2 / Gartner / Forrester / Compliance
Inline strip Below trust bar as a single thin row
Linked Each badge clicks through to source report

Used in

Homepage, Industry, Product, Pricing, Demo

Category 04 · 5 components

Problem & value

The middle of the page does the persuasion work. These components frame the buyer's current pain, name the alternative, and turn features into outcomes the buyer actually cares about.

C04.1

Status quo block

"Without [Product], teams are stuck with…"

PAIN 1

Specific frustration

PAIN 2

Specific frustration

PAIN 3

Specific frustration

Purpose

Frames the buyer's current situation as the loss. Three concrete pain points using the buyer's own language, not generic "manual processes" but "Friday afternoons rebuilding the same report from scratch". Loss aversion makes the rest of the page feel urgent.

Principles applied

Loss aversion Liking

Watch out for

Specific pain > generic pain

Variants

3-up cards Default. Three named pains
Before / After Two-column status quo vs with-product comparison
Cost framing "Without X, teams lose Y hours / Z dollars"

Used in

Use Case, Industry, Role, Comparison

C04.2

Value trio

ICON

Outcome benefit 1

ICON

Outcome benefit 2

ICON

Outcome benefit 3

Purpose

Three outcome promises in one row. Each card states the benefit (not the feature) the buyer gets. Sets up the page's value proposition before deeper proof and feature content arrives.

Principles applied

JTBD framing Hick's Law (3, not 5)

Variants

Icon + text Default
Numbered 01 / 02 / 03 framing for sequence
Quote-anchored Each benefit anchored to a customer quote

Used in

Homepage, Use Case, Industry, Role

C04.3

How it works (3-step)

From problem to outcome in three steps

Step 1 verb-led

SCREENSHOT / ILLUSTRATION

Step 2 verb-led

SCREENSHOT / ILLUSTRATION

Step 3 verb-led

SCREENSHOT / ILLUSTRATION

Purpose

Reduces perceived complexity by chunking the product experience into three sequential steps. Particularly useful for products with non-obvious workflows. Each step is verb-led ("Connect", "Configure", "Launch") to imply user agency.

Principles applied

Chunking Uncertainty reduction Commitment ladder

Variants

3-step horizontal Default
Vertical timeline For longer or more sequential processes
Animated Each step animates in on scroll

Used in

Use Case, Product, Lead Magnet

C04.4

Day in the life

"Your week with [Product]"

BEFORE

Monday morning today

AFTER

Monday morning with [Product]

Purpose

Empathy-led narrative block specifically for role-based pages. Walks through a typical day in the buyer's shoes, the meetings they sit in, the reports they build, the questions they get from leadership. Shows the product understands their world.

Principles applied

Liking Self-reference effect Loss aversion (before)

Variants

Before / After Two-column comparison
Hour-by-hour Timeline narrative through a day
Role calendar Visual week showing where the product fits

Used in

Solutions / Role

C04.5

Feature deep-dive (alternating)

CAPABILITY 01

Feature headline named as outcome

SEE IT IN ACTION

SCREENSHOT

CAPABILITY 02

Feature headline named as outcome

SEE IT IN ACTION

Purpose

Alternating left/right blocks giving each major capability its own focused moment. The alternation breaks visual monotony and gives the eye a natural rhythm. 2–4 deep-dives is the sweet spot.

Principles applied

Visual rhythm JTBD framing

Watch out for

Headlines should name outcomes, not features

Variants

Image alternates Default. L/R/L/R rhythm
Image consistent side All screenshots on the right (less varied but more scannable)
With micro-CTA Each block has its own demo or doc link

Used in

Use Case, Product, Industry, Role

Category 05 · 3 components

Product showcase

Components that show what the product does instead of telling you about it. They bridge the gap between abstract value claims and concrete capability.

C05.1

Tabbed product showcase

TAB 1

TAB 2

TAB 3

TAB 4

Tab 1 capability headline

SCREENSHOT FOR ACTIVE TAB

Purpose

Compresses 3–5 capabilities into a single scroll-position by tabbing between them. The visitor self-selects which capability to look at, useful when you can't predict which is most relevant.

Principles applied

Choice architecture IKEA effect

Watch out for

Don't bury content behind tabs that should be SEO-indexed

Variants

Horizontal tabs Default. 3–5 tabs across the top
Vertical tabs Tabs on the left, content on the right (better for longer labels)
Auto-cycle Tabs rotate automatically every 5–7 seconds

Used in

Homepage, Product

C05.2

Capabilities grid (6 tiles)

ICN

Capability 1

ICN

Capability 2

ICN

Capability 3

ICN

Capability 4

ICN

Capability 5

ICN

Capability 6

Purpose

Six-tile grid summarising the full capability surface. Used on Product pages where the buyer wants to see the whole map at once. Each tile is small but scannable. 6 is the upper limit before cognitive load becomes a problem.

Principles applied

Chunking F-pattern reading

Watch out for

Don't exceed 6 tiles in one grid

Variants

3×2 default Most balanced layout
4×2 dense 8 tiles for detailed product surface
Linked tiles Each tile clicks through to a feature page

Used in

Product

C05.3

Interactive demo / product video

"See it in action, no signup needed"

▶ INTERACTIVE PRODUCT TOUR / EMBEDDED VIDEO

Navattic / Storylane / Tella / direct embed

EXPLORE LIVE PRODUCT

Purpose

The single highest-value block on a Product page. Lets the visitor experience the product without the friction of signup. Interactive tools (Navattic, Storylane) outperform static video because they create the IKEA effect, investment of effort builds attachment.

Principles applied

IKEA effect Friction removal Interactive tours convert 2–3× better than video alone

Variants

Interactive tour Click-through clone of real product
Product video 60–90s narrated walk-through
Auto-loop Silent looping clip (5–8s) for above-the-fold use
Sandbox Live read-only product environment

Used in

Homepage, Product, Use Case

Category 06 · 6 components

Proof & differentiation

Where the page earns trust and stakes its position. These blocks show specific outcome evidence, name peers who've succeeded, and (used right) acknowledge where competitors do better.

C06.1

Featured customer + metrics

CUSTOMER LOGO

"How [Customer] achieved [outcome] with [Product]"

READ THE STORY

73%

METRIC

12hrs

METRIC

£2.4M

METRIC

Purpose

One named customer + 3–4 quantified results + a click-through to the full story. Anchors the entire page's value proposition with concrete evidence. Pick the customer whose profile most closely matches the page's intended audience.

Principles applied

Social proof Specificity heuristic Anchoring

Variants

Quote + metrics Default. Quote on left, metrics on right
Video story Embedded customer video replaces quote
Carousel Cycle through 2–3 featured customers
Match-by-segment Auto-pick based on visitor's industry/role

Used in

Homepage, Use Case, Industry, Role

C06.2

3-up testimonials

"Quote 1, specific outcome named"

PHOTO

NAME

ROLE · COMPANY

"Quote 2, different angle, peer named"

PHOTO

NAME

ROLE · COMPANY

"Quote 3, third dimension, balance"

PHOTO

NAME

ROLE · COMPANY

Purpose

Three short quotes, each from a named person at a recognisable company, each making a slightly different point. Photos and full attributions are non-negotiable, anonymous quotes destroy trust faster than no quotes.

Principles applied

Social proof Authority transfer

Watch out for

Never use anonymous quotes

Variants

3-up cards Default
Carousel Cycle through 6+ quotes
Mixed sources Mix customer quotes with G2/Capterra reviews (cite source)
Role-grouped All from same role/segment for relevance density

Used in

Homepage, Product, Pricing, Comparison

C06.3

Pull quote

"A single quote that makes the whole page argument in 15 words or less."

, PERSON NAME · ROLE · COMPANY

Purpose

A single oversized quote used as a section break or as the emotional centre of a customer-story page. Distinct from the 3-up testimonials block, this one is meant to land, not be skimmed. Pick the strongest, most specific quote you have.

Principles applied

Liking Anchoring Visual breathing room

Variants

Centered Default. Stands alone between sections
With photo Adds attribution photo for additional liking
Large display Full-bleed coloured background, hero-scale type

Used in

Customer Story, Use Case, Industry

C06.4

Why choose us teaser

"How we compare"

✓

Differentiator 1

✓

Differentiator 2

✓

Differentiator 3

SEE FULL COMPARISON

Purpose

Lightweight differentiation block, three positioning points + a CTA to the full comparison/competitor page. Used on Homepage and high-traffic pages to plant the differentiation seed without committing to a full comparison block.

Principles applied

Differentiation Curiosity gap Click-through bridge

Variants

3 pillars Default. Three named differentiators
Counter-positioning "Most tools do X; we do Y" framing
Stat-led Each differentiator anchored to a number

Used in

Homepage, Product, Pricing

C06.5

Side-by-side comparison table

FEATURE

YOU

THEM

Feature row 1

✓

Feature row 2

✓

Limited

Feature row 3

✓

Feature row 4

✓

Purpose

Detailed feature-by-feature comparison against a named competitor or competitor category. Most powerful when honest, including the rows where the competitor wins or matches. Buyers verify these tables, so accuracy matters.

Principles applied

Two-sided argument effect Specificity

Watch out for

Don't cherry-pick, buyers will check

Variants

vs single competitor 2-column comparison
vs multiple 4-column comparison (you + 3 competitors)
Grouped by category Sections for "Core", "Integrations", "Support" etc.
Tooltips Hover row labels for nuance/explanation

Used in

Comparison, Product, Pricing

C06.6

"Where they win" honest block

HONEST TAKE

When [Competitor] is the better choice

Specific scenario where competitor wins
Specific use case where competitor wins
Specific buyer profile where competitor wins

Purpose

The single highest-trust block in the document. Acknowledges where the competitor is genuinely a better choice. Rare in B2B SaaS pages because it feels counterintuitive, but it's exactly because of that rarity that it works. Buyers trust everything else more after reading it.

Principles applied

Two-sided argument effect Hovland et al. (1949) Trust signalling

Variants

Standalone block Default. Own section
"Choose us if / Choose them if" Two-column verdict near top of comparison page
Inline within comparison Acknowledged inside the comparison table footer

Used in

Comparison

Category 07 · 4 components

Conversion

The blocks where the page asks for the action. Pricing structure, ROI evidence and CTA blocks. The forms get their own category.

C07.1

Pricing tier cards

ANNUAL · SAVE 20%

MONTHLY

STARTER

£X/mo

START FREE

Purpose

Three pricing tiers with the middle highlighted as "Most Popular". Annual default toggle anchors a discount narrative. The middle tier is the desired conversion outcome, its prominence is intentional, not decorative.

Principles applied

Decoy effect Anchoring Loss aversion (annual save)

Watch out for

Three tiers, not five

Variants

3-tier with highlighted middle Default decoy structure
Free + paid 1 free + 2 paid for freemium products
Self-serve + sales-led Public price for low tier, "talk to us" for higher
Per-seat slider Adds dynamic seat count for buyer self-quoting

Used in

Pricing, Homepage (teaser variant)

C07.2

Pricing feature matrix

FEATURE

STARTER

GROWTH

SCALE

CORE

Feature row

✓

Feature row

Unlimited

ADVANCED

Feature row

✓

Purpose

Detailed feature-by-tier breakdown for buyers in evaluation mode. Grouped by category (Core / Advanced / Enterprise) to reduce cognitive load. Highlights the recommended tier across all rows for visual continuity.

Principles applied

Chunking Visual hierarchy

Variants

Grouped categories Default. Sections by feature category
Flat list All features in one ungrouped list
Collapsible sections Expand/collapse each category

Used in

Pricing

C07.3

ROI calculator

Calculate your ROI

YOUR ESTIMATED ANNUAL SAVINGS

£124,800

SEE PERSONALISED DEMO

Purpose

Lets the buyer input their own numbers (team size, current cost, hours, etc.) and see a personalised ROI figure. The act of entering their own data builds investment in the result. Output anchors the price as a fraction of value, not a cost.

Principles applied

IKEA effect Anchoring Specificity

Variants

3-input quick Default. Three sliders/inputs and a result
Full calculator 6+ inputs with detailed breakdown
Email-to-receive Calculator output sent as PDF (lead capture variant)
Comparison-mode Shows ROI vs not buying + vs competitor

Used in

Pricing, Use Case, Comparison, Lead Magnet

C07.4

Final CTA block

Final headline that names the action and the outcome

Supporting line that removes the last objection

PRIMARY CTA SECONDARY CTA

NO CREDIT CARD · 14-DAY FREE TRIAL

Purpose

The page's last conversion ask before the footer. Visually distinct from the rest of the page (inverted background) to break the scroll rhythm and demand attention. Dual CTA gives high-intent and low-intent visitors a path forward.

Principles applied

Pattern interrupt Friction removal Risk reduction (no card)

Variants

Inverted block Default. Dark background
Quote-anchored CTA paired with a customer quote
Stat-anchored CTA paired with a single big number
With contact info Includes phone/email for high-intent enterprise

Used in

All marketing pages (universal closer before footer)

Category 08 · 3 components

Forms

Three separate form components. Split on purpose because the right field set, validation and post-submit flow are different for each goal. Don't reuse a single form across all three jobs.

C08.1

Demo booking form

Book a demo

FULL NAME *

WORK EMAIL *

COMPANY *

ROLE *

TEAM SIZE

BOOK DEMO

⌚ 30 MIN · NO OBLIGATION

Purpose

High-intent form for prospects ready to talk to sales. 4–6 fields max, name, work email, company, role, team size, optional message. Direct calendar booking (Calendly/Chili Piper inline) converts 2–3× better than form-then-schedule.

Principles applied

Field reduction Async friction removal

Watch out for

No phone field unless essential

Field rules

Required Name, work email (validated), company, role
Optional Team size, message
Never Phone (unless enterprise), source (use UTM), nice-to-haves
Post-submit Direct calendar slot picker, not "we'll be in touch"

Used in

Book a Demo, Pricing (Scale tier CTA)

C08.2

Signup form (free trial / freemium)

Start free

CONTINUE WITH GOOGLE

, OR ,

WORK EMAIL *

PASSWORD *

CREATE ACCOUNT

NO CREDIT CARD · 14-DAY TRIAL

Purpose

Self-serve signup for product-led growth. Minimum viable form: SSO + email/password. No name, no company, no role, collect that progressively in onboarding once the account exists. Every additional field at this point reduces signup rate.

Principles applied

Field reduction Risk reduction

Watch out for

Progressive profiling, not upfront extraction

Field rules

Required Work email, password (or SSO)
SSO first Google/Microsoft button above email field
Validation Block free-mail domains if B2B-only
Post-submit Onboarding flow collects rest progressively

Used in

Product (free trial CTA), Homepage (PLG variant)

C08.3

Lead magnet form

FREE DOWNLOAD

Get the [Asset]

WORK EMAIL *

FIRST NAME (OPTIONAL)

EMAIL ME THE [ASSET]

NO SPAM · UNSUBSCRIBE ANYTIME

Purpose

Email-only gate for an ungated-by-default piece of value (template, benchmark, calculator output, guide). The minimum-viable trade. Don't ask for company, role, or team size, that's what a lead-scoring tool is for, asynchronously.

Principles applied

Reciprocity Field reduction

Watch out for

Don't gate things that should be ungated

Field rules

Required Work email only
Optional First name (improves email personalisation)
Never Phone, company, role at this stage
Post-submit Inline reveal + email delivery, not "check your inbox"

Used in

Lead Magnet, Industry (gated benchmark)

Category 09 · 2 components

Integration & security

Two blocks that close out the practical objections from procurement, IT and security. The people the champion has to sell to internally.

C09.1

Integrations grid

"Works with your stack"

SLACK

HUBSPOT

ZAPIER

GSUITE

TEAMS

JIRA

NOTION

+50

SEE ALL

Purpose

Removes the "will it fit our stack?" objection. Recognisable logos for the most common integrations + a count of the rest. The visitor isn't checking every logo, they're checking that the 2–3 they care about are there.

Principles applied

Risk reduction Authority transfer

Variants

6×2 grid Default. 12 logos + count
Categorised Grouped by CRM / Comms / DevTools etc.
Searchable With filter input for full library
API-led "Plus open API + webhooks" callout

Used in

Homepage, Product, Industry, Use Case

C09.2

Security & compliance row

SOC 2

TYPE II

ISO 27001

CERTIFIED

GDPR

COMPLIANT

HIPAA

READY

SECURITY OVERVIEW →

Purpose

Compliance and certification badges that help the champion answer the security and procurement questions internally. Click-through to a dedicated security page (or PDF one-pager) for the deeper review.

Principles applied

Authority transfer Risk reduction Champion enablement

Variants

4-up badges Default
With link Adds CTA to security overview / Trust Center
Vertical-specific Add HIPAA, FedRAMP, PCI as relevant
Inline strip Compact band as part of footer or final CTA section

Used in

Industry, Product, Pricing, Demo

Category 10 · 2 components

Universal closers

Two components that should sit near the bottom of every marketing page. They do two jobs: handling objections and signalling depth (FAQ), and pushing internal link equity to pillar content (Related). Both matter for GEO and organic search.

C10.1

FAQ block (GEO-optimised)

Frequently asked questions

Question 1, phrased as the user would ask it?

−

Question 2, direct answer in first sentence?

Question 3, covers product, process, pricing, technical?

Question 4, Schema.org FAQPage markup applied?

Purpose

Highest-use GEO block on a B2B SaaS page. Direct-answer format gets extracted by ChatGPT, Perplexity, AI Overviews, and standard SERP rich snippets simultaneously. Also handles late-stage objections that the prospect is too embarrassed to ask in a sales call.

Principles applied

Objection handling FAQPage schema · GEO extraction Cognitive ease

GEO rules

Question format Phrase as the user would naturally search/ask
Direct answer first Give the answer in sentence 1; context in sentences 2–4
Length 4–8 questions per page; answers 40–80 words each
Schema FAQPage JSON-LD on every page using this component
Page-relevant Each page has its own FAQ, don't reuse global FAQ across all pages

Variants

Accordion (closed) Default. Only first item expanded
All open Better for long-scroll readability + GEO indexing
Categorised Grouped by Product / Pricing / Technical / Support
With CTA "Still have questions? Talk to us →"

Used in

Universal, every marketing page

C10.2

Footer

The site's structural anchor. Acts as a navigational fallback for visitors who didn't find what they wanted in the page itself, and as a topical authority signal for search.

C11.1

Standard footer

LOGO

One-line description of the company.

LI X YT

PRODUCT

Features
Integrations
Security
Pricing
Changelog

SOLUTIONS

By industry
By role
By use case
Customers

RESOURCES

Blog
Guides
Free tools
Help center
API docs

Purpose

4-column footer with brand block + Product / Solutions / Resources columns. Bottom strip carries legal links and trust badges. Company / Customers / About usually live in either Solutions or a 5th column depending on volume.

Principles applied

Site architecture Internal linking Trust reinforcement

Linking rules

Pillar links only Every footer link should be a pillar page, not deep secondary content
Match top nav Top-level columns should mirror header IA
Solutions hub Industry / Role / Use Case sub-pages all linked from this column
Trust strip Compliance badges visible on every page via footer

Used in

All marketing pages (except stripped-nav conversion pages)

Category 12 · 4 components

Cross-link navigation

Card grids that link visitors across your segmentation axes (industry, company size, use case, role) without bloating any one page. The point is to capture long-tail search ("estimating software for small contractors") with focused pages, then connect them so the visitor can refine their path. Same library, different entry points.

C12.1

Browse by industry

Built for your industry

SHORT SUBHEAD EXPLAINING THE FILTER

ICN

Industry 1

SEE PAGE →

ICN

Industry 2

SEE PAGE →

ICN

Industry 3

SEE PAGE →

ICN

Industry 4

SEE PAGE →

SEE ALL INDUSTRIES →

Purpose

Links visitors across the industry axis. Lives on Use Case, Role, Product, and Pricing pages where the visitor might want to narrow by their vertical. Drops the visitor onto a focused industry page rather than forcing one bloated all-industries page that would cannibalise the dedicated industry SEO targets.

Principles applied

Topical authority Internal link equity Self-reference effect

Watch out for

Don't link to industries you don't have pages for Match icons to industry conventions, not generic placeholders

Variants

4-up grid Default. Top 4 industries by traffic or strategic priority
6-up or 8-up When industry coverage is broader and all are roughly equal in priority
With logo Replace icon with a recognisable customer logo per industry, doubles as social proof
Filtered to context Auto-hide the current industry on industry-specific pages to avoid self-link

Used in

Use Case, Role, Product, Pricing, Lead Magnet

C12.2

Browse by company size

Right-sized for your team

SHORT SUBHEAD EXPLAINING THE FILTER

SMALL

For small businesses

SEE PAGE →

MID-MARKET

For mid-market

SEE PAGE →

ENTERPRISE

For enterprise

SEE PAGE →

Purpose

Links visitors across the company-size axis. The page they land on names their scale and addresses the specific objections their size has. A small contractor doesn't want enterprise pricing or implementation timelines; an enterprise buyer doesn't want a self-serve tour. Captures long-tail size-qualified search ("estimating software for small contractors") without bloating any one page.

Principles applied

Specificity heuristic Self-reference effect Internal link equity

Watch out for

Use the size labels your buyers actually use Three sizes, not five (Hick's Law)

Variants

3-up cards Default. Small / Mid-market / Enterprise
With seat ranges "Up to 50 seats", "50-500", "500+" for clearer self-qualification
With pricing teaser Add starting price per tier as a softer pricing-page bridge
Industry-aware labels "Solo contractor / Small firm / Large firm" if construction-led, "Startup / Growth / Enterprise" if SaaS-led

Used in

Use Case, Industry, Role, Product, Pricing

C12.3

Browse by use case

Solve your specific job

SHORT SUBHEAD EXPLAINING THE FILTER

ICN

Use case 1

SEE PAGE →

ICN

Use case 2

SEE PAGE →

ICN

Use case 3

SEE PAGE →

ICN

Use case 4

SEE PAGE →

ICN

Use case 5

SEE PAGE →

ICN

Use case 6

SEE PAGE →

Purpose

Links visitors to the most common jobs to be done. Filter to your most-trafficked or most-strategic use cases rather than listing every page you have. Each card sends the visitor to a use-case page that reads as if it was built for that single job, not a generic catch-all.

Principles applied

JTBD framing Topical authority Internal link equity

Watch out for

Filter to top 4-6, not all of them Card titles should be the verb, not the feature

Variants

3×2 grid Default. 6 use cases, all roughly equal priority
4-up 4 use cases when you want each to feel more prominent
Grouped by stage Group cards under "Plan / Build / Measure" or similar workflow stages for context
With workflow tag Small tag showing which workflow stage each use case sits in

Used in

Homepage, Industry, Role, Product, Lead Magnet

C12.4

Browse by role

Built for your role

SHORT SUBHEAD EXPLAINING THE FILTER

ICN

Role 1

SEE PAGE →

ICN

Role 2

SEE PAGE →

ICN

Role 3

SEE PAGE →

ICN

Role 4

SEE PAGE →

Purpose

Links visitors to the role-specific page that matches their job title. Each role page does empathy-first work (Day in the life, role KPIs, peer voice). This block is the entry point. Most useful on Use Case and Industry pages where the visitor has self-qualified by job but not by role.

Principles applied

Self-reference effect Liking Internal link equity

Watch out for

Use the job titles your buyers actually have, not aspirational ones Group adjacent roles, don't fragment

Variants

4-up grid Default. 4 primary buyer personas
3-up When the buying committee is smaller and more concentrated
With function tag Tag each role with its function (Sales / Marketing / Ops) for context
Grouped by team Cluster cards under "Sales team / Marketing team / Engineering team" for clearer scanning

Used in

Use Case, Industry, Product, Lead Magnet

Page Templates · 10 recipes

Page templates

Each page is a recipe. A numbered stack of components in the order they appear on the page, plus notes on the structural choices. Same library, different assemblies. Universal closers (FAQ and Related Content) appear on every template.

STANDARD COMPONENT

UNIVERSAL CLOSER

CONVERSION BLOCK

AWARENESS

Template 01 · 15 components

Homepage

The entry point for unaware traffic, brand search and bookmarked returns. Has to compress the whole pitch into one scrollable surface while leaving routes for every visitor type.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Outcome hero Eyebrow · Optional

Primary CTA Secondary CTA

C · Logo bar

Trusted by 5,000+ teams

D · Status quo "Without [Product], teams are stuck with…"

E · Value trio

F · Tabbed showcase

Tab 1

Tab 2

Tab 3

Tab 4

G · Featured customer + metrics

Read the story →

H · Compressed logo strip

Joining 5,000+ teams:

I · Why choose us teaser How we compare

✓

See full comparison →

J · Integrations grid

100+ integrations · See all →

K · Browse by use case Solve your specific job

See page →

L · FAQ Frequently asked questions

−

M · Related content Continue learning

8 min read →

See the story →

Use free →

N · Final CTA

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Standard navC01.1 02Outcome heroC02.1 · image right 03Logo bar (full)C03.1 04Status quoC04.1 · 3-up cards 05Value trioC04.2 06Tabbed showcaseC05.1 07Featured customer + metricsC06.1 08Compressed logo stripC03.2 09Why choose us teaserC06.4 10Integrations gridC09.1

, Cross-link navigation ,

11Browse by use caseC12.3

, Universal closers ,

12FAQ blockC10.1 13Related contentC10.2 14Final CTA blockC07.4 15Standard footerC11.1

Assembly logic

Visitors land cold. The first 30 seconds answer three questions in order: What is this? Is it for me? Have others like me used it? The Outcome hero (1–2), Logo bar (3), and Status quo (4) handle that triad in sequence.

Mid-scroll the page does the persuasion work: the Value trio frames three outcomes, the Tabbed showcase compresses 3–5 capabilities into a single position, and a single Featured customer anchors it all to a real result. The Compressed logo strip after the customer story is a deliberate "still on the bandwagon" reinforcement before asking for a comparison.

Why this stack and not more

Homepages bloat. The temptation is to add every persona block, every industry callout, every awards row. Resist it. Solutions / Industry / Role get their own pages; the homepage is the lobby that points to them. A clean 14-component homepage outperforms a 22-component one.

Universal closers

FAQ at position 11 captures the "is this real?" objections that the rest of the page generated. Related Content at 12 gives the not-yet-ready visitor a learning path that still keeps them in the brand's content ecosystem. Both apply on every template.

Variants worth testing

Swap Tabbed showcase (06) for Interactive demo (C05.3) on PLG/self-serve products
Add Pricing teaser between Why choose us (09) and Integrations (10) for transparent-pricing brands
Add Awards row (C03.4) between 03 and 04 for analyst-driven categories

AWARENESS

Template 02 · 14 components

Solutions / Use Case

Built around a single job to be done. The visitor knows their problem ("I need to consolidate reporting") but hasn't picked a solution. The page's job is to make the case that this product is the right tool for that specific job.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Outcome hero · JTBD-framed Eyebrow · Optional

Primary CTA Secondary CTA

C · Status quo · loss-framed "Without [Product], teams are stuck with…"

D · How it works (3-step) From problem to outcome in 3 steps

E · Feature deep-dive

See it in action →

F · ROI calculator

Your estimated annual savings

See personalised demo

G · Featured customer + metrics

Read the story →

H · Browse by industry Built for your industry

See page →

See all industries →

I · Browse by company size Right-sized for your team

See page →

J · Browse by role Built for your role

See page →

K · FAQ Frequently asked questions

−

L · Related content Continue learning

8 min read →

See the story →

Use free →

M · Final CTA

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Standard navC01.1 02Outcome heroC02.1 · JTBD-framed 03Status quoC04.1 · loss-framed 04How it works (3-step)C04.3 05Feature deep-diveC04.5 · 3 capabilities 06ROI calculatorC07.3 · quick variant 07Featured customer + metricsC06.1 · matched JTBD

, Cross-link navigation ,

08Browse by industryC12.1 09Browse by company sizeC12.2 10Browse by roleC12.4

, Universal closers ,

11FAQ blockC10.1 · use-case-specific 12Related contentC10.2 · same cluster 13Final CTA blockC07.4 14Standard footerC11.1

Assembly logic

The narrative arc is: here's the job → here's the cost of not solving it → here's how this product solves it → here's what it'd cost vs save → here's someone like you who did it. Status quo at position 3 does the loss-framing work; the rest of the page sells the alternative.

Why no logo bar

Use case pages get qualified traffic from organic search and content links. They've already arrived warm, they don't need the "is this legitimate?" check that homepage logo bars do. The Featured customer (07) does heavier proof work because the visitor is here for the specific job.

The ROI calculator's job

Position 6 is deliberate: after the visitor understands what the product does, before they see the success story. Letting them input their own numbers builds investment, and the output anchors the price as a fraction of value when they hit Pricing later.

FAQ specificity

The FAQ on a Use Case page is use-case-specific: "How long does implementation take for [job]?", not generic product Q&As. Each use case page gets its own FAQ. Don't reuse a global FAQ across all pages, that defeats the GEO benefit.

AWARENESS

Template 03 · 16 components

Solutions / By Industry

A vertical-specific landing for buyers who filter by industry. The page has one job. Convince the visitor that this product was built with their industry's specific constraints, vocabulary and compliance environment in mind.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Audience hero Built for [Industry / Role]

See [audience] demo Read [audience] case study

C · Logo bar · industry-filtered

Trusted by 5,000+ teams

D · Status quo · industry pain "Without [Product], teams are stuck with…"

E · Feature deep-dive · 4 industry use cases

See it in action →

F · Security & compliance row

Security overview →

G · Featured customer · industry match

Read the story →

H · Awards / analyst row

I · Pull quote · industry leader

· Person name · Role · Company

J · Browse by company size Right-sized for your team

See page →

K · Browse by use case Solve your specific job

See page →

L · Browse by role Built for your role

See page →

M · FAQ · industry-specific Frequently asked questions

−

N · Related content Continue learning

8 min read →

See the story →

Use free →

O · Final CTA

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Standard navC01.1 02Audience heroC02.2 · industry variant 03Logo bar (industry-filtered)C03.1 04Status quoC04.1 · industry pain 05Feature deep-diveC04.5 · 4 industry use cases 06Security & compliance rowC09.2 07Featured customer + metricsC06.1 · industry match 08Awards / analyst rowC03.4 · vertical analysts 09Pull quoteC06.3 · industry leader

, Cross-link navigation ,

10Browse by company sizeC12.2 11Browse by use caseC12.3 12Browse by roleC12.4

, Universal closers ,

13FAQ blockC10.1 · industry-specific 14Related contentC10.2 · industry guide + report 15Final CTA blockC07.4 16Standard footerC11.1

Assembly logic

The Audience hero (2) is the entire job of this page in one block: it tells the visitor "this is for you" using their industry's eyebrow tag and vocabulary. The industry-filtered logo bar (3) follows immediately because peer logos in the same vertical are the strongest possible relevance signal.

Where compliance fits

Security & compliance row at position 6 (not at the bottom) because regulated industries (healthcare, finance, construction, public sector) have compliance as a deal-blocker, not a footnote. Putting it mid-page tells the visitor "we know your CISO will ask this and we have answers".

Vertical analyst row

The awards row (8) is industry-specific. Healthcare buyers care about KLAS not G2; construction buyers care about ENR. Generic analyst badges weaken the page. Pick badges the visitor's industry actually trusts.

Lead magnet bridge

The Related content (11) on this page should include at least one industry benchmark or report, gated, with the Lead magnet form. Industry decision-makers respond strongly to peer benchmark data, and it's the start of a long-cycle nurture.

AWARENESS

Template 04 · 15 components

Solutions / By Role

A persona-led page for the practitioner buyer (RevOps lead, Head of Marketing, VP Engineering). Empathy-led structure. Shows the product understands their day, their KPIs and the case they'll have to make to their boss.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Audience hero · role variant Built for [Industry / Role]

See [audience] demo Read [audience] case study

C · Day in the life "Your week with [Product]"

D · Value trio · role-aligned

E · Feature deep-dive · role-relevant

See it in action →

F · Pull quote · peer same role

· Person name · Role · Company

G · Capabilities grid · role KPI dashboard

H · Browse by industry Built for your industry

See page →

See all industries →

I · Browse by company size Right-sized for your team

See page →

J · Browse by use case Solve your specific job

See page →

K · FAQ · role-specific Frequently asked questions

−

L · Related content Continue learning

8 min read →

See the story →

Use free →

M · Final CTA

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Standard navC01.1 02Audience heroC02.2 · role variant 03Day in the lifeC04.4 · before/after 04Value trioC04.2 · role-aligned 05Feature deep-diveC04.5 · role-relevant 06Pull quoteC06.3 · peer same role 07Capabilities gridC05.2 · role's KPI dashboard

, Cross-link navigation ,

08Browse by industryC12.1 09Browse by company sizeC12.2 10Browse by use caseC12.3

, Universal closers ,

11FAQ blockC10.1 · role-specific 12Related contentC10.2 · role guide + template 13Final CTA blockC07.4 · with team toolkit link 14Standard footerC11.1

Assembly logic

The role page is empathy-first. The Day in the life (3) at position 3, sitting before any product talk, signals "we know your week, your meetings, the reports you build on Friday afternoons". Visitors who recognise themselves stay; those who don't bounce, which is fine. Self-qualifying is a feature.

Why a Pull quote here

Position 6 sits between the feature content and the capabilities grid because role-buyers respond strongly to peer voice. A 15-word quote from someone with the same job title at a recognisable company is more persuasive than three customer logos for this audience. Pick the quote where their language matches the page headline.

Capabilities as KPI dashboard

Position 7 frames the capabilities grid around the role's own KPIs: pipeline coverage for RevOps, MQL→SQL conversion for Marketing, deploy frequency for Engineering. The screenshot in each tile is the role's own dashboard view, not a generic product screenshot.

Champion enablement

Many role pages need a "bring it to your team" toolkit, a downloadable one-pager, ROI calculator, internal pitch deck. Treat this as a content choice within the Related content block (09) rather than a separate component. Practitioner buyers need ammunition, not just a demo CTA.

CONSIDERATION

Template 05 · 17 components

Product

For the evaluator. The visitor knows roughly what they want and is comparing capabilities. The page's job is to show (not tell) the full surface, deal with the technical objections, and stand its ground against competitors.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Product hero [Product name]

Start free trial Watch 2-min tour

C · Interactive demo / video "See it in action · no signup needed"

▶ Interactive product tour / embedded video

D · Capabilities grid (6 tiles)

E · Feature deep-dive · 3 capabilities

See it in action →

F · Integrations grid

100+ integrations · See all →

G · Security & compliance row

Security overview →

H · Side-by-side comparison


	✓	−
	✓	Limited
	✓	✓
	✓	−

I · 3-up testimonials

J · Browse by industry Built for your industry

See page →

See all industries →

K · Browse by company size Right-sized for your team

See page →

L · Browse by use case Solve your specific job

See page →

M · Browse by role Built for your role

See page →

N · FAQ Frequently asked questions

−

O · Related content Continue learning

8 min read →

See the story →

Use free →

P · Final CTA · trial + demo dual

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Standard navC01.1 02Product heroC02.3 · real screenshot 03Interactive demo / videoC05.3 04Capabilities grid (6 tiles)C05.2 05Feature deep-diveC04.5 · 3 capabilities 06Integrations gridC09.1 07Security & compliance rowC09.2 08Side-by-side comparisonC06.5 093-up testimonialsC06.2

, Cross-link navigation ,

10Browse by industryC12.1 11Browse by company sizeC12.2 12Browse by use caseC12.3 13Browse by roleC12.4

, Universal closers ,

14FAQ blockC10.1 · technical-leaning 15Related contentC10.2 · docs + spec 16Final CTA blockC07.4 · trial + demo dual 17Standard footerC11.1

Assembly logic

The Interactive demo (3) is non-negotiable. It's the single highest-value block on this template. Evaluators want to touch the product, not read about it. A click-through tour or sandboxed environment beats every other proof asset combined for this page type.

Capabilities first, deep-dives second

Positions 4 and 5 work as a pair: the 6-tile grid gives the evaluator the full map at a glance, then the alternating Feature deep-dive zooms into the 3 most-asked-about capabilities with screenshots and outcome framing. Mapping the surface before diving in respects the evaluator's process.

Why integrations + security mid-page

Both blocks (6, 7) sit before the comparison and testimonials because they're objection-removal, not persuasion. The evaluator is mentally checking boxes: "does it work with X?", "is it SOC 2?". Get those out of the way before asking for the comparison decision.

The comparison block

Position 8 lets this page partly do the job of a vs-competitor page without committing to one. Use a generic "vs alternatives" framing rather than naming a specific competitor, the dedicated comparison templates handle named match-ups.

CONSIDERATION

Template 06 · 9 components + editorial

Customer Story

An editorial format. More long-form than the other page types. The visitor wants a narrative they can mentally place themselves inside (same company size, same industry, same problem). Structured components anchor the story. Long-form text fills the gaps.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Story hero · quote-led + 3 metrics

· Customer name · Role · Company

C · About + Challenge Editorial · long-form text + sidebar

D · Pull quote · centered

· Person name · Role · Company

E · Solution + Screenshots Editorial · prose + product images

F · Featured customer + metrics · results variant

Read the story →

G · Related content · related stories variant Continue learning

8 min read →

See the story →

Use free →

H · FAQ · customer-relevant Frequently asked questions

−

I · Final CTA · "see your version"

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Standard navC01.1 02Story heroC02.4 · quote-led + 3 metrics

03Editorial: About + Challengelong-form text

04Pull quoteC06.3 · centered

05Editorial: Solution + Screenshotsprose + product images

06Featured customer + metricsC06.1 · results variant

, Universal closers ,

Assembly logic

The Story hero (2) front-loads the entire payoff: customer logo + headline result quote + three metrics. The visitor knows in 5 seconds whether this story is relevant to them. Everything after that is the case-building for visitors who self-identified at the top.

Why editorial blocks

Positions 3 and 5 are not in the component library. They're long-form prose with a 2-column layout: a sticky sidebar showing Company / Industry / Size / Tools used, and the main column carrying the Challenge → Solution narrative. Customer stories don't compress well into card grids, let them breathe as editorial.

Pull quote as section break

Position 4 does double duty: visual breathing room between the Challenge and Solution sections, and emotional reinforcement of the customer's voice mid-page. Pick the strongest quote you have, not necessarily the one that sells the product, but the one that sounds most human.

Free Tool / Lead Magnet

A page where the primary KPI is email capture, not demo booking. The lead magnet itself is the headline value. The product gets a soft, late-page mention as the natural next step. Not the first ask.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Form hero · lead magnet variant

What you'll see

Submit

C · Capabilities grid · "what's inside"

D · How it works (3-step) · methodology From problem to outcome in 3 steps

E · Compressed logo strip

Joining 5,000+ teams:

F · Featured customer + metrics · one matched story

Read the story →

G · Final CTA · soft product bridge

Primary CTA Secondary CTA

No credit card · 14-day free trial

H · Browse by industry Built for your industry

See page →

See all industries →

I · Browse by use case Solve your specific job

See page →

J · Browse by role Built for your role

See page →

K · FAQ · about the tool Frequently asked questions

−

L · Related content · adjacent assets Continue learning

8 min read →

See the story →

Use free →

Page assembly · Top → Bottom

01Standard navC01.1 02Form heroC02.5 · lead magnet variant 03Capabilities gridC05.2 · "what's inside" 04How it works (3-step)C04.3 · methodology 05Compressed logo stripC03.2 06Featured customer + metricsC06.1 · one matched story 07Final CTA blockC07.4 · soft product bridge

, Cross-link navigation ,

08Browse by industryC12.1 09Browse by use caseC12.3 10Browse by roleC12.4

, Universal closers ,

11FAQ blockC10.1 · about the tool 12Related contentC10.2 · adjacent assets 13Standard footerC11.1

Assembly logic

The Form hero (2) is the page. The form is above the fold, the lead magnet is the headline, and the rest of the page exists only to nudge unconvinced visitors back up to the form. This is a conversion page wearing content-page clothes, don't bury the form.

Capabilities grid as "what's inside"

Position 3 reuses the Capabilities grid component but with non-product content: it lists what the lead magnet contains (the 8 templates, the 3 frameworks, the 5 case studies). Curiosity-anchored, not feature-anchored. The visitor's next thought should be "I want this".

The soft product bridge

Position 7's Final CTA is deliberately soft. The lead magnet form has already done the hard conversion; this CTA is about graduating engaged readers to a demo conversation later. Frame it as "ready to see how [Product] applies this in practice?", not as the primary ask.

Why the methodology block

How it works (4) at this position previews the framework or methodology behind the lead magnet. It does two jobs: signals the asset's depth before download, and starts establishing the brand's authority on the topic for organic search.

DECISION

Template 08 · 12 components

vs Competitor

A bottom-of-funnel page for high-intent comparison searches. The visitor is comparing named products, not exploring categories. The page wins by being credibly honest. Including where the competitor is genuinely the better choice.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Outcome hero · "X vs Y" headline Eyebrow · Optional

Primary CTA Secondary CTA

C · Where they win

D · Side-by-side comparison


	✓	−
	✓	Limited
	✓	✓
	✓	−

E · Feature deep-dive · 3 wins with proof

See it in action →

F · Featured customer · switcher story

Read the story →

G · Pricing tier cards · teaser

Annual · Save 20% Monthly

Start free

Book demo

Contact sales

H · 3-up testimonials · ex-competitor users

I · FAQ · migration-specific Frequently asked questions

−

J · Related content · migration guide Continue learning

8 min read →

See the story →

Use free →

K · Final CTA

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Standard navC01.1 02Outcome heroC02.1 · "X vs Y" headline 03Where they winC06.6 · positioned high 04Side-by-side comparisonC06.5 · 2-column 05Feature deep-diveC04.5 · 3 wins with proof 06Featured customer + metricsC06.1 · switcher story 07Pricing tier cardsC07.1 · teaser variant 083-up testimonialsC06.2 · ex-competitor users

, Universal closers ,

09FAQ blockC10.1 · migration-specific 10Related contentC10.2 · migration guide + ROI 11Final CTA blockC07.4 · "see if it's right for you" 12Standard footerC11.1

Why honesty up front

The "Where they win" block (3) at position 3 is counter-intuitive but correct. Acknowledging the competitor's genuine strengths early earns the right to be believed for everything that follows. Buyers verify these pages, sandbagging the comparison destroys the page's credibility on the first row they fact-check.

The two-column comparison

Position 4 covers the surface buyers expect: feature-by-feature parity. Don't pad it with rows where you trivially win. Pick rows that genuinely matter to the buying decision and that the visitor will recognise from their evaluation criteria. Group by category if the row count exceeds 8.

Switcher story as proof

Featured customer (6) on this template should be a switcher, someone who used the competitor and moved. Their testimonial naturally addresses the migration objections without you having to raise them. "We were on [Competitor] for 3 years before…" is the strongest possible opening for this audience.

Migration FAQ

The FAQ (9) on this template is migration-specific: data import, contract overlap, training time, parallel-run period. These are the practical objections that block decisions long after the comparison itself is settled. Answer them directly and the buyer is left with no reason not to start.

DECISION

Template 09 · 14 components

Pricing

High-traffic, high-intent page. Visitors arrive with a single question: how much. The page's job is to answer cleanly, justify with comparative anchors, and remove every objection that blocks a self-serve start or a demo request.

Page wireframe, assembled view

ProductSolutions ▾CustomersPricingResources

Sign inGet a demo →

A · Nav

B · Outcome hero · centered, copy-only Eyebrow · Optional

Primary CTA Secondary CTA

C · Pricing tier cards · 3-tier with decoy

Annual · Save 20% Monthly

Start free

Book demo

Contact sales

D · Pricing feature matrix



✓	✓	✓
3	25	∞

−	✓	✓

E · ROI calculator

Your estimated annual savings

See personalised demo

F · 3-up testimonials · ROI-focused

G · Compressed logo strip

Joining 5,000+ teams:

H · Awards / analyst row

I · Browse by industry Built for your industry

See page →

See all industries →

J · Browse by company size Right-sized for your team

See page →

K · FAQ · pricing-specific Frequently asked questions

−

L · Related content · ROI guide Continue learning

8 min read →

See the story →

Use free →

M · Final CTA · dual: book demo + start free

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Standard navC01.1 02Outcome heroC02.1 · centered, copy-only 03Pricing tier cardsC07.1 · 3-tier with decoy 04Pricing feature matrixC07.2 · grouped categories 05ROI calculatorC07.3 063-up testimonialsC06.2 · ROI-focused quotes 07Compressed logo stripC03.2 08Awards / analyst rowC03.4

, Cross-link navigation ,

09Browse by industryC12.1 10Browse by company sizeC12.2

, Universal closers ,

11FAQ blockC10.1 · pricing-specific 12Related contentC10.2 · ROI guide + pricing FAQ 13Final CTA blockC07.4 · dual: book demo + start free 14Standard footerC11.1

Assembly logic

Centered Outcome hero (2) with no image keeps the eye moving down to the prices. The hero copy frames pricing as fair and outcome-led ("Pricing built for teams of all sizes" is wrong; "Pay for what works, not what you might use" is right). Then tiers (3), then matrix (4), then ROI (5). Answer, detail, justification.

The decoy structure

The middle tier in position 3 is the desired conversion outcome. The Starter tier exists to make Growth look reasonable; the Scale tier exists to make Growth look like the value choice. This is intentional, three tiers convert better than two or five for self-serve B2B SaaS.

ROI before testimonials

Position 5 (ROI calculator) deliberately precedes the testimonials. Buyers in pricing-evaluation mode are already running mental ROI math; surface it for them with their own numbers, and the testimonials at position 6 then validate the math socially. Reverse the order and the calculator does less work.

Pricing-specific FAQ

The FAQ (9) on a pricing page handles the deal-blockers: "What happens if we exceed our seat count? Can we change plans? Is there a setup fee? What's your contract length?". These are the questions buyers search for at this stage. Answering them on-page keeps the visitor from bouncing to G2 or Reddit.

DECISION

Template 10 · 7 components

Book a Demo

A pure conversion page. The visitor arrived from paid, sales outreach or a high-intent CTA. They're already considering a demo. The page exists to remove every reason not to fill in the form. Strip the nav, kill the footer, focus the page.

Page wireframe, assembled view

hello@brand.com

A · Stripped nav

B · Form hero · demo form variant

What you'll see

Submit

C · Compressed logo strip

Joining 5,000+ teams:

D · Awards / analyst row

E · 3-up testimonials

F · FAQ · demo-specific, 3 Qs only Frequently asked questions

−

G · Final CTA band · thin reinforcement

Primary CTA Secondary CTA

No credit card · 14-day free trial

Page assembly · Top → Bottom

01Stripped navC01.2 02Form heroC02.5 · demo form variant 03Compressed logo stripC03.2 04Awards / analyst rowC03.4 · or stats bar 053-up testimonialsC06.2

, Universal closers (light) ,

06FAQ blockC10.1 · demo-specific, 3 Qs only 07Final CTA bandC07.4 · thin reinforcement

, No standard footer ,

Assembly logic

The Stripped nav (1) and missing footer are doing real work. Every navigation choice on a demo page is an opt-out, a chance for the visitor to read the case studies, browse pricing, or check the team page instead of filling in the form. Strip them. The only forward path is the form.

What's deliberately missing

No Status quo, no Value trio, no Feature deep-dive, no How it works, no Integrations, no Related content. Visitors at this stage already know they want a demo, they don't need persuading that the product is for them, they need permission now. Educational content here is friction.

The proof stack

Positions 3, 4, and 5 are pure trust reinforcement: peer logos (bandwagon), third-party validation (authority transfer), and named-person testimonials (social proof). All three sit close to the form so the visitor can glance at them while deciding to submit. This is the only persuasion the page does.

Light universal closers

The FAQ (6) is heavily restricted: 3 questions max, all about the demo itself ("How long is the demo? Will it be tailored to my use case? Who'll be on the call?"). No Related content block, the page exists to convert, not to send the visitor elsewhere. Footer is replaced with a thin legal strip (Terms · Privacy · Contact).

Reference · 24 principles

Psychological principles

A reference list of the behavioural, cognitive, and B2B-specific principles applied throughout the components and templates above. Each one is a lever, useful in some contexts, neutral or harmful in others. The components show where to apply them; this section explains why they work.

Social proof

Cialdini, Influence (1984)

People look to the behaviour of similar others to decide what's correct, especially under uncertainty. In B2B, "similar" matters more than "many", five logos from a buyer's exact segment outperforms fifty from mixed industries. Customer counts, named logos, peer quotes, and review-platform ratings all activate this lever.

Authority

Cialdini, Influence (1984)

Credentialed third parties shortcut the buyer's evaluation work. Analyst placements (Gartner, Forrester), security certifications (SOC 2, ISO 27001), press citations, and named-expert quotes all transfer credibility from a trusted source onto the brand. Most powerful when the prospect already trusts the source.

Reciprocity

Cialdini, Influence (1984)

Giving something genuinely useful before asking for anything creates an obligation to return value. Free tools, ungated benchmarks, and templates work because they front-load value. The mistake is gating the useful thing, that's not reciprocity, that's a transaction.

Commitment & consistency

Cialdini, Influence (1984)

Small actions create momentum toward larger ones. A free tool use → email capture → demo book sequence works because each step is consistent with the last. Asking for the demo on cold traffic skips the commitment ladder.

Liking

Cialdini, Influence (1984)

People buy from people and brands they feel a kinship with. In B2B this shows up as "they get our world", using the buyer's vocabulary, naming their specific frustrations, showing screenshots of their kind of company. Generic copy tells the buyer this product wasn't built for them.

Scarcity

Cialdini, Influence (1984)

Genuine scarcity (limited cohort, ending pricing, finite onboarding slots) increases perceived value and urgency. In B2B SaaS this lever is mostly misused, fake countdown timers and false urgency damage trust. Use it only when the constraint is real.

Loss aversion

Kahneman & Tversky, Prospect Theory (1979)

Losses feel roughly twice as painful as equivalent gains feel good. "Stop losing 12 hours a week to manual reporting" outperforms "save 12 hours a week" because it frames the status quo as the losing position. Status-quo blocks on Solutions pages are loss-aversion plays.

Anchoring

Tversky & Kahneman (1974)

The first number a buyer sees becomes the reference point for everything that follows. On pricing pages, leading with the higher tier makes mid-tier feel reasonable. In ROI calculators, the headline output anchors perceived value before the prospect ever sees the cost.

Decoy effect

Huber, Payne & Puto (1982); Ariely

Adding a third option that's clearly worse than one of the others shifts choice toward the "dominant" option. The classic three-tier pricing card with a highlighted middle tier uses this, the cheapest tier exists partly to make the middle look like the obvious choice.

IKEA effect

Norton, Mochon & Ariely (2012)

People value things more when they've put effort into them. Interactive product tours, ROI calculators, and free tools that produce a personalised output all create investment. By the time a prospect has built something with the product, the perceived switching cost of not buying has already gone up.

Hick's Law

Hick (1952); Hyman (1953)

Decision time grows logarithmically with the number of choices. Six pricing tiers force more cognitive load than three. A nav bar with 14 items is harder than one with 5. On conversion pages, every option is a chance for the prospect to choose "none of the above", keep choices tight.

F-pattern reading

Nielsen Norman Group eye-tracking

On dense web pages, users scan in an F-shape: top horizontal, then a shorter horizontal, then vertical down the left. Headlines, sub-headlines, and the first 2–3 words of bullets get read; everything else gets skimmed. Front-load meaning. Don't bury the value in paragraph three.

Specificity heuristic

Behavioural economics literature

Specific numbers feel more credible than round ones. "Reduces report build time by 73%" lands harder than "reduces it by ~75%" or "saves significant time". The buyer's brain treats specificity as a proxy for "they actually measured this".

Two-sided argument effect

Hovland, Lumsdaine & Sheffield (1949)

Acknowledging where you're weaker than a competitor increases trust in everything else you say. The "where they win" section of a comparison page is the highest-trust block on the page because it signals you're not just selling. Most brands are too scared to use this, which is exactly why it works.

Bandwagon effect

Asch conformity studies (1951)

"5,000+ teams use this" reframes the buying decision as joining a movement rather than taking a risk. Adoption-led copy works particularly well at the moment of action, just before a CTA, just before a form. It removes the question "am I being early on this?"

Jobs-to-be-done framing

Christensen, The Innovator's Solution (2003)

Buyers don't buy products, they hire them to make progress on a job. Solutions/Use Case pages should be structured around the job (the outcome the buyer is trying to achieve), not around the product's feature list. Job-led pages convert better than feature-led ones because they match how the buyer is actually thinking.

Champion enablement

Adamson & Dixon, The Challenger Customer (2015)

In B2B, the person on your site rarely has unilateral buying power. They need to sell internally to procurement, IT, security, and finance. Role-based pages, ROI calculators, security one-pagers, and "share this with your team" toolkits are all champion enablement, you're arming an internal advocate.

Internal selling enablement

Gartner B2B buying research

Gartner research shows the average B2B buying group is 6–10 stakeholders. The buyer spends more time selling internally than they do talking to vendors. Pages that work for the user but ignore the buying committee leave the deal stuck in approval. Build assets the champion can forward.

Uncertainty reduction

Berger & Calabrese (1975)

Unknown duration, unknown next steps, and unknown commitment all create friction at conversion points. "30-minute call. We'll cover X, Y, Z. No obligation." removes three layers of cognitive load before the prospect has to decide. Demo pages and pricing pages benefit most.

Distraction reduction

CRO field studies

On conversion pages (demo booking, signup, checkout), every nav link is an exit. Stripping the header to just a logo, removing the footer, and killing related-page links typically lifts demo-page conversion by 20–40%. The prospect is ready, don't give them a graceful way to leave.

Field reduction

HubSpot, Marketo, Unbounce form studies

Every form field reduces submission rate. Going from 11 fields to 4 commonly doubles conversion. The instinct to enrich the lead at form-fill is in tension with the goal of getting the lead in the first place. Capture the minimum; enrich asynchronously with Clearbit-type tools.

Authority transfer

Source-credibility research; Cialdini (1984)

A G2 badge, a Gartner mention, or a SOC 2 logo transfers a fraction of the source's credibility onto the brand. The transfer is strongest when the prospect already knows and trusts the source. Stacking unknown badges has diminishing returns, three credible signals beat ten weak ones.

Risk reduction

B2B buying research

B2B buyers are loss-averse on behalf of their company and themselves. "Nobody got fired for buying IBM" is the canonical example. Trust badges, money-back guarantees, free trials, named customer references, and clear cancellation terms all reduce the perceived downside of saying yes.

Async friction removal

CRO field data; Chili Piper / Calendly

Any delay between "I want to talk" and "we're talking" leaks demand. Direct calendar booking converts 2–3× better than "we'll get back to you" forms because it removes the asynchronous wait. The faster the loop closes, the higher the close rate.

How to use these by funnel stage

No principle is universally good. Loss aversion overused becomes scaremongering. Scarcity overused becomes manipulative. The skill is matching the lever to the funnel stage and how warm the audience is.

Top of funnel, reciprocity, liking, JTBD framing, social proof. Earn attention before asking for anything.

Mid funnel, authority, two-sided argument, anchoring, IKEA effect, champion enablement. Build credibility and equip the buyer to sell internally.

Bottom of funnel, distraction reduction, field reduction, uncertainty reduction, async friction removal, risk reduction. Strip out everything that isn't conversion.

Test one lever at a time. If a page improves after three changes, you don't know which one moved the number.