Most B2B websites are structured as an inventory: here is what we do, here are our services, here is our team, here is a contact form. Each section is competent. Collectively they make no argument, and a visitor who arrives uncertain leaves uncertain.
The alternative is not storytelling in the sense of anecdotes and metaphor. It is structuring a page so that it makes a case — which is what a buyer needs before they will start a conversation with a supplier they have never met.
The failure that looks like a design problem
When a B2B site underperforms, the instinct is to redesign it. Frequently the design is not the problem. The page has no argument, and a more attractive presentation of no argument converts marginally better at best.
The diagnostic is simple: read the page and ask what claim it is making, what evidence supports the claim, and what the reader is being asked to do about it. A surprising number of pages fail all three. They describe capability without asserting anything, offer adjectives instead of evidence, and end with a generic contact form.
The fix is structural and it happens before any visual work.
The five-beat arc
Every long-form page we design follows the same sequence, and it is deliberately close to how a good salesperson runs a first meeting.
Tension: name the cost of the status quo specifically. Not "digital transformation is important" but "month-end takes eleven days and three departments bring different numbers". A reader who recognises their own situation in the first screen keeps reading.
Insight: reframe the problem with something they did not know. Usually a number from actual project work — that a theme-based site costs a second of load time, that 30–40% of warehouse objects are never queried, that fill-rate monitoring catches scraping failures the crash never would.
Plan: the system you would build, described concretely enough to be evaluated. Vagueness here reads as inability.
Proof: evidence with numbers and attribution. Outcomes, before-and-after, a named client role.
Invitation: a specific, low-friction next step. Not "get in touch" but "thirty minutes with a senior engineer; you leave with an architecture sketch whether or not you hire us".
Storyboarding before pixels
Work the narrative out in low fidelity, with the client in the room, before anything is designed. A storyboard is a sequence of boxes with the argument of each section written in a sentence.
This is the cheapest place to discover that a page has no case to make. It takes an afternoon and it prevents the far more expensive discovery in month three, when a beautifully designed page is reviewed and nobody can say what it is for.
It also settles arguments productively. When a stakeholder asks for a section to be added, the question becomes which beat it serves — and if the answer is none, the conversation is about the argument rather than about taste.
In practice
Carrying the story into the design system
A narrative structure only survives into production if the design system supports it. That means components that correspond to beats: a tension section with a specific typographic treatment, an evidence band for numbers, a callout for the reframing insight, a proof block for quotes with attribution, and an invitation band that is visually distinct from the rest of the page.
When those exist as named components, a marketer building a new page assembles an argument rather than a layout. That is the mechanism by which a fifty-page site stays coherent, and it is why the design system is a narrative tool rather than merely a visual one.
Name them for what they do rather than for what they look like. "Evidence band" tells someone when to use it; "grey stat section" does not.
Illustration that argues rather than decorates
Generic stock illustration says nothing about your business, and the current crop of AI-generated art is recognisable within a second — which costs credibility precisely where you are trying to build it.
What works in B2B is technical illustration that carries information: an architecture diagram, a process flow, a plant schematic, a data pipeline, a loss waterfall. These do two jobs simultaneously — they demonstrate that you understand the domain, and they explain something the prose would take three paragraphs to convey.
Hand-built SVG also loads in kilobytes, scales perfectly on any screen, and can be animated meaningfully — a packet moving along a pipeline, a bar rising, a node pulsing. Animation that carries information earns its place; animation that exists to be noticed does not.
The one-second test
Show a page to someone in your target audience for one second and ask what the company does. If they cannot say, the page is decorated rather than structured — and no amount of scroll-triggered animation will fix that.
Measuring whether the story worked
Scroll depth by section is the most useful single measure. A sharp drop at a particular beat tells you the argument failed there, which is far more actionable than an overall bounce rate.
Alongside that: time on page for long-form pages, which correlates with genuine reading rather than scanning; the rate at which visitors reach and interact with the invitation; and — the one that matters commercially — whether enquiries arrive better informed. When a prospect opens a call by referencing something specific from a page, the argument landed.
Across rebuilds where we replaced an inventory structure with a narrative one, the pattern is consistent: fewer enquiries, materially better ones, and a shorter sales cycle because the first meeting starts further along.
Key takeaways
- Most underperforming B2B pages have no argument — that is a structural failure, not a visual one.
- Use the five-beat arc: tension, insight, plan, proof, invitation.
- Storyboard in low fidelity with the client before any design work; it is the cheapest place to find problems.
- Build narrative components into the design system so new pages assemble arguments rather than layouts.
- Use technical illustration that carries information — it proves domain understanding and explains faster than prose.
Frequently asked
Particularly well. Technical buyers are more sceptical of adjectives and more responsive to specifics, so an arc that leads with a recognisable problem and supports claims with numbers suits them better than a features inventory. The register changes — less rhetoric, more evidence — but the structure holds.
By making the question "which beat does this serve" rather than "should this be included". A storyboard reviewed early gives everyone a shared frame, and sections that serve no beat get cut in a discussion about the argument rather than about anyone's preference. It does not eliminate politics but it changes the terms.
No. Every illustration we ship is drawn as SVG for the specific domain — architecture diagrams, process flows, plant schematics, data pipelines. Generic stock says nothing about your business and AI-generated art is identifiable within a second, which costs credibility exactly where you are trying to build it.
The storyboarding stage is typically three to five days for a substantial site, and it usually saves more than that later by preventing design work on sections that get cut. Projects that skip it do not finish faster; they finish with more revision cycles.