Landing Page Conversion UI Architect

Business or product name: MetricFlow

Offer type: B2B SaaS reporting platform

Primary audience: Small and mid-sized digital marketing agencies that manually prepare recurring client reports

Primary problem: Agency teams spend too much time collecting data, rebuilding reports, and explaining results to clients.

Desired outcome: Create, automate, and deliver clear client reports from connected marketing data sources.

Primary conversion goal: Start a 14-day free trial

Secondary conversion: Book a product demo for larger agencies

Traffic source: Paid search Retargeting Email campaigns

Visitor awareness stage: Solution-aware to product-aware

Offer maturity: Validated product with paying customers

Product price or commitment: Monthly subscription with several account-volume tiers

Sales cycle: Immediate for small agencies Considered purchase for larger agencies

Main differentiators: Reusable report templates Automated report delivery White-label client portals Multi-account management Custom metrics Agency-focused workflows

Available proof: Approved customer testimonials Approved agency logos Two verified case studies Verified customer support rating Product screenshots Live demo environment

Main objections: Setup will take too long Existing reports are difficult to migrate Different clients need different metrics Clients may not use the portal Data synchronization may fail The product may become expensive as the agency grows

Pricing structure: Tiered monthly and annual subscriptions based on managed client accounts and feature access

Risk reversal: 14-day free trial No long-term contract for standard plans Cancellation according to published terms

Brand style: Modern Professional Confident Clear Data-focused Minimal

Required sections: Hero Customer logos Problem section Benefits Product demonstration How it works Integrations Agency use cases Case study Comparison Pricing Migration and setup FAQ Final CTA

Existing page: Current page receives traffic but has a weak trial-start rate and high mobile abandonment.

Analytics tools: Google Analytics Product analytics Advertising conversion tracking

Frontend stack: Next.js React TypeScript Tailwind CSS

Responsive targets: Desktop Tablet Mobile

Accessibility target: WCAG 2.2 AA implementation review

Need output: Complete landing page architecture Hero and CTA system Message hierarchy Wireframe logic Proof architecture Pricing and objection strategy Responsive behavior Form strategy Analytics event map Experiment roadmap Developer handoff Acceptance criteria QA checklist Conversion leak analysis

Special constraints: Do not invent customer results. Do not guarantee time savings or conversion improvements. Use only approved customer logos and testimonials. Disclose recurring billing clearly. Avoid fabricated urgency. Preserve pricing clarity on mobile.

=== LANDING PAGE CONVERSION ARCHITECTURE ===

Business: MetricFlow

Offer: Automated client reporting platform for digital marketing agencies

Primary Audience: Small and mid-sized agencies that repeatedly collect, format, and deliver client performance reports.

Primary Conversion: Start a 14-day free trial

Secondary Conversion: Book a product demo for larger agencies

Traffic Sources: Paid search, retargeting, and email

Dominant Awareness Stage: Solution-aware to product-aware

=== EXECUTIVE SUMMARY ===

The page should position MetricFlow as an agency-specific reporting workflow rather than a generic analytics platform.

The conversion journey should help visitors answer:

1. Does this solve the reporting workload my agency has?
2. Can it support multiple clients and custom reporting needs?
3. How difficult is setup and migration?
4. Will clients understand and use the reports?
5. How reliable are the data connections?
6. What will the platform cost as the agency grows?
7. Can I test it without a long-term commitment?

The page should prioritize message match, product demonstration, verified agency proof, setup clarity, pricing transparency, and a consistent free-trial CTA.

=== CONVERSION OBJECTIVE ===

Primary Conversion: Start Free Trial

Visitor Commitment: Medium

Secondary Conversion: Book Agency Demo

Why The Secondary Path Exists: Larger agencies may require security, procurement, migration, account-volume, or workflow discussions before starting.

Primary CTA Label: Start Free Trial

Secondary CTA Label: Book Agency Demo

CTA Support Text: Use only verified trial, billing, and credit-card conditions.

Post-Conversion Destination: Account creation and guided agency setup.

=== VALUE PROPOSITION ===

Core Value Proposition: Create and deliver consistent client reports from connected marketing data without rebuilding the reporting workflow every month.

Audience Context: Built for agencies managing recurring reporting across multiple client accounts.

Differentiating Mechanism: Reusable templates, automated delivery, white-label portals, account-level customization, and agency-specific workflows.

=== MESSAGE HIERARCHY ===

1. Automate recurring client reporting.
2. Preserve agency branding and client-specific metrics.
3. Manage multiple client accounts from one workspace.
4. Reduce repetitive report preparation.
5. Give clients understandable performance context.
6. Migrate existing reporting workflows.
7. Verify integrations and data freshness.
8. Select a suitable account-volume plan.
9. Start a trial or request a larger-agency demo.

=== PAGE SEQUENCE ===

1. Hero
2. Immediate Agency Proof
3. Manual Reporting Problem
4. Primary Benefits
5. Product Demonstration
6. How It Works
7. Integration Coverage
8. Agency Use Cases
9. Verified Case Study
10. Manual Process Comparison
11. Pricing
12. Migration And Setup
13. Reliability And Support
14. FAQ
15. Final CTA

=== HERO SECTION ===

Hero Goal: Communicate the agency reporting outcome, identify the audience, demonstrate the product, and provide one dominant trial CTA.

Eyebrow: Automated Client Reporting for Marketing Agencies

Headline: Turn connected campaign data into client-ready reports.

Subheadline: Create reusable report templates, automate delivery, and manage branded reporting across client accounts without rebuilding the same workflow every month.

Primary CTA: Start Free Trial

Secondary CTA: Book Agency Demo

CTA Support: Display accurate trial length, credit-card requirement, cancellation terms, and expected setup conditions.

Immediate Proof: Approved agency logos and one verified customer outcome.

Hero Visual: Annotated product interface showing:

• Client account selector
• Report template
• Connected data sources
• Scheduled delivery
• White-label client view

Visual Caption: Build once, customize by client, and schedule recurring delivery.

Desktop Layout:

• Copy and CTA content on the left
• Product visual on the right
• Proof directly below the CTA group

Mobile Layout:

• Headline
• Subheadline
• Primary CTA
• Secondary CTA
• Support text
• Proof
• Product visual
• Visual caption

Accessibility:

• Use one page-level heading.
• Provide meaningful alternative text.
• Maintain visible keyboard focus.
• Do not embed critical copy inside the image.
• Preserve sufficient contrast.

Performance:

• Use an optimized responsive image.
• Avoid an oversized autoplay hero video.
• Load the primary CTA and text without unnecessary client-side delay.

=== CTA ARCHITECTURE ===

Primary CTA: Start Free Trial

Secondary CTA: Book Agency Demo

Primary CTA Placements:

• Header
• Hero
• After Product Demonstration
• After Case Study
• Pricing
• Final Section

Secondary CTA Placements:

• Hero
• Enterprise pricing context
• Final section for qualified larger agencies

CTA State Requirements:

• Default
• Hover
• Focus-visible
• Pressed
• Loading
• Disabled only when genuinely unavailable
• Submission success
• Submission error

Mobile Sticky CTA: Recommended only after the visitor scrolls beyond the hero.

Sticky Label: Start Free Trial

Sticky Rules:

• Do not cover pricing or form content.
• Respect device safe areas.
• Provide a visible dismissal option when required by the design.
• Do not hide recurring billing details.

=== PROBLEM SECTION ===

Section Purpose: Help visitors recognize the recurring agency reporting burden.

Headline Role: Describe the operational problem without exaggeration.

Problem Points:

• Data is collected from multiple tools.
• Reports are rebuilt repeatedly.
• Formatting varies across account managers.
• Client explanations consume additional time.
• Manual delivery creates inconsistency.
• Scaling reporting requires more operational effort.

Visual: Workflow comparison between fragmented manual reporting and one coordinated reporting process.

Integrity Rule: Do not claim exact time savings without verified evidence.

=== BENEFIT ARCHITECTURE ===

Benefit 1: Standardize recurring client reporting.

Mechanism: Reusable report templates.

Outcome: Create consistent report structures across accounts.

Benefit 2: Reduce repetitive delivery work.

Mechanism: Scheduled report delivery.

Outcome: Deliver approved reports without repeating the same manual process.

Benefit 3: Preserve client-specific reporting.

Mechanism: Account-level metric, branding, and section customization.

Outcome: Maintain reusable systems without forcing every client into an identical report.

Benefit 4: Manage reporting across multiple accounts.

Mechanism: Agency workspace and client account organization.

Outcome: Review and manage recurring reporting from one system.

Benefit 5: Give clients clearer performance context.

Mechanism: Branded portals, annotations, summaries, and structured visualizations.

Outcome: Help clients understand what changed and what requires attention.

=== PRODUCT DEMONSTRATION ===

Question Answered: How does MetricFlow turn connected data into a delivered client report?

Demonstration Sequence:

1. Connect approved marketing data sources.
2. Select or create a reusable report template.
3. Customize metrics and branding for a client.
4. Review the generated report.
5. Schedule delivery or share the client portal.

Format: Annotated product walkthrough with five steps.

Mobile Alternative: Vertical sequence of screenshots with concise captions.

Accessibility:

• Provide descriptive captions.
• Provide a text equivalent of every workflow step.
• Do not require hover to understand annotations.
• Include controls and transcript for video versions.

=== HOW IT WORKS ===

Step 1: Connect Data Sources

Explanation: Authorize supported platforms and verify synchronization status.

Step 2: Build Or Select A Template

Explanation: Choose reusable sections, metrics, commentary areas, and branding.

Step 3: Customize By Client

Explanation: Adjust account-specific metrics, goals, branding, and reporting frequency.

Step 4: Review And Deliver

Explanation: Verify current data, approve the report, and schedule or share delivery.

=== INTEGRATION SECTION ===

Purpose: Reduce compatibility and reliability concerns.

Include:

• Supported integrations
• Data synchronization frequency
• Last-sync visibility
• Error and reconnection behavior
• Unsupported-source alternatives
• Custom integration options where available

Integrity Rule: Do not display an integration logo unless the integration is currently supported or clearly labeled as planned.

=== AGENCY USE CASES ===

Use Case 1: Monthly Client Reporting

Use Case 2: Paid Media Performance Reviews

Use Case 3: SEO Reporting

Use Case 4: Cross-Channel Executive Summaries

Use Case 5: White-Label Client Portals

Use Case 6: Internal Account Team Reviews

Each use case should include:

• Situation
• Reporting problem
• Relevant capability
• Expected workflow improvement
• Proof when available
• Relevant CTA

=== SOCIAL PROOF ARCHITECTURE ===

Immediate Proof: Approved agency logos near the hero.

Mid-Page Proof: Short testimonial supporting setup or reporting consistency.

Deep Proof: One detailed case study.

Pricing Proof: Testimonial addressing value, scale, or plan fit.

Testimonial Requirements:

• Customer name
• Role
• Agency
• Specific problem
• Specific outcome
• Permission
• Source
• Publication approval

Do Not Use:

• Invented quotes
• Anonymous praise presented as verified
• Unsupported performance statistics
• Unapproved customer logos

=== CASE STUDY BLOCK ===

Structure:

• Agency profile
• Original reporting workflow
• Main operational problem
• MetricFlow setup
• Features used
• Verified outcome
• Customer quote
• Relevant CTA

Claim Rule: State only outcomes supported by approved evidence.

=== COMPARISON BLOCK ===

Comparison: MetricFlow versus manual reporting workflow

Criteria:

• Data collection
• Template reuse
• Multi-account management
• Delivery scheduling
• White-label presentation
• Client access
• Reporting consistency
• Data freshness visibility
• Error recovery

Mobile Behavior: Convert wide columns into criterion cards.

Integrity: Do not present manual workflows unfairly or claim unsupported superiority.

=== PRICING ARCHITECTURE ===

Pricing Goals:

• Explain account-volume tiers.
• Make monthly and annual billing clear.
• Identify feature differences.
• Explain limits and overages.
• Separate standard and larger-agency paths.
• Avoid surprise fees.

Pricing Card Fields:

• Plan name
• Target agency size
• Monthly price
• Annual billing equivalent
• Included client accounts
• User limit
• Report limit
• White-label features
• Automation features
• Support level
• Overage terms
• Trial eligibility
• CTA
• Billing note

Recommended Plan Logic: Starter: Smaller agencies testing automated reporting.

Growth: Agencies managing more client accounts and advanced workflows.

Agency: Larger teams requiring expanded limits, permissions, or support.

Custom: Enterprise or complex implementation requirements.

Pricing Integrity:

• Do not hide recurring billing.
• Explain annual payment terms.
• Disclose account limits.
• Disclose overages.
• Avoid preselecting a higher-cost plan deceptively.
• Do not use false discounts.

=== OBJECTION MATRIX ===

Objection: Setup will take too long.

Response: Show the setup workflow, supported imports, templates, onboarding guidance, and realistic setup expectations.

Proof: Verified setup case study or onboarding documentation.

Objection: Existing reports are difficult to migrate.

Response: Explain template recreation, supported imports, duplication, and available migration support.

Objection: Different clients need different metrics.

Response: Demonstrate account-level customization within reusable templates.

Objection: Clients may not use the portal.

Response: Show delivery flexibility, email reports, client portal options, and branding.

Objection: Data synchronization may fail.

Response: Explain sync status, freshness indicators, reconnection, and error recovery.

Objection: Pricing may become expensive.

Response: Present transparent account limits, upgrade thresholds, overages, and plan comparison.

=== RISK REVERSAL ===

Primary Risk Reducer: 14-day free trial

Conditions To Display:

• Credit-card requirement
• Included features
• Trial limits
• Trial expiration
• Renewal behavior
• Cancellation process

Additional Risk Reducers:

• Guided setup
• Sample workspace
• Migration resources
• Demo option for larger agencies

All conditions must be verified before publication.

=== FAQ ARCHITECTURE ===

Recommended Questions:

• Which data sources are supported?
• How long does setup usually take?
• Can I use different templates for different clients?
• Can I apply my agency branding?
• How frequently does data synchronize?
• What happens if an integration disconnects?
• Can clients access reports directly?
• Can I migrate existing reporting templates?
• What happens when I exceed my account limit?
• Is a credit card required for the trial?
• Can I cancel without a long-term contract?
• What support is included?

FAQ Rule: Do not hide material pricing, billing, privacy, or contract terms inside collapsed answers only.

=== FORM ARCHITECTURE ===

Free Trial Form:

Recommended Fields:

• Work email
• Password or authentication method
• Agency name
• Optional account-volume estimate

Remove: Fields not required for account creation or onboarding.

Validation:

• Persistent labels
• Clear required indicators
• Inline validation
• Preserve entered values
• Prevent duplicate submission
• Show form-level error summary when needed
• Confirm account creation
• Explain the next setup step

Demo Form:

Recommended Fields:

• Name
• Work email
• Agency
• Approximate number of client accounts
• Primary reporting need
• Optional message

Privacy: Explain how submitted data will be used and routed.

=== RESPONSIVE BEHAVIOR ===

Hero: Extra Large: Two-column layout with large annotated interface visual.

Large: Two-column layout.

Medium: Balanced stacked or compressed two-column layout.

Small: Copy, CTA, proof, visual, and caption in one clear sequence.

Proof Logos: Wrap into a readable grid. Do not shrink logos until they become illegible.

Benefits: Three columns on large screens. Two columns on medium screens. One column on small screens.

Comparison: Table on large screens. Grouped comparison cards on small screens.

Pricing: Three-column cards on large screens. Stacked cards on small screens. Preserve billing details and limits.

FAQ: Single-column accordion with complete keyboard support.

Forms: Full-width controls on small screens. Prevent mobile keyboard obstruction. Use appropriate input types and autocomplete.

=== ACCESSIBILITY REQUIREMENTS ===

• Use semantic landmarks.
• Maintain one logical page heading.
• Preserve heading hierarchy.
• Provide skip navigation.
• Support keyboard navigation.
• Use visible focus styles.
• Provide meaningful CTA labels.
• Maintain sufficient contrast.
• Do not rely on color alone.
• Use persistent form labels.
• Associate errors with fields.
• Provide error recovery.
• Ensure accordion controls expose state.
• Use semantic comparison tables.
• Provide alt text for informative visuals.
• Hide decorative images appropriately.
• Provide captions and transcripts for media.
• Respect reduced-motion preferences.
• Support zoom and responsive reflow.
• Maintain logical mobile reading order.

=== PERFORMANCE REQUIREMENTS ===

• Optimize the hero image.
• Use responsive image sources.
• Compress below-the-fold media.
• Lazy-load noncritical imagery.
• Limit font families and weights.
• Review third-party scripts.
• Avoid blocking analytics scripts.
• Reserve media dimensions to prevent layout shifts.
• Avoid unnecessary autoplay video.
• Keep essential copy server-rendered or immediately available.
• Preserve form behavior during slow network conditions.

=== ANALYTICS EVENT MAP ===

Event: landing_page_viewed

Properties:

• traffic_source
• campaign
• device_type
• landing_page_variant

Event: hero_trial_clicked

Properties:

• traffic_source
• campaign
• device_type

Event: demo_requested

Properties:

• source_section
• account_volume_range
• device_type

Event: pricing_viewed

Properties:

• device_type
• traffic_source

Event: plan_selected

Properties:

• plan
• billing_period
• source_section

Event: form_started

Properties:

• form_type
• source_section

Event: form_submitted

Properties:

• form_type
• source_section

Event: form_submission_failed

Properties:

• form_type
• error_category

Privacy Rule: Do not include private customer details, full form values, passwords, or unnecessary personal information in analytics properties.

=== EXPERIMENT ROADMAP ===

Experiment 1: Hero Message Specificity

Observation: Current hero uses broad reporting language.

Hypothesis: An agency-specific recurring-reporting headline will improve qualified trial starts.

Control: Current broad headline.

Variation: Agency-specific headline focused on recurring client reporting.

Primary Metric: Qualified trial start rate.

Guardrail: Demo requests from larger agencies.

Experiment 2: Product Demonstration Placement

Hypothesis: Moving the workflow demonstration immediately after initial proof will reduce uncertainty and increase CTA engagement.

Primary Metric: Trial CTA click-through after demonstration exposure.

Experiment 3: Setup Objection Block

Hypothesis: Adding a concise migration and setup section before pricing will improve pricing-to-trial progression.

Primary Metric: Trial starts among visitors who view pricing.

Experiment Rule: Run only after tracking quality and traffic volume are sufficient.

=== DEVELOPER HANDOFF ===

Required Components:

• LandingPageHeader
• HeroSection
• LogoCloud
• ProblemSection
• BenefitGrid
• ProductDemo
• WorkflowSteps
• IntegrationGrid
• UseCaseCards
• TestimonialCard
• CaseStudyBlock
• ComparisonTable
• PricingCards
• ObjectionSection
• FAQAccordion
• TrialForm
• DemoForm
• FinalCTA
• MobileStickyCTA
• LegalFooter

Required States:

• Default
• Hover
• Focus-visible
• Pressed
• Loading
• Success
• Error
• Disabled
• Empty proof state where approved proof is unavailable

Developer Notes:

• Do not render placeholder testimonials as real proof.
• Do not show integration logos unless approved.
• Preserve CTA support text on mobile.
• Keep pricing limits visible.
• Implement accessible accordions.
• Prevent duplicate form submissions.
• Reserve image dimensions.
• Respect reduced-motion preferences.
• Ensure analytics events do not contain sensitive form values.

=== IMPLEMENTATION SEQUENCE ===

1. Confirm offer, audience, traffic sources, and conversion goal.
2. Approve verified claims and proof.
3. Approve value proposition and message hierarchy.
4. Approve page sequence.
5. Approve hero and CTA system.
6. Approve low-fidelity wireframe.
7. Approve responsive behavior.
8. Confirm forms, privacy, and routing.
9. Define components and design tokens.
10. Implement content and sections.
11. Implement states and form validation.
12. Implement analytics.
13. Complete accessibility review.
14. Complete performance review.
15. Complete browser and device QA.
16. Launch with measurement and experiment priorities.

=== ACCEPTANCE CRITERIA ===

Paid Search Message Match:

Given a visitor arrives from an advertisement promoting automated client reporting, when the page loads, then the hero clearly repeats the reporting promise, identifies marketing agencies, presents one dominant trial CTA, and does not introduce an unrelated primary offer.

Mobile Pricing:

Given the viewport is below 640 pixels, when the visitor reviews pricing, then every plan's billing period, included account limit, material feature limits, renewal condition, and CTA remain readable without horizontal page overflow.

Trial Form Error:

Given the visitor submits invalid information, when validation fails, then entered values remain available, inline errors appear, focus moves to the first invalid field, and the visitor can correct the form without restarting.

Proof Integrity:

Given an approved customer logo or testimonial is unavailable, when the page is published, then the interface omits that proof element rather than displaying a fabricated placeholder as real evidence.

Reduced Motion:

Given the visitor prefers reduced motion, when animated demonstrations or transitions load, then nonessential spatial motion is removed or substantially reduced without hiding important content.

=== QA CHECKLIST ===

Strategy QA:

• Confirm audience.
• Confirm awareness stage.
• Confirm traffic-message alignment.
• Confirm one primary conversion.
• Confirm CTA hierarchy.
• Confirm objection coverage.

Claim QA:

• Verify testimonials.
• Verify logos.
• Verify statistics.
• Verify pricing.
• Verify guarantees.
• Verify deadlines.
• Verify comparison claims.

Visual QA:

• Verify hierarchy.
• Verify spacing.
• Verify typography.
• Verify contrast.
• Verify image quality.
• Verify pricing emphasis.
• Verify mobile CTA visibility.

Functional QA:

• Verify CTA destinations.
• Verify forms.
• Verify validation.
• Verify success states.
• Verify error recovery.
• Verify accordions.
• Verify comparison behavior.
• Verify analytics events.

Responsive QA:

• Verify mobile reading order.
• Verify pricing clarity.
• Verify proof readability.
• Verify comparison transformation.
• Verify sticky CTA behavior.
• Verify safe areas.
• Verify keyboard obstruction.

Accessibility QA:

• Verify landmarks.
• Verify headings.
• Verify keyboard access.
• Verify focus.
• Verify labels.
• Verify error associations.
• Verify table semantics.
• Verify alt text.
• Verify media captions.
• Verify reduced motion.
• Verify zoom and reflow.

Performance QA:

• Verify hero load priority.
• Verify image sizes.
• Verify font loading.
• Verify layout stability.
• Verify script impact.
• Verify video loading.
• Verify slow-network form behavior.

=== CONVERSION LEAK REPORT ===

Leak: Generic hero messaging

Priority: Critical

Impact: Visitors may not recognize the product as an agency reporting solution.

Recommendation: Use audience-specific recurring-reporting language.

Leak: Weak setup explanation

Priority: High

Impact: Migration and implementation concerns remain unresolved.

Recommendation: Add a setup and migration section before pricing.

Leak: Pricing growth uncertainty

Priority: High

Impact: Agencies may fear unpredictable cost increases.

Recommendation: Show account limits, upgrade thresholds, overages, and plan differences clearly.

Leak: Mobile comparison friction

Priority: Medium

Impact: Wide tables may become unreadable.

Recommendation: Transform comparisons into grouped mobile cards.

=== KNOWN LIMITATIONS ===

• The architecture requires final approved copy.
• All proof and claims require verification.
• Final legal and privacy language requires qualified review.
• Conversion performance depends on traffic quality, offer strength, product-market fit, implementation, and measurement.
• Experiments require sufficient traffic and reliable analytics.
• Accessibility and performance require implementation testing.
• The architecture does not guarantee trial starts, demo requests, leads, sales, revenue, or a specific conversion rate.

=== FINAL INTEGRITY NOTE ===

All claims, testimonials, statistics, logos, prices, guarantees, deadlines, plan conditions, and comparison statements must be verified before publication. This architecture is designed to improve clarity, relevance, trust, and conversion readiness, but it does not guarantee commercial outcomes.