← 피드로
CRO is the systematic process of increasing the percentage of visitors who take a desired action — signing up, starting a trial, or upgrading to a paid plan. It combines rigorous A/B testing methodology with psychology principles and data analysis. This guide covers the CRO framework used at tanstackship.com, including landing page optimization, pricing page design, trial conversion flows, and the infrastructure needed to run continuous experiments.
The CRO Funnel for SaaS
Traffic (100%)
│
▼
Landing Page (5-15% → signup)
│
▼
Signup → Activation (30-60%)
│
▼
Free/Active User (20-40% → paid)
│
▼
Paying Customer
│
▼
Retained Customer
Improving each step by 10% compounds:
100 visitors → 10 signups → 5 paid → 3 retained
100 visitors → 11 signups → 6 paid → 4 retained
= 33% more retained customers from the same traffic
Enter fullscreen mode Exit fullscreen mode
A/B Testing Methodology
Statistical Foundation
// A/B test calculator
export const calculateABTest = createServerFn({ method: "POST" }).handler(
async ({ data }: { data: {
controlVisitors: number
controlConversions: number
variantVisitors: number
variantConversions: number
}}) => {
const controlRate = data.controlConversions / data.controlVisitors
const variantRate = data.variantConversions / data.variantVisitors
// Calculate statistical significance (chi-squared)
const improvement = ((variantRate - controlRate) / controlRate) * 100
// Sample size needed for 80% power at 95% significance
const baseline = controlRate
const minimumDetectableEffect = 0.1 // 10% relative improvement
const zAlpha = 1.96 // 95% confidence
const zBeta = 0.84 // 80% power
const sampleSize =
((zAlpha + zBeta) ** 2 * 2 * baseline * (1 - baseline)) /
(minimumDetectableEffect ** 2)
return {
controlRate,
variantRate,
improvement,
sampleSizeNeeded: Math.ceil(sampleSize),
currentSampleSize: data.controlVisitors + data.variantVisitors,
sufficientData: (data.controlVisitors + data.variantVisitors) >= sampleSize,
}
}
)
Enter fullscreen mode Exit fullscreen mode
Test Requirements
Requirement Minimum Recommended Sample size per variant 1,000 5,000+ Test duration 7 days 14 days (full business cycle) Statistical significance 90% 95% Minimum detectable effect 20% 10%Psychology Principles for SaaS
Principle Application Example Anchoring Show higher price first Enterprise plan before Starter Social proof Show user counts, testimonials “Join 1,200+ SaaS teams” Scarcity Limited-time offers “Early adopter pricing ends soon” Loss aversion Emphasize what they lose “You’re missing out on…” Commitment Start small, build up Free tier → paid upgrade Reciprocity Give value before asking Free guides, templates, tools Decoy effect Third option makes one clearly best Three pricing tiers Authority Expert endorsements “Recommended by [expert name]”The Decoy Effect on Pricing Pages
Tier A: $19/mo (Starter) ← You want this to sell
Tier B: $39/mo (Pro) ← Decoy — slightly worse value than C
Tier C: $49/mo (Enterprise) ← High-end anchor
Without decoy: A and C are compared directly
With decoy: B makes A look like a great deal
(or C makes B look reasonable)
Enter fullscreen mode Exit fullscreen mode
Landing Page Optimization
Above the Fold
// A/B test: headline variants
const headlineVariants = {
control: {
headline: "Build Your SaaS Faster",
subheadline: "A production-ready starter with auth, billing, and more.",
cta: "Get Started",
},
variantA: {
headline: "Ship Your SaaS in Days, Not Months",
subheadline: "Pre-built auth, billing, marketing, and multi-language support.",
cta: "Start Building Free →",
},
variantB: {
headline: "The SaaS Starter That Saves You 200 Hours",
subheadline: "Everything you need to launch — without rebuilding the boring parts.",
cta: "See What's Included",
},
}
Enter fullscreen mode Exit fullscreen mode
Hero Section Testing
Element Test Typical Win Headline Benefit vs feature Benefit wins 80% CTA button Color, size, text High contrast, action-oriented Hero image Screenshot vs illustration Product screenshot wins Social proof Count vs testimonial Count for awareness, testimonial for conversion Form placement Above fold vs scroll Above fold wins for B2B SaaSPricing Page Optimization
Pricing Page Structure
Best practices for SaaS pricing pages:
1. Anchor with highest price first (for annual/monthly toggle)
2. Highlight "Most Popular" or "Recommended" badge
3. Include a comparison table for features
4. Show annual savings prominently ("Save 20%")
5. Offer a free trial or money-back guarantee
6. Use social proof near the CTA
7. Remove navigation links (reduce distraction)
Enter fullscreen mode Exit fullscreen mode
A/B Testing Pricing
// Dynamic pricing based on A/B test assignment
export const getPricingVariant = createServerFn({ method: "GET" }).handler(
async ({}, { context }) => {
const variants = [
{ id: "control", starter: 29, pro: 79, enterprise: 199 },
{ id: "lower_prices", starter: 19, pro: 59, enterprise: 149 },
{ id: "higher_prices", starter: 39, pro: 99, enterprise: 249 },
{ id: "different_tiers", starter: 29, growth: 69, scale: 149 },
]
const index = Math.abs(hashString(context.user.id ?? "anon")) % variants.length
const variant = variants[index]
// Track assignment
await context.env.DB.prepare(`
INSERT INTO ab_assignments
(user_id, test_name, variant, assigned_at)
VALUES (?, 'pricing_page', ?, ?)
`).bind(context.user.id ?? "anon", variant.id, Date.now()).run()
return variant
}
)
Enter fullscreen mode Exit fullscreen mode
Trial-to-Paid Conversion
Trial Funnel Metrics
Metric Definition Good Needs Work Trial start rate % of signups who start trial > 60% < 40% Activation rate % who reach aha moment during trial > 50% < 30% Day 3 active % returning within 3 days > 40% < 20% Conversion rate % who convert before trial ends > 20% < 10% Conversion timing Average day of conversion Day 10-14 Day 28+Trial Emails Sequence
const trialEmailSequence = [
{ day: 0, type: "welcome", subject: "Welcome! Here's your first step" },
{ day: 1, type: "activation", subject: "Set up your project in 2 minutes" },
{ day: 3, type: "tip", subject: "Most users love this feature" },
{ day: 5, type: "case_study", subject: "How [customer] saved 20 hours/week" },
{ day: 7, type: "mid_trial", subject: "Halfway through your trial" },
{ day: 10, type: "offer", subject: "Convert now and save 20% on annual" },
{ day: 12, type: "urgent", subject: "Your trial ends in 2 days" },
{ day: 14, type: "expired", subject: "Your trial has ended" },
]
Enter fullscreen mode Exit fullscreen mode
CRO Infrastructure
// Database schema for experiments
export const experiments = sqliteTable("experiments", {
id: text("id").primaryKey(),
name: text("name").notNull(),
slug: text("slug").notNull().unique(),
status: text("status", {
enum: ["draft", "running", "paused", "concluded"],
}).notNull().default("draft"),
controlVariant: text("control_variant").notNull(),
variants: text("variants").notNull(), // JSON array
hypothesis: text("hypothesis"),
targetMetric: text("target_metric").notNull(),
minimumSampleSize: integer("minimum_sample_size"),
startedAt: integer("started_at", { mode: "timestamp" }),
concludedAt: integer("concluded_at", { mode: "timestamp" }),
winnerVariant: text("winner_variant"),
})
// Track event for experiment
export const trackExperimentEvent = createServerFn({ method: "POST" }).handler(
async ({ data, context }: { data: {
experimentId: string
variant: string
event: string
value?: number
}}) => {
await context.env.DB.prepare(`
INSERT INTO experiment_events
(id, experiment_id, variant, event, value, user_id, created_at)
VALUES (?, ?, ?, ?, ?, ?, ?)
`).bind(
crypto.randomUUID(),
data.experimentId,
data.variant,
data.event,
data.value ?? null,
context.user.id ?? null,
Date.now()
).run()
}
)
Enter fullscreen mode Exit fullscreen mode
CRO Wins for SaaS
Optimization Typical Lift Difficulty Implementation Add social proof to landing page +15-30% Low Add testimonial section Simplify signup form (3 fields → 1) +20-40% Low OAuth-only signup option Add guarantee to pricing +10-25% Low “14-day money back” badge Highlight “Most Popular” plan +15-20% Low CSS badge on pricing card Annual pricing discount +20-30% trial conversion Medium Toggle on pricing page Email sequence during trial +30-50% trial conversion Medium Automated email campaign Personalized onboarding +20-35% activation High UTM-based customization In-app upgrade prompt +15-25% Medium Contextual upsellCRO Process Checklist
- [ ] Conversion funnel defined and tracked (visit → signup → activate → pay → retain)
- [ ] Baseline conversion rates established for each funnel stage
- [ ] Hypothesis documented before every test (why this change should work)
- [ ] A/B test statistical requirements met (sample size, duration, significance)
- [ ] Only one variable changed per test
- [ ] Results analyzed before implementing changes
- [ ] Winning variants implemented permanently
- [ ] Losing variants analyzed for insights
- [ ] CRO results documented and shared with team
- [ ] Continuous testing pipeline established (one test always running)
Conclusion
CRO is not about tricking users into converting — it is about removing friction and building trust at every stage of the funnel. Every element of your landing page, signup flow, pricing page, and trial experience either builds confidence or creates doubt.
The methodology is scientific: form a hypothesis, run a controlled experiment, analyze the data, implement the winner. Small improvements compound: a 10% improvement at each of the four funnel stages (visit → signup → activate → pay) results in a 46% overall improvement in paid conversions.
For a SaaS with built-in A/B testing infrastructure, conversion tracking, and analytics, see tanstackship.com.
답글 남기기