Explain the customer's route in three practical stages when three stages fit: what they do first, what your business does next, and what happens after agreement. Use plain verbs and name the output. Do not hide payment, eligibility or an important decision merely to keep the section short.
A process section answers “How does this work?” It should reduce uncertainty before someone takes the next step. It is not a decorative row of numbers or a promise that the entire service requires only three clicks.
Draft the sequence in the Homepage Planner, check its next action in the CTA Lab and use the page editor to explore the visual presentation. The examples below explain what belongs in the stages and how to test whether the journey matches the wording.
Begin with the real customer journey
Write down what actually happens from initial interest to the first useful result. Include the customer's actions, the business's actions and any outside dependency. An internal handoff can matter if it changes what the customer must expect.
For a custom service, the journey may involve an enquiry, suitability check, assessment, quote, agreement and delivery. For a store, it may involve choosing a product, confirming options, paying and receiving it. Neither journey should be reduced to three labels before its important conditions are understood.
Then group related activities into understandable stages. The purpose is to give the reader a useful overview, not to erase the underlying work. Detailed terms and instructions can remain available where they affect the decision.
Ask the delivery team to check the map. Marketing often describes an ideal journey while operations handles exceptions. The public process should reflect the service customers can actually receive, including any supported expectations about timing.
Understand what the StoryBrand idea contributes
Donald Miller's Building a StoryBrand 2.0 recommends helping customers see a clear route forward. Both editions discuss the role of a process in reducing uncertainty around action. That is a useful prompt for a homepage whose service feels difficult to start.
The practical application is to explain the path, the business's help and the next step. Three stages can make an overview easy to organize, but the book is not evidence that exactly three steps produce higher sales for every business.
Treat the structure as a draft to investigate. If the real journey needs four clearly distinguished decisions, forcing three can be less honest and less usable. If the offer is an immediately usable free tool, a large process section may be unnecessary.
These examples are Plain Reckoner's original applications, not copied book worksheets or reported client campaigns. Referencing the source does not imply that its author endorses this website or the resulting page.
Give each stage an actor, action and output
A useful stage identifies who does something, what they do and what comes out of it. “Discovery” is a label. “Tell us about your room so we can check whether a measurement visit is suitable” explains an action and purpose.
Do not leave every verb passive. “Your information is processed” says little about who reviews it or what the customer receives. A more useful sentence names the review and the returned information, within what the business can support.
The output need not be a final product. It could be confirmation of suitability, a proposed scope, a quote or an example. Label it accurately. An estimate and an agreed price are different outputs with different implications.
Keep each stage concise enough to scan, but supply essential conditions nearby. The section should help a person understand the route without requiring a long explanatory call before the first action makes sense.
Original service example: fitted storage
For an illustrative fitted-storage service, the first stage could be “Describe your space.” The customer supplies the room type, approximate location and the main storage need. The business checks whether the request falls within its service scope.
The second stage could be “Review a design and quote.” Supporting text should explain whether this follows a measurement visit, whether that visit has a fee and what the quote covers. Do not imply that a complete design arrives from a short form if more work is required.
The third stage could be “Agree the work and installation arrangements.” This leaves room for an actual contract, scheduling and relevant terms. It does not promise a fixed installation date before capacity has been checked.
The process helps a visitor understand the sequence while keeping commitments visible. If the business's real operation differs, change the example rather than advertise a tidier service that does not exist.
Original professional-service example: bookkeeping
A chosen bookkeeping example might begin with “Share your business context.” The first request can establish business type, current system and the help needed without collecting sensitive documents before the service has confirmed suitability.
The second stage could be “Agree the scope and responsibilities.” Explain which records the customer supplies, which reports the service prepares and what work is outside the agreement. The wording should not imply that every tax or accounting obligation is handled automatically.
The third stage could be “Set up the agreed monthly workflow.” State the practical output and communication arrangement. Only promise response times or reporting dates that the team can actually maintain.
This example shows why a process is more than a sales device. It can prevent mismatched expectations about who supplies information and who makes decisions. Clear responsibilities help a suitable customer understand the offer before providing detailed records.
Original store example: a product that needs a choice
For a store selling refillable cleaning kits, a short sequence could be “Choose a starter kit,” “Check the contents and delivery options,” and “Place your order.” Those stages are relevant only if the page genuinely supports those choices.
Do not describe delivery as complete immediately after payment. If a third stage includes dispatch or receipt, explain the actual arrangement and relevant conditions rather than implying an instant outcome. An order confirmation is not proof of delivery.
Existing customers may need a shorter refill path. Do not force them through starter-kit education every time. A process overview should help with a real uncertainty, not add a compulsory marketing obstacle to an already understood purchase.
Keep subscription and one-off purchases distinct. If selecting an option creates recurring billing, that commitment belongs in the decision context. A short three-step graphic cannot replace a clear explanation of the actual commercial arrangement.
Original software example: begin with a useful result
For an illustrative approval-tracking product, a sequence might be “Create a project list,” “Add the requests and owners,” and “Review what is still outstanding.” It describes a task the software can help perform rather than a grand transformation.
If other people must join the project before the workflow works, say so. If only the current user can see the list, do not imply a collaborative approval system. The process should match the shipped capability, not a roadmap item.
A free example can be a useful alternative before setup. Label it as example data and avoid overwriting the user's work when they try it. A process that looks simple but silently loses saved input creates a very different experience from its promise.
Keep export and storage explanations available. A person using a local draft needs to understand the practical limits of keeping or sharing it. Do not use a process graphic to suggest an account, hosted collaboration or permanent backup that the product does not provide.
Separate process information from terms
A process overview tells the reader how the service proceeds. Terms explain obligations, costs and conditions in greater detail. Both can be necessary, and one does not replace the other.
Place important conditions where they affect the next decision. A paid assessment should not first appear as a surprise after a button labeled free consultation. A refundable deposit still needs explanation before the customer commits to paying it.
Use concise nearby copy to flag what matters, then link to the fuller relevant information. Do not bury every important condition in a generic footer link and assume that the visible process is therefore accurate.
If the overview cannot stay truthful without another stage, add the stage. The format serves comprehension. A three-card layout is not a reason to merge a request, approval and payment into one ambiguous action.
Design the sequence to survive mobile and assistive use
Keep the order in the document logical. A visual arrow should support the sequence, not be the only way to understand it. When cards stack on mobile, the relationship between stage number, heading and explanation should remain clear.
The W3C headings tutorial explains how semantic headings communicate organization. Use headings that identify meaningful stages and nest them appropriately within the page. Large styled text alone may not provide the same navigation structure.
Do not make essential instructions hover-only. Touch and keyboard users need to reach the same meaning. Avoid an auto-advancing animation that removes a stage before someone can read it or interact with its link.
Check long labels, translated text and zoom. A diagram that works only with three short English words may fail as soon as the content becomes realistic. Flexible text layouts are more dependable than embedding the entire process in a fixed image.
Connect the first action to a usable form
The first stage should identify what the customer needs to supply. Ask for the minimum relevant information at that point, while preserving what the team genuinely needs to respond usefully. Shorter is not automatically better if it causes a second confusing exchange.
The W3C form-instructions guidance covers labels, required information, expected formats and accessible instructions. Apply it to the destination form rather than assuming the process paragraph provides every necessary instruction.
Explain errors in ordinary words and preserve valid input where appropriate. A customer should not lose a carefully written description because one field uses an unexpected format. Check non-English characters and realistic longer entries.
The success state should confirm the actual stage reached. “Request received” is different from “Appointment booked.” A clear overview can be undermined if the form's confirmation silently changes the customer's understanding of the commitment.
Check timing without inventing a promise
If timing matters, explain what the business knows and what it cannot confirm yet. A typical range should have an actual basis and appropriate conditions. Do not add a fast response claim merely because a short process needs to sound effortless.
Separate processing time from the overall elapsed time. The team's review may be brief while scheduling, materials or customer replies create a longer journey. A promise about one component should not imply the whole service completes within it.
If availability varies, say when it is confirmed. A request can be useful without guaranteeing a slot. Customers often need a dependable explanation of uncertainty more than an optimistic number that later proves wrong.
The same principle applies to software loading. Do not force a one-minute wait to make a local operation appear sophisticated. Show real progress for work that takes time and return the useful result as soon as it is ready.
Test understanding before testing conversion
Show the page to a likely customer and ask them to describe the stages in their own words. Ask what they must do, what the business returns and when they believe a commitment occurs. Record the answer before explaining the intended sequence.
A reader may understand the order but miss a fee, think an enquiry confirms availability or assume the business supplies an excluded service. Those are distinct misunderstandings. Revise the relevant condition or stage rather than adding more decorative arrows.
Use the Reader Check to record actual responses against the draft. It does not recruit a representative audience automatically. A small convenience group can reveal practical problems without establishing a population-wide understanding rate.
Keep comprehension separate from liking the design. Someone may prefer a three-card layout and still misunderstand the commitment. Conversely, a clear process may help someone correctly decide that the service is not suitable.
Observe the journey the stages describe
After a comprehension check, ask someone to attempt a realistic task. For example, find whether the service covers their area and send a clearly marked test request. Do not tell them which button to press if discovering the action is part of the question.
The GOV.UK moderated-testing guidance describes observing people work through specific tasks. That helps distinguish a message problem from a broken interaction or missing information at the destination.
Inspect the handoff beyond the browser where appropriate. A successful-looking form can still fail to reach the business. The customer-process description is only accurate if the operational journey supports it.
Record the draft, conditions and observed result. If the wording changes, preserve which version each participant saw. A later update should not inherit a tested label merely because the earlier version was reviewed.
Use the result to improve one specific stage
If people cannot identify the first action, revise the action and context. If they misunderstand the quote, clarify what it includes. If the task fails because the form is broken, fix the form before rewriting the surrounding story.
Use the Test Planner to keep the question, proposed change and evidence together. A before-and-after improvement is an observation, not automatic proof that the three-stage structure caused it. Traffic, offer and operational changes can affect the outcome.
Then return to the visual draft in the page editor. Check that the sequence remains readable without animation, that the first action leads to the promised destination and that important conditions are not hidden in an expandable detail nobody is told to inspect.
A good process section gives the customer a reliable overview of the actual route. Three stages can help when they organize that route clearly. Accuracy, meaningful actions and a working journey matter more than the number of cards.
Once your plan is clear, use the free HTML and CSS page editor to build a page from your own words. Edit the code, check the phone layout, and copy it into your website or AI builder. The editor does not publish for you or supply customer evidence. Check the page and action links before sharing it.
Use a landing page copy template to explain the process
A landing page copy template should make the next step easier to understand, not promise that three boxes will increase sales. Write the actual sequence: what the visitor does first, what your business does next and what the person receives. ‘Tell us the problem → review the options → choose the repair’ is an original process example. It is not a guarantee about timing or outcome.
When deciding how to write landing page copy, keep each step tied to something you can deliver. If a quote needs a site visit, include that visit instead of implying an instant fixed price. If availability needs confirmation, make the confirmation part of the process. A short explanation is useful only when it remains accurate.
Compare the process with the button at the top of the page. The button should start the first real step. Use the homepage planner to keep the sequence and the next action together, then ask a new reader what they expect to happen.