ReferenceAppendix — page composition guides
The pattern catalogue answers the component-level question: is this button, form, or notification built the way the good versions are built? This appendix answers the page-level one: which zones a proven landing, pricing, product-detail, article, about, or contact page is composed of — and in what order. Knowing the composition means you can ask an agent for it by name ("a landing page: hero, logo rail, problem statement, features, testimonials, conversion zone") instead of hoping it assembles one by instinct.
Landing Page Conversion Pages
Convert visitor attention into a single, specific action by presenting a focused value proposition, removing decision friction, and building trust before the page ends.
Essential zones, in order
Hero Section
Answers what this is, what the visitor can do, and why they should care — with the primary CTA above the fold.
Social Proof Bar
Provides instant credibility by showing recognizable customer logos before the visitor scrolls into deeper content.
Problem Statement
Names the pain the visitor recognizes in themselves, creating the emotional hook that makes the solution feel personally relevant.
Feature Showcase
Translates capabilities into visitor-centric outcomes — what changes in their life, not product specifications.
Testimonials
Provides specific, attributed third-party validation that shifts the visitor from "sounds good" to "works for people like me."
Primary Conversion Zone
Delivers the commitment action — signup, trial, or purchase — surrounded by risk-reversing trust signals.
Recommended zones
How It Works
Makes the path from signup to value visible and short, reducing cognitive friction for products with non-obvious workflows. Where: Between problem statement and features
FAQ Section
Eliminates final friction by addressing security, cancellation, and compatibility concerns at the decision point. Where: Above the final CTA
Product Demo
Provides a visceral preview of the product in use — especially effective when the UI itself is the primary selling point. Where: Within or after the hero section
NNGroup eye-tracking across 57,453 fixations shows users spend 57% of page-viewing time above the fold. Landing pages with social proof convert up to 34% better than those without (Unbounce 2024 benchmark, 41,000+ pages). Baymard Institute's testing repeatedly finds that unanswered questions — security, total cost, cancellation — are what push otherwise-willing users to abandon.
Common mistakes
Headline leads with a feature ("Advanced analytics dashboard") instead of an outcome
Rewrite as the transformation: "Know exactly why users drop off, in under a minute." Features belong in the feature showcase, not the hero.
Social proof placed only in the footer where high-intent visitors never see it
Place a logo rail below the hero and at least one attributed testimonial within 300px of the primary CTA.
Full site navigation with dropdowns gives visitors 12 escape routes before they understand the value
Strip nav to logo + single ghost CTA. Conversion pages are not discovery pages.
Wall of text with no visual hierarchy forces everyone to read everything before orienting
Alternate full-width narrative and grid layouts. Use section headers that are scannable standalone sentences.
Proven variations
For high-intent traffic (paid search, retargeting) with low-commitment asks — hero, CTA, logo rail, one social proof element.
For complex or expensive products — walk through problem, solution, features, proof, pricing, FAQ, and final CTA using scroll-triggered animations.
Open with the problem, agitate with consequences, introduce the product as the fix — used by Basecamp and early Shopify.
Sources: NNGroup, Baymard Institute, CXL Institute, Unbounce 2024 Benchmark.
Pricing Page Conversion Pages
Convert evaluation-stage prospects into paying customers by resolving value uncertainty, pre-empting purchase objections, and guiding visitors toward the plan that best fits their use case.
Essential zones, in order
Value Hook Header
Anchors context — confirms the visitor is on the right page and restates the core value proposition.
Plan Comparison Cards
Presents the structured choice set — plan names, prices, and key differentiators — enabling self-selection without a sales conversation.
CTA per Plan
Provides a distinct, unambiguous action for each plan so visitors can act at peak intent.
Trust Signals Bar
Reduces purchase anxiety by showing customer logos, security badges, and ratings at the commitment moment.
Objection-Handling FAQ
Eliminates common non-conversion reasons — cancellation, data security, seat definitions — without requiring support contact.
Recommended zones
Feature Comparison Table
Serves power users and evaluation committees who need to verify specific capability availability. Where: Below plan cards, expandable or anchored via "Compare all features"
Enterprise Tier CTA
Captures high-value prospects who need custom contracts, SSO, or procurement workflows. Where: Fourth column or standalone band below plan cards
Tier-Matched Testimonials
Provides social validation contextually relevant to each plan tier. Where: Between plan cards and FAQ
CXL Institute's original pricing-page research shows highlighting a recommended plan measurably shifts selection toward it. Dan Ariely's decoy experiment (The Economist's subscription pricing) lifted selection of the bundled tier from 32% to 84% by adding a third option nobody chose. Unanswered questions — cancellation, security, seat definitions — are a repeatedly observed abandonment driver in Baymard's testing; and a visible 30-day money-back guarantee lifted sales by 21% in a much-cited CRO case study.
Common mistakes
More than four plan tiers creating decision paralysis
Limit to three named tiers (Good/Better/Best) plus one enterprise contact row. Hick's Law and choice-overload research agree: every added option slows the decision and raises abandonment risk.
Hiding prices behind "Contact Sales" for all tiers, even self-serve segments
Show transparent pricing for all self-serve plans. Reserve "Contact Sales" for the enterprise tier where procurement complexity justifies it.
Feature comparison table buried with no anchor link from plan cards
Add a visible "Compare all features" link inside each plan card that deep-links to the comparison table.
Trust signals and security badges placed only in the site footer, far from CTAs
Place at least one trust signal within one viewport of each plan card's CTA button.
Proven variations
Lead with plan cards above the fold — no hero preamble. For high-intent branded traffic (Linear, Vercel, GitHub).
Open with benefit headline and trust bar before plan cards. For pricing pages that also serve cold search traffic (Notion, Shopify).
Show Individual/Team/Enterprise selector before revealing plans. For products with significantly different feature sets per segment (Stripe, Salesforce).
Sources: CXL Institute, Dan Ariely, Baymard Institute, NNGroup.
Product / Service Detail Conversion Pages
Give visitors the precise information, trust signals, and decision-making context to confidently add to cart, start a trial, or contact sales — without seeking information elsewhere.
Essential zones, in order
Product Hero / Buy Box
Establishes what the product is, what it costs, and what the primary action is — above the fold.
Social Proof Band
Surfaces star ratings, review count, or user count immediately adjacent to the primary CTA to reduce purchase hesitation.
Media Gallery
Answers visual questions text cannot — scale, finish, context of use — reducing uncertainty that causes abandonment.
Feature Summary
Communicates what the product does in scannable form, answering "Is this right for me?" without walls of prose.
Trust & Reassurance Zone
Neutralizes top purchase objections (returns, security, delivery) at the moment of decision.
Customer Reviews
Provides peer validation with sortable, filterable specificity — users find reviews from people like themselves.
Recommended zones
Detailed Specifications
Serves late-stage evaluators who need precise technical details to make a final decision. Where: Below hero zone as collapsed accordion sections — never horizontal tabs (27% miss rate per Baymard)
Feature Deep-Dive Sections
Shows each major feature in context with visuals and use cases for users who need more than bullets. Where: Below initial description, alternating image-text layout
FAQ / Objection Handler
Pre-empts buying objections with direct answers, reducing support load and abandonment. Where: After reviews, before cross-sells
Cross-Sell / Related Products
Captures users who didn't convert on the primary product and increases average order value for those who did. Where: After reviews — never before the buy box
Baymard Institute's benchmark of 60 top-grossing e-commerce sites found 82% have mediocre-to-poor product page UX. Purchase likelihood is 270% higher for a product with its first five reviews than with none, with rapidly diminishing returns after five (Spiegel Research Center). 56% of users' first action on a product page is exploring the image gallery.
Common mistakes
Using horizontal tabs to organize specs, FAQs, and reviews
Replace with vertically collapsed accordions or a sticky TOC long page. 27% of users overlook horizontal tab content (Baymard).
Trust signals (guarantee, return policy, secure checkout) placed only in footer
Move trust signals into or directly below the buy box, within the same visual container as the CTA button.
Truncating the image gallery to 1–2 images with no visible thumbnails
Always show thumbnail navigation. Truncating causes 50–80% of users to overlook additional images.
Cross-sell carousels placed before or within the primary buy zone
Place all cross-sells after reviews and FAQ. The primary conversion path must be unobstructed.
Proven variations
Two-column desktop layout (media left, buy box right) for physical or visible-deliverable products — the highest-performing layout per Baymard benchmarks.
Single-column long page with hero screenshot, social proof, alternating feature sections, pricing, FAQ — for software products (Stripe, Linear, Vercel).
Full-width sections with persistent table-of-contents navigation for complex/technical products where users jump between specs and comparisons (Apple Mac Pro).
Sources: Baymard Institute, NNGroup, CXL Institute, Spiegel Research Center.
Blog / Article Content Pages
Deliver long-form content to readers with specific information needs while establishing authority, maximizing engagement, and converting engaged readers into subscribers or leads.
Essential zones, in order
Article Header
Establishes the topic, author credibility, and time investment before the reader commits to scrolling.
Reading Context Strip
Sets reader expectations with category, reading time, and publish date — reduces bounce from uncertain visitors.
Article Body
Delivers the content in a scannable, comprehension-optimized format respecting F-shaped and layer-cake scanning patterns.
Author Attribution
Provides E-E-A-T signals (Experience, Expertise, Authoritativeness, Trustworthiness) required by both readers and Google quality raters.
In-Article Conversion CTA
Captures highest-intent readers at peak relevance. In HubSpot's own study, inline anchor-text CTAs boosted conversions 121% over end-of-post banner CTAs.
Recommended zones
Sticky Table of Contents
Gives readers a persistent mental map and allows non-linear navigation through long articles. Where: Left sidebar on wide viewports, collapsible block on mobile
Social Sharing Bar
Reduces friction for readers who want to share by surfacing platform-specific share actions. Where: Floating left sidebar on wide viewports, static block at top/bottom on narrow
Related Articles
Reduces exit rate and deepens topic authority by routing engaged readers to semantically related content. Where: Below author block and primary CTA, before footer
Reading Progress Indicator
Provides continuous visual orientation for long-form articles, encouraging completion over abandonment. Where: Thin progress bar fixed to top of viewport
NNGroup eyetracking finds content above the fold receives 57% of viewing time, and the first two screenfuls together 74% — attention falls off steeply below that. Adding estimated reading time increased engagement by up to 40% in Simpleview's rollout, and one much-cited A/B test measured 13.8% more time on site. Layer-cake scanning means subheadings determine whether body content gets read at all.
Common mistakes
No author identity — publishing under "Admin" or with no byline removes all E-E-A-T signals
Every article needs a named author with photo, role, and link to an author page. Include Person schema in Article structured data.
Wall of text with no subheadings, pull quotes, or whitespace
H2/H3 every 200–300 words, opening sentences that stand alone as scannable summaries, bullets for lists, 65–75ch max paragraph width.
Newsletter CTA placed only in sidebar or at very bottom of page
Use two placements: one inline CTA after section 2–3, and one end-of-article CTA. Limit to 1–2 total to avoid overload.
Missing Article structured data (no datePublished, dateModified, or author Person)
Implement full Article JSON-LD with headline, image, dates, author (Person + sameAs), publisher, and wordCount.
Proven variations
Removes sidebar nav, collapses header on scroll, centers text in a narrow column — for publications where completion rate is the metric (Medium, Substack).
Prioritizes syntax-highlighted code blocks, persistent sticky TOC, wide code column, and "copy to clipboard" — for audiences scanning for implementation details (Vercel Blog, Stripe Blog).
Multiple inline CTAs for gated assets, right sidebar offers, sticky bottom bar CTA — for high-traffic informational articles where lead generation is the goal (HubSpot, CXL).
Sources: NNGroup, Simpleview, HubSpot, CXL Institute.
About / Team Trust & Company Pages
Convert skeptical evaluators into confident buyers by establishing organizational credibility, humanizing the people behind the product, and proving the company can be trusted.
Essential zones, in order
Company Story
Answers "why does this company exist?" and creates an emotional hook that builds rapid trust through shared values.
Mission & Values
Lets evaluators self-select — visitors who align with stated values self-qualify as better-fit customers.
Traction Stats
Establishes proof-of-scale with specific, credible numbers that answer the implicit "are you for real?" question.
Team Grid
Humanizes the organization — faces reduce perceived risk of dealing with an abstract entity.
Backer / Partner Logos
Third-party institutional validation borrows credibility at zero cost — someone credible already vetted this company.
Closing CTA
Captures intent from high-intent evaluators. About page visitors are verifying credibility, not browsing.
Recommended zones
Press Coverage ("As Seen In")
Earned media logos signal newsworthiness and third-party validation without the company saying anything about itself. Where: Horizontal strip above or below traction metrics
Company Timeline
Demonstrates longevity, momentum, and shipping history — countering "will this company still exist next year?" Where: Within or below the company story section
Careers Teaser
Signals active growth while capturing talent interest. A growing team is itself a trust signal. Where: Near-bottom, before or after closing CTA
NNGroup finds About page visitors are in credibility-verification mode — they leave quickly if questions go unanswered. Trust signals placed near CTAs lift conversions across published A/B tests — VWO's analysis of 100+ e-commerce tests found security badges near CTAs averaged a 42% lift for first-time visitors. Sprout Social data shows 57% of consumers spend more with brands they feel connected to, and 76% choose them over competitors.
Common mistakes
Generic jargon mission statement ("We're passionate about empowering teams to reach their potential")
Replace with concrete specifics — name the problem, the user, and what the company does differently. NNGroup shows users perceive vague language as evasion.
Stock photography or overly staged team photos that don't show real people
Use authentic headshots with consistent lighting and background. The fusiform face area triggers automatic attention to faces — fake ones signal inauthenticity.
No CTA at the end — treating the About page as a dead end
Place a contextual CTA at the close (start trial, contact sales, or view careers). About visitors are high-intent evaluators.
About page buried in footer navigation, hard to find from primary nav
Make accessible from primary navigation. It's typically a top-5 visited page on B2B/SaaS sites (96% of prospects self-research per HubSpot).
Proven variations
Lead with founder story and personal photo. Team is a single founder bio. Focus on why-I-built-this narrative when the founder's credibility is the primary trust asset (<15 people).
Open with traction stats and customer logos before narrative, then mission and large team grid — for 100+ customer companies where institutional proof outweighs origin story (Linear, Stripe, Notion).
Structure around a singular cause or POV with diversity of thought and a values manifesto — for developer tools, open-source, or philosophy-differentiated companies (GitLab, Vercel).
Sources: NNGroup, CXL Institute, VWO, Sprout Social, HubSpot.
Contact Trust & Company Pages
Convert visitor intent into a direct communication channel by providing multiple contact methods, routing to the correct team, and building trust that makes someone willing to reach out.
Essential zones, in order
Channel Selector
Routes users to the correct team (Sales, Support, Partnerships) before they reach a form, reducing abandonment and misroutes.
Contact Form
Captures structured inquiry data and routes it to the right team with validated, actionable information.
Direct Contact Details
Provides phone, email, and address for users who distrust forms or whose needs are urgent.
Response Time Expectation
Eliminates uncertainty that causes abandonment by stating exactly when and how someone will respond.
Recommended zones
FAQ / Self-Serve Deflection
Resolves common queries before submission, reducing support volume while improving user confidence. Where: Below form or in sidebar
Office Location & Map
Provides physical legitimacy and supports local SEO for businesses with walk-in locations. Where: Lower section, below primary contact form
Team Presence Signal
Humanizes the contact experience by showing who will actually respond, reducing fear of a void. Where: Alongside the form
Meeting Scheduler
Lets high-intent visitors book a call immediately without waiting for email response. Where: Alternative tab or secondary section when "Talk to Sales" is selected
NNGroup's Contact Us research finds users actively distrust pages offering only a form and no phone number — "suspicious" was a test participant's own word. Forms following validation usability guidelines achieve 78% first-try submissions versus 42% for those that don't (Baymard Institute). And the classic Imagescape case study cut a contact form from 11 fields to 4 and received 160% more submissions.
Common mistakes
Form-only page with no phone number, email, or physical address
Always display direct contact details alongside the form. Removing phone numbers erodes trust (NNGroup). The form supplements real contact, not replaces it.
Not setting response time expectations — users submit and hear nothing for days
State a specific SLA below the submit button ("We respond within 1 business day") and repeat in the confirmation message.
Requiring account creation before allowing contact
Contact access must be unconditional. Account walls on contact pages are a highest-friction failure pattern (NNGroup).
Routing all inquiry types to a single generic inbox via one undifferentiated form
Implement a channel selector or intent router at the top (Sales / Support / Press). Card-based routing directs to the appropriate team and form variant.
Proven variations
One form with a "What can we help with?" dropdown that conditionally reveals fields — best for small teams or low contact volume.
Grid of labeled cards (Sales, Support, Press) each linking to a distinct form — best for B2B SaaS with distinct personas and routing (Calendly, Stripe, HubSpot).
Minimal 3-field form that reveals a calendar embed on completion — best for sales pages where the goal is booking demos (reduces time-to-meeting from days to seconds).
Sources: NNGroup, Baymard Institute, CXL Institute, Imagescape, Smashing Magazine.