New
How It Works|
Best How It Works Section Design
The how-it-works section explains how the product works in a few simple steps. Explore 180 scored examples and see what the best do differently.
Updated November 2026
Showing 1–29 of 180 examples
New
How It Works|
AgentGrid.io AI How It Works Design
New
How It Works|
Composio Instant Developer Tools How It Works Design
New
How It Works|
heal.dev Developer Tools How It Works Design
New
How It Works|
Ovren Live Preview Developer Tools How It Works Design
New
How It Works|
Ovren Live Preview Developer Tools How It Works Design
How It Works|
Yedric.ai AI How It Works Design
How It Works|
Statable Analytics Analytics How It Works Design
How It Works|
Quiver GTM Marketing How It Works Design
How It Works|
Invofox Self Serve AI How It Works Design
How It Works|
Invofox Self Serve AI How It Works Design
How It Works|
Hyrax AI Developer Tools How It Works Design
How It Works|
Hyrax AI Developer Tools How It Works Design
How It Works|
Gorgias Customer Support How It Works Design
How It Works|
GenPage 3.0 Marketing How It Works Design
How It Works|
Ferndesk Customer Support How It Works Design
How It Works|
DailyHelm Analytics How It Works Design
How It Works|
Wisry Marketing How It Works Design
How It Works|
Widgo AI How It Works Design
How It Works|
Pemo Fintech How It Works Design
How It Works|
Naoma AI Demo Agent V2 AI How It Works Design
How It Works|
Mycel AI How It Works Design
How It Works|
Minicart Ecommerce How It Works Design
How It Works|
Hyperprobe Developer Tools How It Works Design
How It Works|
Hyperprobe Developer Tools How It Works Design
How It Works|
Hello Inbox Marketing How It Works Design
How It Works|
BrandJet Lead Generation How It Works Design
How It Works|
Ami AI Lead Generation How It Works Design
How It Works|
Zinley AI How It Works Design
What makes a good how it works section?
A how it works section explains in a few steps what the visitor does and what they get. It turns a promise into a process they can picture, so starting feels easy.
What the best how it works sections do:
- Show the result. A dashboard preview, a metric, what success looks like. 74% of the sections we scored do this.
- Number the steps. Three to five, one line each. 61% do.
- Name who it's for. "For freelancers", "For teams of 6 to 15". 59% do, against 88% of the best-in-class.
- Contrast before and after. The old way and the new way. Only 26% do.
What We Learned From Analyzing How It Works Sections
What Makes a Good How It Works Section?
We checked the how it works sections in our library for the elements below. The lower the number, the fewer pages do it, and the bigger your edge when you add it.
Demo video teaser
An embedded walkthrough or product demo, visitors see the product in action
6%
Before/after contrast
"Old way vs. new way" or "Without us vs. with us," shows the transformation
26%
Use case specificity
"For sales teams," "For ecommerce brands," named scenarios that make the section feel personal
59%
Step-by-step process
A clear 3-5 step sequence: "1. Connect your data, 2. Set your goals, 3. Watch it grow"
61%
Outcome visualization
"Here's what success looks like," a dashboard preview, a result metric, or a visual showing the end state
74%
| Element | What it means | Use it | Type |
|---|---|---|---|
| Demo video teaser | An embedded walkthrough or product demo, visitors see the product in action | 6% | Big opportunity |
| Before/after contrast | "Old way vs. new way" or "Without us vs. with us," shows the transformation | 26% | Big opportunity |
| Use case specificity | "For sales teams," "For ecommerce brands," named scenarios that make the section feel personal | 59% | Common |
| Step-by-step process | A clear 3-5 step sequence: "1. Connect your data, 2. Set your goals, 3. Watch it grow" | 61% | Common |
| Outcome visualization | "Here's what success looks like," a dashboard preview, a result metric, or a visual showing the end state | 74% | Common |
A demo video is the rarest element: only 6% of these sections show the product in action. Saying how long each step takes is rare too, though the strongest sections do it, so the visitor knows the effort before starting.
How We Score Each How It Works Section
We check every how it works section against a weighted checklist, from the page itself and its screenshot:
- Process: clear numbered steps, a demo
- Relevance: a named audience or scenario
- Payoff: the result shown, a before and after
A named audience and the result shown weigh the most, because the highest-scoring sections lean on them. Sections flagged best-in-class are picked by hand from the highest scores.
Interactive quiz
What would your how-it-works section score?
Question 1 of 5
0%
Do you show what success looks like at the end?
A dashboard preview, a result metric, or a visual showing the end state
What the Best How It Works Sections Have in Common
7 how it works sections in our library are flagged best-in-class. They do four things together:
- A named scenario. "For freelancers", "For teams of 6 to 15". Pennylane lets you pick your company size right in the section.
- The result shown before the button. A dashboard preview, a metric, a "here's what you'll get" visual.
- Clear numbered steps. Three to five, one line each.
- Time and effort in each step. Not just "Import your data" but "Import your data (one click, 30 seconds)".
Brevo and Pennylane do all four. HubSpot adds a before and after of the old workflow and the new one.
100/100Why Weak How It Works Sections Fall Short
The weakest how it works sections list a step or two and stop. Their steps feel abstract: "Set up your account" says nothing about how long it takes. 26% never show what success looks like at the end. And generic steps ("Sign up, use the tool, get results") could belong to any company, where "Connect your Shopify store, set your return rules, watch returns drop 30%" belongs to one.
The fix: add a time to each step, name who the section is for, and show the result.
Want to know which best practices your how it works section is missing? Get your 3 free opportunities →
10/100More how it works best practices
Put dated milestones on the how-it-works section
How-it-works sections that name dated milestones (Today, Day 14, Day 30) and a clear time-to-value schedule.
- Name calendar milestones, not just steps: Today, Day 5, Day 30.
- Anchor the last milestone to a concrete outcome the visitor cares about.
- Specific timeframes beat vague speed claims like 'fast' or 'quickly'.
Curated by
Gabriel Amzallag , Founder, Web Anatomy
5 years CRO + SEO at Qonto (2021–2025). After advising 15+ SaaS on their websites (Payfit, Pigment…), the same patterns kept breaking, so I decided to build the source of truth on what works on the web: the intelligence layer every tool, builder, and team uses to ship sites that perform.
Keep exploring section examples
Real examples from top landing pages, scored and analyzed.
[FAQ]
HOW IT WORKS SECTION: FREQUENTLY ASKED QUESTIONS
Everything you need to know about how it works section design, based on our analysis of real landing pages.
How many steps should a how it works section have?
[01]Three to five. In our dataset of 180 sections, the highest-scoring ones use 3-5 steps, each with a one-liner, a timeframe, and a supporting visual. Fewer than three feels incomplete. More than five overwhelms visitors and kills the "this is simple" message the section is supposed to convey. Each step should answer three questions: what happens, how long it takes, and how much effort it requires.
What's the difference between a how it works section and a features section?
[02]A how it works section answers "what's the process?" A features section answers "what can it do?" The how it works section walks the visitor through steps in order, showing a clear path from start to result. The features section lists capabilities without a sequence. In practice, 61% of sections in our library use numbered steps, while features sections rarely do.
Does every landing page need a how it works section?
[03]Yes, if your product requires any explanation. SaaS pages, service pages, and product launches all benefit from a section that bridges "I'm interested" to "I understand how this works." If your product is self-explanatory (a simple e-commerce purchase), you can skip it. For everything else, a clear step-by-step process reduces friction.
What tool do people use to design their how-it-works section?
[04]Most teams build the section in whatever their site runs on: Webflow, Framer, or custom React. The harder part is the visuals. For product screenshots, Arcade and Tella record clean walkthroughs you can trim per step. For stylized UI frames, Figma plus a mockup plugin like Rotato works well. If you need a short demo video, Loom is the fastest path; Vimeo or Mux if you want it embedded with custom chrome. Don't overthink the tool. The specificity of each step matters far more than the polish.
How do I write step copy that converts?
[05]Use active verbs and name the artifact. "Connect your Shopify store" beats "Set up your account." Each step should answer three questions in one line: what happens, how long it takes, how much effort it requires. Keep steps to 8-15 words each. Avoid passive phrasing ("data is synced"), because visitors read it as work done to them, not by them. Lead with the verb, follow with the specific noun, end with the timeframe. That formula alone separates most good sections from the average.
How do I test if my how it works section is good?
[06]Check that each step is clear and that the visitor can picture the outcome. Then look for a specific use case, a timeline, a sense of how little effort it takes, a before and after, and a demo video. Or get your 3 free opportunities, ranked with the evidence behind each.