Best How It Works Section Design

What 63 How It Works Sections Taught Us About Conversion

What Makes a Good How It Works Section?

We scored 63 how it works sections across conversion best practices. The table below shows how widely each element is adopted. The lower the number, the bigger your edge by adding it.

Use case specificity is the standout gap: 88% of best-in-class how it works sections name their audience or scenario explicitly, vs 59% overall. Nearly a 30-point spread.

Timeline specificity and effort perception don't appear in our scored dataset yet, but they show up in every strong how it works section we reviewed qualitatively. Shine's onboarding section nails both: each step includes a timeframe and an effort cue so the visitor already knows the commitment before starting.

Score Distribution

Across 63 scored how-it-works sections, here's how scores break down.

How We Score Each How It Works Section

Our AI conversion agent evaluates every how it works section against a weighted checklist that spans three dimensions. Each best practice gets a pass or fail based on the actual page content and screenshot.

• Structure, step-by-step process, visual progression, timeline specificity
• Copywriting, use-case specificity, effort perception, role assignment ("you do X, we handle Y")
• Proof, outcome visualization, before/after contrast, demo video

Not every best practice carries the same weight. Use-case specificity and outcome visualization pull the score up more because in our dataset, how it works sections with those two convert better, even when the other best practices are present.

Sections flagged best-in-class are hand-picked by our team from the highest-scoring sections. A high score gets you on the list. Best-in-class means the structure, copy, and proof all work together.

What the Best How It Works Sections Have in Common

53 how it works sections in our library are flagged best-in-class. They score higher because they stack best practices differently.

1. Named scenarios that feel personal. "For freelancers," "For teams of 6-15." 88% of best-in-class how it works sections include use-case specificity, vs 59% overall. Pennylane lets you pick your company size directly in the section. The visitor reads it and thinks: that's me.
2. Outcome visualization before the CTA. A dashboard preview, a result metric, a "here's what you'll get" visual. 84% of best-in-class sections show the outcome, vs 74% overall.
3. A clear step-by-step process. Three to five steps, numbered, with a one-liner per step. 84% of best-in-class sections use this pattern. It's the defining trait of a good how it works section.
4. Timeline and effort built into each step. The best sections don't just say "Step 2: Import your data." They say "Step 2: Import your data (one click, takes 30 seconds)." Every step includes a timeframe so the visitor already knows the commitment before starting.
5. Before/after contrast when the transformation is dramatic. HubSpot shows the old workflow vs. the new one. Only 36% of the best use it, but when they do, the difference is visceral.

Brevo and Pennylane both score 100/100. They stack use-case specificity, outcome visualization, and clear steps in a single section.

100/100

Why Low-Scoring How It Works Sections Fail

The lowest-scoring how it works sections in our library aren't ugly. They just don't do enough.

A section scoring 10/100 typically has a single conversion best practice: one use-case mention or one process step. Nothing else. No outcome visualization, no before/after, no demo.

The most common gap: no timeline or effort cues. The steps exist but feel abstract. "Step 1: Set up your account" tells you nothing about how long it takes or how hard it is. Without timeline specificity and effort perception, every step feels like work.

Second: no outcome visualization. 26% of sections skip it entirely. The visitor reads the steps but never sees what success looks like after completing them. Steps without a payoff at the end are a process with no destination.

Then there's generic positioning. A how it works section that says "1. Sign up, 2. Use the tool, 3. Get results" instead of "1. Connect your Shopify store, 2. Set your return policy rules, 3. Watch returns drop 30%" could belong to any company on the internet.

The fix isn't a redesign. It's adding 2-3 missing elements. A timeframe per step is one sentence. A named scenario ("For teams doing X") is one sentence. An outcome visual takes an afternoon. The gap between a 10 and a 67 is usually two missing best practices.

Want to know which best practices your how it works section is missing? Try our landing page audit →

10/100