Overview
Landing page optimization lets your team automate experimentation and personalization on your landing pages — boosting conversions, signups, purchases, and revenue from the same traffic.
Problem
Typically, marketing teams try to optimize their conversion rate with the following process:
Come up with an idea to test
Coordinate with engineering to implement the experiment
Start the experiment
Wait for statistical significance
Interpret results and decide on a winning variant
Coordinate with engineering to clean up the experiment and ship the winner
Repeat
This results in several problems:
Slow conversion lift — It's slow to achieve conversion lift due to the need to wait for statistical significance for each experiment.
No interaction modeling — It doesn't account for interaction effects between page elements, e.g. the winning headline and the winning CTA may not work well when combined.
One-size-fits-all — It treats all visitors the same, even though different audience segments will respond better to different variants.
Manual overhead — It involves time-consuming, manual work to define experiments, monitor them, interpret results, and decide on winners.
Engineering dependency — Marketing relies on engineering to implement experiments, update variants, clean up experiments, and ship winning variants.
Opportunity cost — Valuable engineering time is spent supporting the marketing team.
Due to these challenges, marketing teams often deprioritize conversion rate optimization work, despite the significant potential impact.
Solution
Engineering defines types in Hypertune to model the landing page configuration:
type LandingPage {
hero: Hero!
ctaButton: CTAButton!
benefits: [Benefit!]!
layout: LandingPageLayout!
}
type Hero {
headline: String!
subheadline: String!
imageSrc: String!
}
type CTAButton {
buttonSize: ButtonSize!
text: String!
color: String!
}
enum ButtonSize {
small,
medium,
large
}
type Benefit {
icon: String!
title: String!
description: String!
}
enum LandingPageLayout {
default,
split,
grid
}They also define conversion event types in Hypertune that marketing wants to optimize for:
input SignUpEvent @event {
context: Context!
properties: SignUpEventProperties!
}
input SignUpEventProperties {
method: SignUpMethod!
}
enum SignUpMethod {
emailPassword
magicLink
googleOAuth
}They define flags that return the landing page configuration, and log the events:
type Root {
landingPage: LandingPage!
signUp(properties: SignUpEventProperties!): Void!
}Finally, they use generated methods to retrieve the landing page configuration and log the events in their code, with full end-to-end type-safety:
'use client'
import Benefits from './Benefits'
import CTAButton from './CTAButton'
import Hero from './Hero'
import LandingPageContainer from './LandingPageContainer'
import { useHypertune } from '@/generated/hypertune.react'
export default function LandingPage() {
const hypertune = useHypertune()
const landingPage = hypertune.landingPage()
return (
<LandingPageContainer
layout={landingPage.layout({ fallback: 'default' })}
>
<Hero hero={landingPage.hero()} />
<CTAButton
ctaButton={landingPage.ctaButton()}
onSignUp={(method) => {
hypertune.signUp({ args: { properties: { method } } })
}}
/>
<Benefits benefits={landingPage.benefits()} />
</LandingPageContainer>
)
}This empowers marketing to instantly update the landing page configuration from the Hypertune dashboard without any code changes or redeploys:
They can then set up a multivariate AI loop to explore all combinations of variants of page elements:
For example, they might add:
5 headlines
5 subheadlines
5 hero images
5 CTA button sizes
5 variants of the CTA button text
5 CTA button colors
5 variants of the benefits section
3 layouts
This totals 5 × 5 × 5 × 5 × 5 × 5 × 5 × 3 = 234,375 unique combinations of page elements.
A standard multivariate test which splits traffic equally among all variants would take impractically long to run.
Instead, a multivariate AI loop in Hypertune uses an evolutionary algorithm that:
Tests a small subset of combinations.
Keeps the best performers.
Crosses over their “genes” (variants) and introduces random mutations.
Repeats for the next generation.
This rapidly converges on the highest-converting combinations, like natural selection for landing pages.
The AI loop also segments users automatically — e.g. mobile vs. desktop — and finds the best-performing combinations for each segment. This creates a personalized experience for every audience, driving additional conversion lift.
Performance is determined by a goal function that marketing can create out of the events defined in Hypertune. So they can optimize for sign ups, purchases, revenue, or a weighted formula that combines multiple events into a score.
Marketing can see the best performing variants and combinations for each segment, and manually add or remove variants from the AI loop. They can also enable an AI copilot to automate this process, with an optional workflow to approve AI suggestions.
Benefits
This solution has several benefits:
Fast conversion lift — It's fast to achieve conversion lift, since the AI loop can quickly narrow in on the best combinations of variants.
Combinatorial optimization — It exploits interaction effects between page elements, to find the best combination of variants, e.g. the best combination of headline and CTA, resulting in higher conversion lift.
Personalization — It finds the best combinations for each audience segment, resulting in higher conversion lift.
Automation — It automates the testing process, so there's no time-consuming manual work to set up many experiments, monitor them, interpret results, and decide on winners.
Empowered marketing — It empowers the marketing team to set up AI loops and update variants without engineering support.
Freed engineering time — It frees up engineering time for other work.
ROI
Increased conversion rates and revenue.
Decreased cost of acquisition
Higher ROAS (return on ad spend).
Insights into which messaging and creative works best for each audience segment.
Last updated