| name | conversion-design |
| description | Design and audit conversion-focused screens — funnel definition, friction-vs-trust balance, form field selection (every field is a cost), one CTA per screen discipline, social-proof placement, microcopy patterns, and the conversion-rate measurement plan. Reach for this skill when designing or reviewing a landing page, sign-up flow, checkout, or any "convert visitor → action" screen. Used by `ux-designer` (primary) + `content-strategist`. |
Skill: conversion-design
Purpose: Design and audit conversion-focused screens. Used by ux-designer (primary) and content-strategist for the copy + microcopy layer.
Conversion design is the discipline of removing everything that isn't moving the user toward the action. It's a subtractive craft. Most "low-converting" pages are over-designed: too many CTAs, too many form fields, too many competing trust signals, too much hedging copy. The fix is rarely "add more"; it's "cut the noise so the signal is unmistakable."
When to use
- Designing a new landing page, sign-up flow, pricing page, or checkout
- Auditing a screen with a known conversion problem (analytics shows funnel drop)
- Building a microsite or campaign page where the entire purpose is one action
- Reviewing a redesign before launch — the "is this still a conversion screen?" sanity check
1. Funnel definition (the load-bearing step)
Before you touch the design, write the funnel out:
Stage Surface(s) Primary event Friction sources
───────────────── ────────────────────────────── ───────────────────────── ────────────────────────
Awareness Ads, organic, social Page view Targeting accuracy
Consideration Landing, product, pricing Scroll-depth, video-play Clarity, trust, fit
Intent CTA click click_primary_cta CTA copy, position, count
Conversion Form, checkout, sign-up submit_success Field count, friction
Activation Onboarding, first-value first_value_event Time-to-value
Every screen owns one stage. A pricing page that tries to also do "awareness" by re-explaining the product fails at both. Decide which stage the screen serves, then design for that stage's job.
2. One thing per screen
The strongest predictor of conversion: how clear is the next action? Apply ruthlessly:
- One primary CTA per screen (max two, if and only if the two CTAs serve two genuinely distinct segments — e.g. "Start free trial" + "Talk to sales" for self-serve vs enterprise)
- No competing CTAs within the same viewport. Newsletter signup in the footer doesn't compete with the primary CTA above; a "subscribe to our blog" mid-hero does.
- Repeat the same CTA through the page (3–5 placements is normal for a long page) — don't invent new CTAs, repeat the one
- Reference aesthetic: Linear, Cal.com, Resend, Vercel landing pages — one CTA, repeated, page-length-agnostic
3. Form field reduction
Every form field is a cost — but the cost is justification, not a predictable conversion penalty. Make each field earn its place on the grounds that the business has a real use for the data. The discipline:
- What does the business genuinely need to fulfill this action? That's the minimum.
- What's nice to have? Move it to a post-conversion progressive-profiling step.
- What does Sales want? Sales wants more; the funnel wants less. The funnel wins unless Sales can show data otherwise.
- Replace dropdowns with smart defaults (geo-IP for country, browser-locale for language)
- Replace "confirm email" with email validation
- Replace "create password" with magic-link auth where the security model allows
- Use a single name field ("Name") not first / last / middle unless you legitimately need them apart
⛔ "Fewer fields always converts better" is folklore — do not repeat it
Field count is a weak predictor of conversion next to field clarity, user motivation, and context. The counter-evidence is direct: in a documented A/B test, removing fields dropped conversion by 14%, while merely relabelling the same fields raised it by 19.21%. The same source records a 30+ question form converting at 53%, and answers "is shorter better?" with "No, not necessarily."
[source: https://ventureharbour.com/how-form-length-impacts-conversion-rates/ — retrieved 2026-08-17, summarising a ConversionXL / Michael Aagaard case]
So argue field reduction on the grounds that actually hold. Cut a field you cannot name a use for — that is data minimisation, and it stands on its own merits (less to store, less to breach, less to justify under a privacy review). Do not promise a conversion lift for it. If conversion is the goal, test the change: field count is one of the few things genuinely worth A/B-testing (§8), precisely because its effect is not predictable in advance.
⛔ A per-field percentage penalty is not a real number. Until 2026-08-17 this section stated "each additional required field reduces completion by ~5–7%" and carried a completion-by-field-count benchmark table (1 field → 35–50%, 7+ → <10%). Both were unsourced, and both are contradicted by the evidence above. They were removed rather than re-cited: the figures usually quoted in support are single-company tests, not controlled research, and presenting them as "benchmarks" lent invented precision the underlying data does not have. If you need a number for a specific funnel, measure that funnel — a borrowed conversion rate is a claim about someone else's traffic.
4. Trust signals — when to use which
Trust signals are not interchangeable. Pick by the visitor's specific objection:
| Trust signal | Best for | Anti-pattern |
|---|
| Customer-logo bar | "Is this legit / is anyone using it" | Logos of customers who churned, or who never used the paid tier |
| Testimonial quote | "What's it actually like to use" | Anonymous quotes; "John D., Marketing Manager" — needs full name + photo + company |
| Case study | "Will this work for someone like me" | Generic case studies; the visitor needs to see their own segment |
| Third-party rating (G2, Capterra) | "How does this stack up vs alternatives" | Showing a 4.2 if the category leader has 4.8 |
| Press / award badges | "Have credible outsiders endorsed this" | Self-awarded badges; expired press; "as seen on" without a real story |
| Stat / proof point ("Trusted by 10k+ teams") | "Is there scale" | Round numbers with no source; vague "thousands of customers" |
| Security / compliance badges (SOC 2, GDPR) | "Can I get this past procurement" | Decorative — only when the buyer actually requires it |
| Founder / team photo | Small-team transparency, indie SaaS | Stock photos masquerading as the team |
Placement rule: trust signals belong next to the objection they answer. Logos near the hero (legitimacy), testimonials near the long-form pitch (depth), security badges near the pricing / signup (procurement objection).
5. CTA copy patterns
Cleverness loses to specificity. The best-performing CTAs say what happens next.
| Generic | Specific | Why specific wins |
|---|
| "Get started" | "Start free trial" | Reduces ambiguity about commitment |
| "Submit" | "Send message" | Names the outcome |
| "Learn more" | "See pricing" / "Read the docs" | Names the destination |
| "Sign up" | "Create free account" | Reassures it's free |
| "Click here" | (rewrite the surrounding sentence) | "Click here" is a 1998 anti-pattern |
| "Buy now" | "Add to cart" / "Subscribe — $X/mo" | Sets the expectation |
Microcopy under the CTA earns its space. "No credit card required." "Free for 14 days, no questions." "We'll never share your email." A single 8-word reassurance under the button can recover meaningful conversion.
6. Pricing-page conversion patterns
Pricing is its own discipline; the consensus 2026 patterns:
- Three tiers, middle is the recommended default — visually emphasized (border, badge, slightly larger card). Anchors the decision around the middle, where most users land.
- Annual / monthly toggle — discount the annual; show the per-month-when-billed-annually number
- Enterprise tier "Contact us" — no price; this is the qualification gate
- Feature comparison table below the cards — for the careful comparison shoppers
- FAQ below the table — handles the standard objections (refund policy, cancellation, security)
- Same CTA on every tier ("Start free trial" or "Get started") — don't make the user think about which button is right
7. Error states and inline validation
Errors as helping, not punishing. Patterns that work:
- Inline validation on blur, not on submit. Tell the user immediately, not at the end.
- Specific error copy — "Email already in use — sign in instead?" not "Invalid input"
- Recovery action in the error — if email already exists, link to sign-in from inside the error
- Never red-as-the-only-signifier — icon + color (§3 #10 in plugin CLAUDE.md)
- Field-level errors at the field, not in a global banner above the form
- Preserve user input on error — never blank a form on submit failure
8. Measurement plan
A conversion design isn't done until the measurement is wired:
- Event taxonomy — what events fire on the funnel?
page_view, cta_click, form_field_focus, form_submit, submit_success, submit_error
- Segment by source — paid vs organic vs direct vs referral; conversion rates can differ 5x across sources
- Funnel definition in the analytics tool — declared once, used in every report
- Cohort by week — daily noise is high; weekly cohort smooths the signal
- A/B test only what's likely to move the needle — CTA copy, hero headline, form-field count. Don't A/B-test button colors. Don't A/B-test things that affect < 5% of visitors.
- Statistical significance gate — don't ship a winner with p > 0.05. Plan the test duration upfront based on expected effect size and baseline traffic.
Hygiene checklist
Anti-patterns
- Vague CTAs — "Learn more", "Get started" without context, "Submit"
- Dark patterns — pre-checked newsletter consent, hidden recurring charges, "confirmshaming" ("No thanks, I don't want to save money"), fake countdown timers, fake "X people viewing this now"
- Two competing primary CTAs with equal visual weight in the same viewport
- Newsletter modal on first scroll — interrupting the user before they've seen the value
- Carousel / slider as the hero — fights for attention with itself; clicks are vanishingly rare on slides 2+
- Long-form pitch with no progressive disclosure — every section visible at once means none of them get read
- Pricing page with five tiers — paralysis. Three is the maximum, four if there's a genuine enterprise tier
- "Contact sales" as the only path for a product priced under $5k/year — self-serve buyers bounce
- Mid-page "subscribe to our newsletter" form on a sign-up page — competes with the primary action
- Lorem ipsum in launched mocks — hides the real layout problem caused by realistic copy lengths
- Form labels as placeholders only — accessibility broken, plus the label vanishes when the user types
- No empty / loading / success state designs — only the happy path is mocked
See also
