How it works section design: three to five steps the customer actually takes
A how it works section answers the question “what happens if I go ahead?” It works when it lists the three to five steps a customer actually goes through, says what they do and what they get at each one, and mentions the time or cost where it matters. Three abstract icons labelled Discover, Create and Launch answer nothing.
What the section is for
People hesitate when they can't picture the process. Will someone call me? Do I pay first? How long until it's done? A steps section website visitors trust removes that uncertainty by describing the path from first click to finished result. It's most useful for services and anything unfamiliar: a first visit to a physiotherapist, commissioning a portrait, a meal-kit subscription, hiring an architect. For a shop selling familiar products, it's often unnecessary.
Writing the steps
Start from the customer's side of the process, not your internal workflow. Each step should say what the customer does or receives, in plain words, with one concrete detail.
| Abstract | Specific |
|---|---|
| Discover | Book a free 20-minute call. We ask about the room, the budget and the date. |
| Design | Within a week you get two layout drawings and a fixed quote. |
| Build | Our two fitters work on site for four to six days. You'll have water every evening. |
| Enjoy | We come back after a month to adjust doors and drawers at no charge. |
- Three to five steps. Fewer than three isn't a process; more than five and people stop reading. Merge or split until each step is one real moment.
- Start each step with a verb or an outcome. “Book a call”, “Get your quote”, “Pick up your order”.
- Mention time and money where they apply. “Free”, “within a week”, “50% deposit at this point”. These are the questions people are really asking.
- Say what the customer doesn't need to do, if that's a worry: “No need to be home”, “We collect the old units”.
Layout: numbers beat icons
A process is ordered, so the design should show order. Numbers (1, 2, 3 or 01, 02, 03) do that instantly and need no interpretation. Generic icons, a lightbulb, a rocket, a handshake, add decoration but no information, and they make the section look like every template. If you use images at all, use photos of the real moments: the call, the drawing, the fitter at work.
- Horizontal row
- Three or four steps side by side on wide screens, each with a number, short heading and one or two sentences. Stacks to a vertical list on phones.
- Vertical list
- Better for five steps or longer text. Numbers in a left column, text beside them. Works the same on every screen.
- Timeline
- A vertical line with dated or timed points, for processes measured in days or weeks, such as a build or a course. Show durations between steps, not just the steps.
- Alternating image and text
- Each step as a row with a photo. Use only when the photos genuinely show each stage; otherwise it becomes a long zigzag.
Mark the steps up as an ordered list (ol), so screen readers announce “list of four items” and the position of each. Keep each step's heading as a real heading only if the steps are long enough to need navigation; otherwise bold text inside the list item is enough. For timeline section design, avoid tiny dates in light grey: the times are the point.
Where it goes on the page
Place it after the visitor understands what you offer and before the main call to action, typically after the services or products and before pricing or booking. Ending the section with the button for step one (“Book a free call”) turns explanation into action. On a long page, a short version near the top and a detailed version on its own page can both make sense. See call to action design for the button itself.
How it works sections in Anticode
Landing pages from Anticode's design engine include a How it works section: three steps as an ordered list, numbered 01, 02, 03 in tabular figures, each with a short heading and one line of text under a 2px rule. It shows three across on wide screens, two on tablets and one column on phones. Because it's an ordered list, assistive technology reads it as a sequence.
The starting wording is generic, along the lines of choose, book, done, so rewrite each step with your real process in the visual editor, which edits text in place, and check every promise is true for your business, such as whether customers really get a confirmation email. You can also ask for a change in a sentence, for example “make the steps: free call, drawings and quote, fitting, follow-up visit”.
Questions people ask
How many steps should a how it works section have?
Three to five. Fewer doesn't describe a process; more and people stop reading. Each step should be one real moment for the customer.
Should I use icons for each step?
Numbers communicate order better and generic icons add little. Use real photos of each stage if you have them.
Where should a process section go?
After you've explained what you offer and before the main call to action, ideally ending with the button for the first step.