Landing pages built to test and convert, campaign after campaign
A modular landing page system built around a single conversion goal per campaign, sized for fast A/B testing across paid channels.
The brief, in specifics
- Industry
- E-commerce & Retail
- Duration
- 6 weeks
- Cooperation model
- Fixed price
- Services
- Landing page systemConversion designComponent kit
- Integrations
- ShopifyKlaviyoShipStationSendGrid
- Technologies
- Next.jsTypeScriptTailwind CSSVercel AnalyticsFigmaStripe API
- Team
- 1 Project lead2 Frontend engineers1 Backend engineer
Client name withheld under NDA. Engagement details are shown to the extent our agreement permits.
Every surface, in order
The same page as paid social delivers it: the top and bottom of one narrow column, the form still above the timetable, painted in 0.8 seconds.
The results console: sign-ups by hour with the promoted free trial variant picked out, cost per sign-up for each of the four channels, a live sign-up feed and the promoted headline's figures.
The page behind the console's top line: 41,208 visitors, 1,628 of them signed up, and that 1,628 shown back on the page as the only proof it offers, under the winning headline and a two-field form.
A price-led page that argues against itself: at twice a week the class pass costs $56.00 against a $39.00 membership, and the table says so.
The 5.5% page: forty people at $27.00 instead of $39.00, one invoice of $1,080.00 and $480.00 a month saved, worked out on the page.
Five referrals, nine visits between them, two months already given: the member's own progress standing in for a testimonial.
The legacy page the console paused at 1.9% and 1.4 seconds, flagged: a full-size photograph, five ways out in the top strip, and three different things asked at the bottom.
The brief
An ecommerce brand needed landing pages that launched fast and converted paid ad traffic. We built a modular landing page system tuned for speed and testing.
A direct-to-consumer brand running paid acquisition across four channels, where every campaign needed its own landing page and every page was built from scratch by whoever was free. Pages took two weeks, which meant campaigns were planned around engineering availability. The engagement was six weeks, scoped to remove that dependency entirely, not to make one better page.
Design & Web
What people were running into
Building landing pages from scratch for every campaign was slow, inconsistent, and hard to test against paid traffic cohorts.
The pages were also slow. Built ad hoc, each shipped its own fonts, its own hero image at full size, and a client-side test script that blocked render. On the mid-range Android phones that most of the paid traffic actually arrived on, the ad's landing page took four seconds to become readable, and the bounce data showed most of that traffic leaving before it did.
We created a modular landing page framework with high-converting sections, fast edge rendering, and built-in variant testing.
Design decisions
Designed a library of high-converting section templates
The section library was drawn from what had converted in the brand's own previous pages, not from a general set of patterns.
Built sub-second Next.js SSG templates hosted on Vercel Edge
Pages are statically generated and served from the edge, with subset self-hosted fonts and the hero preloaded at its rendered size.
Structured pages around one clear conversion action
Each page carries one conversion action, so the section library has no arrangement that produces two competing asks on one page.
Instrumented variant tracking for rapid A/B testing
Variants resolve at the edge before the page is served, with the primary metric and minimum sample declared before a test starts.
Phase by phase
Phase 1: Traffic & Funnel Audit
Paid Ad Conversion Analysis
Audited landing page bounce rates and ad click-through conversion friction across paid marketing campaigns.
- Funnel Bounce Audit
- Ad Alignment Spec
- Conversion Benchmark
Phase 2: Modular Component System
High-Converting Page UI Kit
Designed high-converting landing page layouts with sticky CTAs, hero video blocks, and social proof elements.
- Modular Component Library
- Figma Design System
- Conversion Tokens
Phase 3: Fast Sub-Second Edge Build
Next.js SSG & Vercel Edge Setup
Engineered Next.js SSG pages hosted on Vercel Edge with sub-800ms initial load times globally.
- SSG Edge Pipeline
- Speed Benchmark Report
- Analytics Integration
Phase 4: A/B Testing & Optimization
Variant Testing & Campaign Launch
Ran multi-variant A/B headline tests, achieving a +42% lift in lead conversions across paid channels.
- A/B Test Dashboard
- Campaign Conversion Report
- Production Launch
Assembling a page: a marketer drops library sections into the single-goal early classes page, 52 minutes on the build clock against the two-hour mark, with every publish check already green and the sticky ask bar on its way in.
Sub-Second Edge Rendering
Engineered with Next.js SSG for instant global page loads under paid ad traffic.
Pages are statically generated and served from the edge, so paid traffic hits a cached document instead of waiting on a render. Fonts are self-hosted and subset, the hero image is preloaded at the exact rendered size and everything else is deferred. That's what holds Largest Contentful Paint under a second on a mid-range phone over 4G, the condition most of the ad spend actually lands in.
- Statically generated, served from the edge
- Self-hosted subset fonts; hero preloaded at rendered size
- Tuned against a mid-range phone on 4G, not desktop fiber
The speed budget: Core Web Vitals for each of the five templates, why the free trial page paints at 0.76 s (edge document, subset fonts, preloaded hero, everything else deferred), and the open day page's publish blocked on 212 KB of render-blocking script.
Modular Campaign UI Kit
The section library: all twenty-six blocks ranked by measured lift across 140 campaigns, the seven-field long form retired at the bottom, the fields a hero block must declare before it can publish, and the Corehaven tokens every block is locked to.
Reusable conversion blocks for quick campaign assembly and consistent brand styling.
A campaign is assembled from a fixed set of typed section blocks, so a new landing page is a content decision and not an engineering ticket. The blocks are locked to the brand tokens, which is what keeps twenty campaigns looking like one company. Each block declares the copy and media it needs, so a half-filled section can't ship.
- Pages assembled from typed section blocks, not from scratch
- Blocks locked to brand tokens across every campaign
- Required copy and media declared per block; no half-filled sections
Automated A/B Testing Engine
Built-in variant testing for headlines, hero media, and call-to-action buttons.
Variants are resolved at the edge before the page is served, so there's no flash of the control and no layout shift while a client-side script decides. Assignment is sticky per visitor and stable across sessions. Results are read against a pre-declared primary metric with a minimum sample set before the test starts, so a campaign can't be called the moment it happens to look good.
- Variant resolved at the edge: no flash of control, no shift
- Sticky assignment across sessions
- Primary metric and minimum sample declared before the test runs
A headline test, called: control and Variant B side by side with visitors, sign-ups and rate, both past the 14,000-per-arm minimum declared before the start, and the +42% lift called on day nine, not on day one when B first looked good.
What moved after the redesign
+42%
Landing page conversion
< 2 hours
Time to launch page
−31%
Ad bounce rate
Conversion is measured per campaign against the same channel's previous campaign, not across the account, so creative differences are held as close to constant as this allows. Bounce rate is mobile paid traffic specifically. Time to launch is measured from brief to published page for the pages the marketing team built unaided.
Client name withheld under NDA. Figures are approximate, drawn from the engagement’s own reporting.
Principles that held
- 01
Sub-800ms global page load time reduced mobile ad bounce rate by 31%.
The bounce was mostly the render-blocking test script the previous pages shipped: paid traffic won't wait, and the test itself had been the cost.
- 02
Modular component library allowed launch of new campaign pages in under 2 hours.
Two hours is a marketing-team figure, not an engineering one, and that's the actual result: the dependency was removed, not shortened.
- 03
Multi-variant A/B headline testing boosted campaign conversion rate by +42%.
Headline testing gave the largest single lift because the headline is the one element every visitor reads, and it had never been tested.
How design and engineering worked together
- 01
A cross-functional team of 3 worked on a fixed price basis over 6 weeks, covering Landing page system, Conversion design, Component kit. We ran two-week increments, each one shippable, reviewed with them before it merged. Decisions were recorded as they were made, so the reasoning survived the people who made it.
Six weeks fixed price against a defined deliverable: a section library, an edge-rendered template and a variant harness. The brand's marketing team built the last two campaign pages themselves during the engagement, with the team watching, because a system that only its authors can operate hasn't removed the dependency it was built to remove.
Assemble a page
Why a page from the library can publish and the open day page couldn't
Load one of Corehaven’s pages as it was built, then add or remove blocks. The publish gate re-checks the load estimate against the budget, counts the asks and the ways out, and refuses anything the library doesn't hold. Switch the variant test to a client-side script to see where the old pages’ four seconds went. Use the arrow keys once a tab is focused.
Blocks · lift label from the library
Paid social
Free trial week
The page behind the console's top line: 41,208 visitors, 1,628 sign-ups.
Goal: Start my free week
- Asks
- 1
- Ways out
- 0
- Blocking
- 0 KB
As built: 3.95% sign-up rate, 0.8 s measured.
Illustrative load model: 0.34 s for the cached document and fonts, the hero’s own paint cost, 0.01 s per deferred block, and 3.2 s for a client-side test script. Lift labels are per block, measured across 140 campaigns; they are not additive.
From a paid click to a painted page, variant already chosen
The old pages lost their traffic before they became readable, mostly to a test script that blocked render. Here every decision a page needs is made before it's sent, so paid traffic lands on a cached document instead of waiting on a render.
- 01 · Trigger
Campaign brief and paid click
- One page per campaign, four paid channels
- Each page carries one conversion action
No arrangement produces two competing asks
- 02 · Assembly
Typed section library
- Blocks drawn from the brand's own converting pages
- Locked to the brand tokens
- Figma system mirrors the code
A block missing its copy or media can't ship
- 03 · Build
Next.js static generation
- Fonts self-hosted and subset
- Hero preloaded at its rendered size
- Everything else deferred
Paint held under a second on a mid-range phone over 4G
- 04 · State
Variant harness
- Primary metric declared before the test
- Minimum sample declared before the test
- Assignment sticky per visitor
A test can't be called just because it looks good early
- 05 · Delivery
Vercel Edge and analytics
- Cached document served from the edge
- Variant resolved before the page is sent
- Variant tracking in Vercel Analytics
No flash of the control, no layout shift
Fast, honest, finished
Wasted clicks, false winners & broken pages
The page never waits on the test
Variants resolve at the edge before the page is served, so no client-side script decides while the visitor waits: no flash of the control, no layout shift. Load is judged on a mid-range phone over 4G, where the paid traffic actually arrives.
No test is called on a good day
The primary metric and the minimum sample are declared before a test starts, and assignment is sticky per visitor across sessions. Conversion is read per campaign against the same channel's previous campaign.
No half-filled page, no second ask
Each block declares the copy and media it needs, so a half-filled section can't ship, and each page carries one conversion action, so the library has no arrangement with two competing asks.
Paying for clicks that leave before your page loads? Scope your build in 3 minutes.
Scope your buildNearby engagements
Data & AnalyticsA checkout that stopped losing sales to a 6-second load
Profiling found the real bottleneck behind a slow checkout (an N+1 query and an oversized bundle) and tuned both, with before-and-after metrics locked in as a baseline against future regressions.
E-commerce & Retail · 5 weeks
Web PlatformsA reader people finish, and a library that remembers where they stopped
A reading platform for a comics catalog: a browse surface people can actually navigate, a reader that gets out of the way, and a history that puts everyone back on the page they left.
E-commerce & Retail · 18 weeks
Web PlatformsOne number, a whole handset, and a database that keeps up with 125 brands
A metered IMEI lookup service that turns fifteen digits into a device, its specifications and its status. It's sold three ways to three audiences and backed by a device database that maintains itself.
Consumer Electronics · 22 weeks
Let's talk
Running a large platform, shaping a first MVP, or getting a product ready for a funding round? Tell us where you are. We'll shape the process around it, and stay with you after launch.
