Website prototyping: from user journey to review

A prototype lets you agree on page structure and visitor actions before development. Start with a specific journey: find a service, compare terms, complete a form and receive confirmation.

Choose the right level of detail

A block layout with realistic headings is enough to discuss structure. Build a clickable prototype to review navigation. Figma supports connections between screens and interactions that you can demonstrate before writing the application code.

A prototype simulates selected journeys. Data submission, payments and integrations still need separate tests on the working website.

Include the important states

• The main journey and a way back to the previous step.
• Mobile navigation, long headings and varying amounts of text.
• Empty search results, form errors, loading and success states.
• Space for service terms, contact details and field instructions.

Review it with users

Give someone a task without instructions and observe where they hesitate. Record the problem, its impact and a proposed change. Repeat the journey after revisions.

Hand over the approved version, a screen inventory, state descriptions and unresolved questions. Identify elements that still need visual design or a technical decision. This gives developers a clearer scope to estimate and implement.

Related resources and services

• Deployment of landing pages

Sources

• Figma: prototyping