Imported from angelarose210/high-converting-ui-skill (openclaw/skills/high-converting-ui/SKILL.md). Install upstream with npx skills add angelarose210/high-converting-ui-skill --skill high-converting-ui. Copyright stays with the author.

High-Converting UI

Design interfaces that guide a user from "this looks interesting" to "I need this" — by answering questions before they're asked, removing doubt before it forms, and making every decision feel easy.

Distilled from UX case-study teardowns of real product-page, paywall, pricing, and booking redesigns, grounded in named persuasion research.

The one idea everything hangs on

Every element on a screen asks the user a question. The question you ask determines whether they act or hesitate.

A paywall that says "Get access to 1,000 games — $19/mo" asks "Is this worth $19 a month?" — a hard question for someone who opened the app 30 seconds ago. The winning variant asks "Can I try this for free?" — an easy question with an obvious yes. Same product, same price, same trial. One converts far better because it asks an easier question.

Before shipping any screen, name the question each element is really asking. If it's a hard question ("How much am I willing to risk?", "Is this worth it?", "Should I be the first to try this?"), rewrite the element so it asks an easy one ("Which one do I want?", "Can I try it free?", "How do I start?").

The corollary that runs through every principle below: users are not making logical decisions. Defaults feel like recommendations. The first number sets the anchor. A gift creates a debt. Building something makes it yours. Progress — even fake progress — creates momentum. Design to how people actually think, not how you wish they did.

How to use this skill

• Designing a new screen → pick the matching playbook in Screen playbooks, then pull principles from the library.
• Critiquing / auditing an existing screen → run the Conversion audit checklist; for each flag, cite the principle and the specific fix.
• Building a whole page rather than critiquing a screen → start with conversion-page-anatomy for section order, page-type variant, and CTA/social-proof cadence, then return here to write the contents of each slot. That skill decides what sections exist; this one decides what goes in them.
• Explaining why a change works → every principle carries its research/psychology so recommendations are grounded, not gut-feel.
• Pair with a visual-craft skill for the aesthetic layer (typography scale, spacing rhythm, color systems). This skill covers the persuasion layer; craft covers the aesthetic layer. High-converting AND visually pleasing = both.

Always give the rule + the reason + the concrete pattern. "Add a badge" is weak. "Add a Best Seller badge above the title (halo effect — one positive attribute colors the whole perception before they read a detail)" is usable.

Principle library

Principles are grouped by the job they do. Each has: the rule, why it works, and the pattern (how it shows up in a real interface). Studies are cited where a source named them.

A. Reduce the cost of deciding

The more effort a decision takes, the more likely the user makes no decision and leaves. Every principle here lowers that effort.

A1 — Ask the easy question. Reframe the primary decision from hard to easy. "Is this worth $19/mo?" → "Can I try it free?". "How much am I willing to risk?" → "Which one do I want?". Why: the easiest answer to a hard question is "I'll decide later" — which means never. Pattern: headline and CTA frame the low-commitment next step, not the terminal commitment. "How your free trial works" beats "Get access — $19/mo".

A2 — Smart defaults. Pre-fill every field with the most common choice. Pre-select the option most users should pick. Why: 70–90% of users never change a default. A default reads as a recommendation ("this is what most people pick"). The user's job shifts from "fill this out from scratch" to "scan and adjust what doesn't fit" — a fundamentally easier task. Pattern: booking form pre-filled with sensible dates/guests; subscription option pre-selected with a "Most Popular" tag; search button reading "Show 12 results" instead of blank "Search".

A3 — Fewer choices (Hick's Law + the Jam Study). Cut the number of options presented at once. Reveal complexity progressively. Why: Columbia's jam study — 24 flavors displayed → 3% bought; 6 flavors → 30% bought. More choice means harder, not better. Pattern: show 3 pricing tiers, not 8; collapse edge-case options behind "More options". Scope: A3 governs simultaneous distinct choices. Repeating one identical CTA down a long page is reinforcement, not choice — the choice set stays at n=1, so it does not violate Hick’s. Two competing CTAs in one section do. Icon/benefit rails are scanned rather than chosen between, so 7 items is fine there.

A4 — Recognition over recall (kill the dropdown). For fewer than ~5 options, replace dropdowns with visible swatches/cards/buttons. Why: a dropdown forces click → scroll → read just to see the choices. Visible options are recognized instantly with zero interaction. Pattern: flavor/size/color as tappable swatches with icons, not a <select>.

A5 — Progressive disclosure. Keep the initial view clean; reveal detail on interaction. Why: protects the primary decision from overwhelm while still rewarding engagement. Pattern: clicking "One-time purchase" expands to show tiered bundles (1mo, 2mo −10%, 3mo −20%); advanced settings hidden until asked for. Scope: applies to interaction depth (accordions, expanders) inside the decision zone — not to page length. A long scroll of self-contained sections is not cognitive load. Collapse detail inside the decision zone; expand it below the fold.

A6 — Evaluative ease. Make options directly comparable in ~2 seconds. Remove anything the brain has to compute. Why: the less work a comparison requires, the more likely a choice gets made. Pattern: one clear number per option (see B1); day-count badges that save mental math ("5 nights"); total price shown so there's no "what's the real cost?" calculation.

B. Frame and anchor

You rarely change what something is — you change what it's compared against.

B1 — Show one number, never a range. Replace price ranges with a single number. Why: the brain doesn't average a range — it anchors to the high end. "$13–$17" is processed as "$17 you might get lucky on." Three ranges at once = too many unknowns = no decision. Pattern: "$14" not "$13–$17"; if variance is real, show the specific price for the specific context.

B2 — Control the first number (contrast effect). Never show a cost in isolation. Place it after a larger, related number. Why: the brain evaluates every value relative to the one it saw immediately before. $50/mo shown alone → "$600/yr, too much." $50 shown right under a $1,900 laptop, labeled "just 2.6%" → a rounding error. Restaurants list a $90 steak to make the $40 salmon feel reasonable. Pattern: show the protection plan inside the cart after the expensive item; anchor a premium tier above the tier you want sold.

B3 — Anchor with a strikethrough. Show the original price crossed out next to the current price, with a percent-off badge. Why: anchoring working for you — the crossed-out €129 makes €89 feel like a win instead of a raw cost. Pattern: €129 €89 −31%.

B4 — Specificity is trust. Use specific, non-round numbers everywhere. Why: round numbers (100, 200, 500) read as estimates, placeholders, or fake. "4.9 stars, 221 reviews" feels authentic. "Start in 2 taps" kills uncertainty better than "quick setup." "Delivery in 23 minutes" converts better than "fast delivery." The number does the convincing. Pattern: exact review counts, exact step counts, exact times, exact percentages.

C. Build trust and remove risk

A user who trusts you converts. Most screens create doubt without noticing.

C1 — Transparency bias. Proactively reveal a potential downside. Why: when a company volunteers a risk, users trust it more, not less — it signals "we're on your side." The single line "Day 5: we'll remind you before your trial ends" does more work than three feature bullets, because it says "we're not trying to trap you." Pattern: a trial timeline (Today → Day 5 reminder → Day 7 first charge, cancel anytime); "free cancellation before March 26"; no hidden fees promised up front.

C2 — Reciprocity (give before you ask). Deliver real value before requesting signup/email/payment. Why: receiving something first creates an unconscious debt to reciprocate — Cialdini ranked it the single most powerful driver of behavior; grocery free samples lift purchases up to ~2,000%. Blurring results behind "Create an account to see your report" is like a restaurant demanding your card before showing the menu — users walk. Pattern: show a partial-but-genuinely-useful result (score + top issues + what passed), then "Want the full breakdown? Save your report." Spotify's 30 free days, Notion's full free product, Costco samples.

C3 — Social proof. Signal that many others already chose this. Why: converts "should I risk being first?" into "hundreds are buying this — it must be good." Pattern: "500+ sold this week" with a subtle fire icon; specific review counts (ties to B4); "guest favorite" / "superhost" badges.

C4 — Halo effect badge. Crown the item with a status badge above the title. Why: one positive attribute frames perception of the whole product before a single detail is read. Pattern: "Best Seller" / "New Arrival" / "Top Rated" badge at the top of the content stack.

C5 — Answer the unspoken objection, specifically. Replace generic trust text with the specific fear the buyer actually has. Why: "Free shipping / Made in USA" are expected and build no trust anymore. The real question for a health buyer is "is this safe?" — so "third-party tested for heavy metals" lands where "lab tested" doesn't. Pattern: custom icons for the audience's actual concerns (100% vegan, 60-day guarantee, third-party tested); "free cancellation" on a booking; total-price-on-button to kill hidden-fee anxiety.

D. Create investment and momentum

People value what they build and protect what they feel they own.

D1 — Goal gradient effect (never start at zero). Show progress that's already underway. Find something the user has done and count it. Why: the closer people feel to finishing, the faster they move. Car-wash study: a 10-stamp card with 2 pre-filled beat an 8-stamp blank card ~2× on completion, for the same 8 washes. You choose where the starting line is. 0% feels like standing still; 20% feels like momentum. Pattern: onboarding at "20% complete, step 1 done" instead of "0%, 5 steps left"; LinkedIn's profile-strength meter that's never zero.

D2 — IKEA / endowment effect (let them build first). Let users create/customize before asking them to sign up. Why: people value what they build far more than an identical thing handed to them; even just feeling ownership is enough. After investing choices, closing the tab feels like abandoning something they made. Pattern: let them pick name, colors, layout, complete the first lesson — then show signup, with the button reading "Continue" not "Sign up." Duolingo: language + goal + first lesson done before the account screen ever appears.

D3 — Loss aversion (show what they lose, not what they gain). Frame the ask around what's at stake if they don't act. Why: Kahneman — the pain of losing is ~2× the pleasure of gaining the same thing. "Upgrade now / Maybe later" has zero psychological weight. Showing the user's actual files by name with a countdown, and a dismiss button that reads "I'll risk it," makes inaction feel costly (status quo bias — we protect what we have). Pattern: a pitch sells the gain; a threat shows the loss. Name the specific thing at risk; make the escape hatch admit the cost.

D4 — Commitment & consistency. Get a small, easy commitment locked in before the real ask. Why: once a user has "decided" the destination, the remaining question ("which car?") is far smaller than "should I ride at all?". Pattern: show the chosen destination card on the map before ride options; pre-select the plan so the decision is "keep or change," not "choose from scratch."

E. Copy and language

Words carry psychological weight the layout can't override.

E1 — Weigh your verbs. "Subscribe" = commitment, recurring payment, hard to cancel, locked in. "Start" = a light beginning. Choose the verb that asks the easy question. Pattern: "Start my free trial" not "Subscribe and start free"; "Continue" not "Sign up"; "Add to cart — start my journey" reframes a transaction as a positive step.

E2 — "My," not "your." First-person possessive creates ownership before the tap. Pattern: "Start my free trial" beats "Start your free trial."

E3 — Sensory / emotional language. Describe the experience, not the specs. Why: activates imagination and makes the payoff feel already-present. "Beachside escape, steps from the sand" transports; "Beach house with garden" merely informs. Pattern: concrete, sensory, spatial detail in titles and value props.

E4 — Let one word do the categorizing. A single, well-placed label can pre-decide the choice. Pattern: a small green "Cheaper" badge on the option you want picked — the brain files it as "the smart choice" without reading further.

F. Imagery and visual hierarchy

F1 — Show, don't decorate. Every image should answer "what am I actually getting?" — not just look pretty. Why: a gorgeous space illustration on a games paywall is decorative; actual game characters let the user visualize what they're subscribing to. You can't commit to what you can't picture. Pattern: hero shows the product in use / the real content, not abstract art.

F2 — Bridge the imagination gap. Show the product and its result/experience together. Why: users can't touch a digital product; showing the outcome removes the mental leap from "raw item" to "experience." Pattern: the supplement tub next to a freshly mixed glass with fruit — not the tub alone on white.

F3 — Transport, don't inform (imagery scale). Give the key image room to carry emotion. Why: a photo squeezed into a thumbnail reads as "a listing"; the same photo at half-screen reads as "a place you might actually go." A form never excited anyone. Pattern: large hero imagery for aspirational products; thumbnails only for dense comparison lists.

F4 — Establish first / second / third glance. Direct the eye deliberately: visual anchor (badge) → hero image → title → proof → decision → CTA. Pattern: status badge at top, then imagery, then specific social proof, then the framed choice, then the reframed CTA with trust icons beneath. Use color sparingly — reserve the accent (often green = "go/correct choice") for the option you want chosen and the primary CTA; grouping (Gestalt proximity) ties reassuring microcopy inside the option it reassures.

Screen playbooks

Each playbook is an ordered set of moves. They compose — a checkout has product-page and pricing concerns.

Product / ecommerce page

1. Halo badge above the title (C4).
2. Hero shows the product in use, bridging the imagination gap (F1, F2).
3. Specific social proof — "4.9 ★ · 221 reviews", "500+ sold this week" (B4, C3).
4. Options as swatches, not dropdowns; tooltips for sensory reassurance (A4, C5).
5. Purchase choice as side-by-side cards, preferred option pre-selected + "Most Popular", reassurance inside the card (A2, D4).
6. Progressive disclosure of bundles on the alternate choice (A5).
7. CTA reframed ("start my journey"), audience-specific trust icons beneath (E1, C5).

Paywall / trial

• Ask "can I try free?", not "is it worth $X?" (A1).
• Trial timeline with an explicit pre-charge reminder → transparency bias (C1).
• Verb = "Start", possessive = "my", add a specific step count ("in 2 taps") (E1, E2, B4).
• Hero shows real content you're unlocking, not decoration (F1).

Pricing page

• Anchor with a higher tier so the target tier feels reasonable (B2).
• One clear number per tier; ≤3 tiers visible (B1, A3).
• Pre-select / "Most Popular" the target tier (A2).
• Strikethrough annual-vs-monthly savings (B3).
• For add-ons, show cost relative to the main purchase ("just 2.6%") (B2).

Onboarding

• Never start at 0% — count something already done, open at ~20% (D1).
• Let users build/customize before signup; button = "Continue" (D2, E1).
• Smart defaults on every field (A2).
• Deliver a real result before asking for the account (reciprocity) (C2).

Booking / reservation

• Transport with large imagery + sensory title (F3, E3).
• Anchor the price (strikethrough + % off) (B3).
• Reframe cost → convenience ("2 min away", day names, night count) (A6).
• Total price on the button; free-cancellation line to kill the top objection (C5, C1).
• Destination/date locked in first → commitment consistency (D4).

Forms

• Smart defaults / pre-fill everything you can infer (A2).
• Cut fields to the minimum; progressive disclosure for the rest (A3, A5).
• Button states the outcome + count ("Show 12 results", "Reserve · €445 total"), never blank "Submit" (A6, B4).

Conversion audit checklist

Run top to bottom. For each "no," name the principle and the fix.

Framing

• What question does the primary CTA ask? Is it the easy one? (A1)
• Is any price shown as a range, or in isolation with no anchor? (B1, B2)
• Are there strikethrough/reference prices where a discount exists? (B3)

Cognitive load

• More than ~5 options presented at once anywhere? (A3)
• Any dropdown hiding fewer than 5 options that could be swatches? (A4)
• Are fields pre-filled with smart defaults / a preferred option pre-selected? (A2)
• Can the user compare the key options in ~2 seconds? (A6)

Trust

• Is any potential downside hidden that could be volunteered (transparency)? (C1)
• Does the user get real value before being asked to sign up/pay? (C2)
• Specific, non-round numbers for proof? (B4, C3)
• Do trust signals answer the audience's actual fear, or generic filler? (C5)

Investment

• Does onboarding start above 0%? (D1)
• Can users build/customize before the signup wall? (D2)
• Is the ask framed as a gain (weak) when it could be a loss (strong)? (D3)

Copy

• Do CTA verbs match the commitment level ("Start" vs "Subscribe")? (E1)
• "My" instead of "your" on personal CTAs? (E2)
• Sensory/emotional language on titles and value props? (E3)

Imagery & hierarchy

• Does the hero answer "what am I getting?" or is it decorative? (F1)
• Is the product shown with its result/experience? (F2)
• Is the accent color reserved for the target choice + primary CTA? (F4)
• Clear first → second → third glance order? (F4)

Anti-patterns (the "before" side of every teardown)

• Blank forms full of empty fields (decision fatigue).
• Round numbers pretending to be data ("200+ reviews").
• Dropdowns for 2–3 options.
• Equal-weight radio buttons where one option should be nudged.
• "Add to cart" / "Subscribe" / "Submit" — transactional, commitment-heavy, or vague verbs.
• Price ranges and isolated prices with no anchor.
• Value locked behind a signup wall before any value is given.
• Decorative hero art that doesn't show the product or content.
• Generic trust badges ("Free shipping, Made in USA") that everyone expects.
• Onboarding that opens at 0%.
• Framing everything as a gain and offering a frictionless "Maybe later."

The test: a screen that does everything "right" and still feels fine usually fails, because fine doesn't convert. Informing the user isn't enough — you have to move them.

What Is Not Included

This public release is the distilled principle library, playbooks, and audit checklist — the reusable framework. It deliberately does not ship:

• Source video transcripts, key frames, or screenshots. The framework was distilled from third-party UX case-study videos; those copyrighted materials are not redistributed here. Every principle above is stated in full on its own terms, so the skill is fully standalone without them.
• Named example brands as endorsements. Brand names (Duolingo, Spotify, Costco, etc.) appear only as widely-known illustrations of a public pattern, not as case data.
• Any tooling, pipeline, or automation used to produce the original analysis.

The principles cite public research (Iyengar's jam study, Kahneman's loss aversion, Cialdini's reciprocity, the car-wash goal-gradient study) — look those up directly for the primary sources.