95 published examples
Three equal cards remain the default because they force a short plot: start, middle, result. The strongest versions pair a numbered verb with a concrete artifact—an app screen, a house visit, a scan. Weak ones repeat the same sentence shape and leave no sense of effort or time.
A left-to-right path is useful when the value is the journey itself: seed to bottle, discovery to live product, evaluation to support. Arrows do the sequencing so labels can stay short. The risk is a long icon chain that looks official but hides what happens at each handoff.
Some offers are not a sequence of user tasks. They are a system: inputs feeding a model, or capabilities overlapping around a core. A diagram can make that architecture visible at a glance. It fails when the labels stay abstract and the graphic cannot be read without a sales call.
The first review question I ask is whether the steps are actions the reader can imagine, or internal phases dressed as a customer journey. "Discovery, Structure, Build, Improve" can sell a studio method. It fails on a consumer product, where people want "scan the disc," not "onboarding alignment." Count the cognitive load. Three steps with one verb and one outcome each scan cleanly. Seven icons in a row start to feel like a supply-chain poster unless each mark is unmistakable. If a diagram needs a legend, it is probably a methodology page, not a landing-section explainer. Watch the relationship between copy and picture. A screenshot that shows the exact moment described in step two earns its space. A decorative dial or overlapping circles only helps if the metaphor maps to the claim. Otherwise it becomes a second puzzle. Cover the headline. Can you still tell what the product does from the steps alone? If not, the labels are too generic: setup, customize, enjoy. Horizontal timelines and Venn diagrams also need a single-column plan; the sequence has to survive without the original geometry. A button under the steps only works if the last beat already implies readiness. "Get intros" after a human onboarding story is coherent. A leap from "we bottle it" to "apply now" is not.
Three is common because it fits a beginning, a middle, and a result without a long row of equals. Four can work when the last beat is support or iteration. Past that, you are often mixing user actions with internal phases. Collapse the internals, or move them to a longer methodology page.
Use a diagram when the reader needs relationships, not order: inputs into a model, overlapping capabilities, many sources becoming one output. Cards imply sequence and agency. If nobody actually does step two, a card layout will feel staged. Keep every label concrete enough that the graphic still makes sense if the illustration vanished.
Features answer what the product can do. How It Works answers what happens next and who does the work. If every card could live in a features row, rewrite around time, handoffs, and outcomes. After reading, someone should be able to estimate effort, wait, and the first action they must take.
Compare section designs that serve a similar purpose on your page.
