Pre-select annual billing on the pricing table

🎯 Hypothesis

• If we land visitors on annual billing instead of monthly
• By pre-selecting yearly, showing the monthly equivalent under a struck-through monthly price, and keeping a higher decoy tier visible
• Will more paid starts choose annual
• Because Default Effect keeps the pre-selected interval, Anchoring sets monthly as the reference they save against, and the Decoy Effect makes the middle annual plan the clear pick

🔬 Research

Psychology / behavioural economics

• People stick with the option already chosen for them; default effect is why a pre-selected yearly interval outperforms a monthly-first toggle. - source
• The first number on the card becomes the reference (anchoring), so a struck-through monthly total next to the annual price is doing real work. - source
• A third plan that nobody should buy can still move choice toward the target (decoy effect). - source

Case studies

• Organ-donation defaults remain the canonical field result: the pre-selected option is the one most people keep. - source
• Public-sector guidance still treats a sensible default as the highest-leverage change on a choice screen. - source

🖼️ Control

The existing UI for the pricing table, monthly first.

✨ Treatment

Lands on yearly. Each card shows the monthly equivalent, a struck-through monthly total, and a "Save 20%" chip. Starter is marked recommended; Max stays as the expensive neighbour.

<section class="pricing">
  <p class="interval">Monthly <strong>Yearly · save 20%</strong></p>
  <ul>
    <li><h2>Lite</h2><p>$15 / mo</p><s>was $19</s><p>billed $180/yr</p><button type="button">Start</button></li>
    <li class="pick"><h2>Starter · recommended</h2><p>$39 / mo</p><s>was $49</s><p>billed $468/yr</p><button type="button">Start Starter</button></li>
    <li><h2>Pro</h2><p>$79 / mo</p><s>was $99</s><p>billed $948/yr</p><button type="button">Start</button></li>
    <li><h2>Max</h2><p>$119 / mo</p><s>was $149</s><p>billed $1,428/yr</p><button type="button">Start</button></li>
  </ul>
</section>

.pricing { padding: 1.25rem; font: 14px/1.4 system-ui, sans-serif; }
.pricing .interval { margin: 0 0 1rem; }
.pricing ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.pricing li { padding: 0.9rem; border: 1px solid #ddd; border-radius: 12px; }
.pricing .pick { border-color: #111; }
.pricing h2 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.pricing p { margin: 0.15rem 0; }
.pricing s { color: #888; }
.pricing button { width: 100%; margin-top: 0.75rem; height: 2.25rem; border: 0; border-radius: 8px; background: #111; color: #fff; }

📊 Metrics

Primary metric

The deciding metric.

• Annual plan share (%) — share of new paid starts billed yearly

Measurement metrics

Help explain the result.

• Paid start rate (%) — share of pricing-page visitors who start a paid plan
• Starter share of starts (%) — share of paid starts on the recommended tier

Guardrail metrics

Must not regress during the experiment.

• Paid start rate (%) — must not fall while annual share rises
• Day-30 cancellation (%) — share of new paid starts cancelled within 30 days

📈 Results

✅ Conclusion

Variant shipped to all users? Control / treatment