Agentic Coding UX pattern catalogue
Contents

Reference · UX pattern catalogueBusiness & conversion patterns

37 patterns in this category — each with its illustration, what it is, and the fields that matter when you build or review one. Part of the UX pattern catalogue; the raw, agent-readable version is ux-pattern-catalogue/business-patterns.json.

Landing

Get Started Demo Visual above the fold

Hero Section Formula business-001

Structure the hero as: headline (outcome, not feature) + subheadline (how it works) + primary CTA + supporting visual. Keep above the fold.

Why it works

Users form opinions in 50ms (Lindgaard et al.). StoryBrand framework: lead with the transformation. CXL research shows outcome-focused headlines outperform feature-focused by 28%.

Example

Stripe — "Financial infrastructure for the internet" + clear CTA.

Source

StoryBrand / CXL Institute

Start your free trial Sign Up Free Trusted by 10,000+ teams 500+ reviews

Social Proof Placement business-002

Place social proof (logos, testimonials, user counts) directly above or below the primary CTA. Use real numbers. Show recognizable customer logos in a row.

Why it works

Cialdini's social proof principle. Baymard Institute: 60% of users actively look for reviews/trust signals before committing.

Example

Notion — customer logos bar between hero and features.

Source

Baymard Institute / Cialdini

HERO Primary CTA Secondary FEATURES SECTION Same CTA

CTA Hierarchy business-003

One primary CTA per viewport. Primary button for main action, secondary/ghost for alternatives. Repeat CTA after every 2-3 content sections on long pages.

Why it works

Hick's Law — more choices increase decision time. CXL research: pages with a single clear CTA convert 13-28% better.

Example

Linear — single "Start building" CTA, repeated at hero and page bottom.

Source

CXL Institute

Basic $9 /month Choose Popular Pro $29 /month Choose Enterprise $99 /month Contact

Pricing Page Psychology business-004

Show 3 tiers (decoy effect). Highlight the recommended tier visually with "Most Popular" badge and center position. Show annual/monthly toggle with savings percentage.

Why it works

Von Restorff isolation effect for the highlighted tier. Decoy effect (Ariely): the third option makes the target look better. Unbounce: showing savings percentage increases annual plan adoption 20-30%.

Example

Vercel — 3 tiers, Pro highlighted center, annual savings shown.

Source

Dan Ariely / Unbounce

FAQ How does billing work? Can I cancel anytime? Do you offer a free trial?

FAQ Structure business-005

Use accordion components. Lead with objection-handling questions ("Is my data secure?", "Can I cancel anytime?"). Order by frequency of user concerns.

Why it works

Addresses buying objections at the decision point. Baymard: 21% of users abandon due to unanswered questions. Accordion reduces cognitive load.

Example

Stripe — FAQ section addresses security and compliance concerns first.

Source

Baymard Institute

Sign Up Hero --- fold --- below fold

Above-the-Fold Framework business-006

Above the fold must answer: (1) What is this? (2) What can I do here? (3) Why should I care? No scrolling required to understand the value proposition.

Why it works

NNGroup: users spend 57% of viewing time above the fold. Krug's "Don't Make Me Think" — if users can't understand the purpose instantly, they leave.

Example

Slack — headline, subheadline, and CTA all visible without scrolling.

Source

NNGroup / Steve Krug

Onboarding

Get Started 30% Create your account Connect your data source Invite team members Create your first dashboard

First-Run Experience business-007

Show a guided first action, not a feature tour. Lead the user to their activation moment within 3 clicks. Use a progress checklist (3-5 items) that persists across sessions.

Why it works

Fogg Behavior Model: motivation is highest at signup — reduce friction to capitalize. Chameleon research: onboarding checklists increase activation rates by 30-40%.

Example

Notion — immediately prompts creating a first page, not a product tour.

Source

Fogg Behavior Model / Chameleon

Sign up Add data 1st action Value! Shortest path to value Remove every unnecessary step time-to-value

Activation Moment business-008

Design the shortest path from signup to the user experiencing core value. Remove every unnecessary step between signup and activation.

Why it works

Product-led growth: time-to-value is the #1 predictor of free-to-paid conversion. Every extra step loses ~20% of users (Heap Analytics).

Example

Canva — users create their first design within 60 seconds of signing up.

Source

Wes Bush / Heap Analytics

DAY 1 Quick signup Email you@... Start free later DAY 7 Complete profile Full name Company Role Ask less now, more later

Progressive Profiling business-009

Ask only email (or OAuth) at signup. Collect additional profile data after the user has experienced value, spread across natural touchpoints.

Why it works

Baymard Institute: every additional form field reduces conversion by ~3%. Collect data when users have motivation to continue (post-activation).

Example

Spotify — signs up with email only, asks genre preferences after first play.

Source

Baymard Institute

API Key sk-proj-... ? Find your API key in the Developer Settings page. Webhook URL https://... Help at the point of need

Contextual Help business-010

Prefer contextual tooltips and inline hints over modal tutorials. Show help at the moment of need, not upfront.

Why it works

Krug: users don't read instructions. NNGroup: contextual help is 3x more effective than upfront tutorials because it arrives at the moment of relevance.

Example

Figma — contextual tooltips appear on first interaction with each tool.

Source

NNGroup / Steve Krug

Trust

Buy Now — $49 SSL Verified 30d Refund Trust signals near the CTA

Trust Signal Placement business-011

Place trust signals within visual proximity (200px) of the commitment action. Stack trust elements vertically below or beside the CTA button.

Why it works

CXL Institute: trust signals placed near CTAs increase conversions by 11-42%. Proximity creates an implicit association between action and reassurance.

Example

Shopify — trust badges directly below the "Start free trial" button.

Source

CXL Institute

High Case Study: Acme +40% SOC2 Certified Med J "Saved us 20 hrs/week" — Jane, CTO Low 12,847 users trust this product

Social Proof by Commitment Level business-012

Match proof type to commitment level: low (user count, logos), medium (testimonials with photos), high (case studies, security badges).

Why it works

Cialdini: proof must be relevant and proportional to the ask. A user count suffices for a newsletter; payment needs explicit security assurance.

Example

Basecamp — named testimonials with photos for signup, generic count for homepage.

Source

Cialdini

Start Free Trial 30-day money-back guarantee — no questions asked Cancel anytime — no lock-in

Risk Reversal business-013

State the guarantee explicitly near the payment CTA: "30-day money-back guarantee", "Cancel anytime", "No credit card required".

Why it works

Risk reversal is the #1 conversion lever for SaaS. Baymard: 18% of users abandon checkout due to unclear return/refund policy.

Example

Basecamp — "Cancel anytime. No questions asked." directly below CTA.

Source

Baymard Institute / Pedro Cortes

Secure Checkout 256-bit SSL Card number 4242 **** **** **** MM / YY CVC VISA MC AMEX PCI DSS

Security Indicators business-014

Show lock icon + "Secure" text near sensitive fields. Display SSL/encryption badges near payment forms. Show "Your data is encrypted" near data collection.

Why it works

Baymard: 18% of users abandon checkout due to security concerns. Visual security indicators reduce perceived risk even when underlying security is identical.

Example

Stripe Checkout — lock icon and "Powered by Stripe" near card fields.

Source

Baymard Institute

Order Summary Pro Plan (annual) $228.00 Discount (20%) -$45.60 Tax $18.24 Total $200.64 No hidden fees — full breakdown

Transparency Patterns business-015

Show pricing without hidden fees. Display data usage clearly. Provide easy access to privacy policy. Show "what we do with your data" summaries near data collection.

Why it works

NNGroup: transparency builds long-term trust. Users who understand what happens with their data are 2x more likely to complete forms.

Example

Apple — plain-language privacy labels on every product page.

Source

NNGroup

Pricing

Basic $9 /month Pro $29 /month Team $79 /month

Three-Tier Structure business-016

Offer exactly 3 tiers. The middle tier should be the target. Include a clear feature comparison table below tier cards.

Why it works

Decoy effect (Dan Ariely): the lowest tier makes the middle look better value. Three options satisfy comparison shoppers without choice paralysis.

Example

Vercel — Hobby / Pro / Enterprise. Pro is visually highlighted.

Source

Dan Ariely / CXL Institute

Monthly Annual Save 20% Pro Plan $29/mo $23/mo billed annually at $276 You save $72/year

Annual/Monthly Toggle business-018

Show both billing options with a toggle. Display savings percentage for annual. Default to annual to anchor on the lower per-month price.

Why it works

Anchoring effect — seeing the annual price first makes monthly feel expensive. Showing savings as percentage is more persuasive for lower price points (CXL).

Example

Notion — toggle defaults to annual, shows "Save 20%" badge.

Source

CXL Institute

Payment Details Card number 4242 **** **** 4242 Visa Master Amex Powered by Stripe 256-bit SSL

Trust Signals Near Payment business-019

Place security badges, guarantee text, and payment provider logos directly adjacent to payment form fields.

Why it works

Baymard: 17% of users have abandoned a checkout in the last 3 months solely due to not trusting the site with credit card info.

Example

Stripe — "Powered by Stripe" badge and lock icon inline with card fields.

Source

Baymard Institute

Empty states

No projects yet Create a project to track tasks, collaborate, and ship faster with your team. Create First Project

Value Explanation business-020

Never show a blank page. Show: illustration/icon, brief explanation of what will appear, and a primary action button to create the first item.

Why it works

Krug: blank screens create uncertainty — users don't know if it's broken or empty. Guided empty states increase feature adoption by 25% (Chameleon).

Example

Notion — empty page shows "Press Enter to start writing" with template suggestions.

Source

Steve Krug / Chameleon

Get Started Your journey starts here

Guided First Action business-021

Make the first-action CTA the most prominent element on the page. Use primary button, large size. Pre-fill or scaffold the first item to reduce effort.

Why it works

Fogg Behavior Model: B = MAP (Behavior = Motivation + Ability + Prompt). The empty state IS the prompt — make the action easy and obvious.

Example

Trello — empty board shows "Add a list" prompt, pre-creates a starter list.

Source

Fogg Behavior Model

Revenue Overview Sample Data Connect your data source to see real metrics

Sample Data business-022

Show realistic sample data with a "This is sample data" banner for features where value is hard to visualize (dashboards, analytics, reports).

Why it works

NNGroup: users understand features 3x faster with real-looking data. Removes the chicken-and-egg problem of needing data to see value.

Example

Plausible Analytics — shows demo dashboard with real traffic data before signup.

Source

NNGroup

Retention

Cue Action Reward

Habit Loops business-023

Design for Cue, Routine, Reward. Make the trigger visible (badge, counter), the action effortless (one-click), and the reward immediate (progress, confirmation).

Why it works

Nir Eyal's Hook Model. Products with daily habits have 2.5x higher retention (Mixpanel benchmark).

Example

Duolingo — streak counter (cue), daily lesson (routine), XP animation (reward).

Source

Nir Eyal / Mixpanel

Complete your profile Finish setup to unlock all features 20% complete Name Email Avatar Bio Links

Progress Mechanics business-024

Show progress visually (bar, step counter, checklist). Use the endowed progress effect: start the bar at 20% instead of 0%.

Why it works

Endowed progress effect (Nunes & Dreze): artificial advancement increases persistence. Progress bars increase completion by 40% (CXL).

Example

LinkedIn — profile completeness bar starts at 25% (photo counts as progress).

Source

Nunes & Dreze / CXL Institute

Welcome back! 3 new While you were away: Alex shared "Q4 Report" with you Build #142 deployed successfully 2 comments on your pull request

Re-engagement business-025

Design re-entry points that show what changed since last visit. Use "Welcome back" state with new content or pending items, not a stale page.

Why it works

NNGroup: returning users need context restoration, not repetition. Showing "what's new" reduces re-learning friction and creates curiosity.

Example

GitHub — "You missed X notifications" on return, not a blank dashboard.

Source

NNGroup

7 Day Streak! M T W T F S S

Streak/Progress Mechanics business-026

Track consecutive usage streaks. Show streak count prominently. Use loss aversion to motivate continued engagement ("Don't break your streak!").

Why it works

Loss aversion (Kahneman & Tversky): losing a streak hurts 2x more than gaining a new one feels good. Streaks increase daily active usage by 30-50%.

Example

Duolingo — streak freeze mechanic and streak celebration animations.

Source

Kahneman & Tversky

? Open reward +5 +1 +50 Rewards vary each time

Variable Rewards business-027

Introduce unpredictability in rewards — random achievements, surprise bonuses, or varied content. Avoid making every reward predictable.

Why it works

Variable ratio reinforcement schedule (Skinner): unpredictable rewards create the strongest behavioral patterns. Used ethically, it drives exploration.

Example

Product Hunt — daily featured products create a variable reward for returning.

Source

B.F. Skinner / Nir Eyal

Navigation

Home About Plans Docs Blog Contact 6 items = scannable in one glance FAQ Team Jobs Press removed

5-7 Navigation Items business-028

Limit top-level navigation to 5-7 items. Group secondary items under parents. Audit items that can move to settings or contextual menus.

Why it works

Miller's Law — working memory holds 7±2 items. NNGroup: navigation with 5-7 items has the fastest task completion times.

Example

Linear — 6 top-level nav items, everything else in contextual menus.

Source

Miller's Law / NNGroup

Home Features Pricing Page Title Sign Up Identity Sections Location Action

Trunk Test business-029

If a user lands on any page without context, can they identify: what site, what page, main sections, what to do? If unclear, improve navigation cues.

Why it works

Krug's "Don't Make Me Think" — users arrive from search, links, and bookmarks. Every page must be self-orienting.

Example

Every page has: logo (identity), breadcrumb or title (location), persistent nav (sections).

Source

Steve Krug

Headline scanned first Subheading scanned F shape

F-Pattern Scanning business-030

Place the most important content top-left. Use strong left-aligned headings. Place CTAs in the natural scan path.

Why it works

NNGroup eye-tracking: users scan in an F-pattern. Content outside this pattern gets 60% less attention.

Example

Medium articles — title and author at top-left, content follows the F-pattern.

Source

NNGroup

Home Tasks Files Settings Always visible

Persistent Navigation business-031

Keep primary navigation visible across all pages. Don't hide navigation behind hamburger menus on desktop. Mobile: use bottom tab bar or hamburger.

Why it works

NNGroup: hidden navigation reduces content discoverability by 21%. Users can't navigate to what they can't see.

Example

Slack — persistent sidebar on desktop, bottom tab bar on mobile.

Source

NNGroup

Feedback

Start End ! Peak End Users remember the peak + ending most

Peak-End Rule business-033

Design the peak moment and ending of multi-step flows to be emotionally positive. Use animations and congratulatory copy at completion.

Why it works

Kahneman's Peak-End Rule: people judge experiences by peak intensity and ending, not the average. A great completion moment colors the entire experience.

Example

Stripe — successful payment shows a satisfying checkmark animation.

Source

Daniel Kahneman

Well done! Continue to next step

Success Celebrations business-034

Minor actions: toast with checkmark. Major milestones: full-screen moment with animation, congratulatory copy, and next-step suggestion.

Why it works

Positive feedback after action strengthens the habit loop (Fogg). Dopamine release from visual reward increases likelihood of repeat behavior.

Example

Duolingo — lesson complete shows confetti + XP animation + streak update.

Source

B.J. Fogg

Task Complete Profile setup finished Suggested Next Invite your team members

Next-Step Suggestions business-035

After any completed action, suggest the logical next action. Never show a dead-end success screen.

Why it works

Zeigarnik effect — people remember incomplete tasks. Providing the next step keeps momentum and reduces drop-off between features.

Example

Notion — after creating a page, suggests adding content blocks or sharing.

Source

Zeigarnik Effect

3 4 Details Address Payment Confirm Step 3 of 4

Progress Indicators business-036

Show a step indicator at the top of multi-step processes. Show current step, completed steps, and remaining steps.

Why it works

NNGroup: progress indicators reduce abandonment by up to 28% in multi-step forms. Users need to know how much effort remains.

Example

Stripe Checkout — step indicator shows "Shipping → Payment → Review".

Source

NNGroup

Default Submit Pressed Submit Tactile feedback: scale + opacity shift Toggle with smooth transition

Micro-interactions business-037

Add subtle animations for state changes: button press feedback, toggle transitions, loading spinners, hover effects. Keep animations under 300ms.

Why it works

NNGroup: micro-interactions create a sense of direct manipulation and responsiveness. Users perceive animated interfaces as 20% faster than static ones.

Example

iOS toggle switch — smooth animation with haptic feedback on state change.

Source

NNGroup

Agentic Coding: The Professional's Guide · A GDE field guide, 2026 · built on the published practice of Matt Pocock, Anthropic, Thoughtworks, GitHub and the practitioners above.