Mobile Onboarding and Multi-Step Form Wireframe

PATH demonstrates a mobile-width onboarding flow with three named pages. Create profile introduces a display name and role. Preferences makes optional choices explicit. Ready to begin provides a completion state and a way to revisit choices. Continue, Back and Finish setup are linked prototype actions.

Use this structure for a SaaS setup wizard, membership application, employee onboarding checklist or short survey. For sign-in and password-recovery screens, use the authentication flow.

Each 440-pixel page contains a padded column frame, consistent control widths and explicit vertical spacing. Inspect the progress bars at 33, 66 and 100 percent and the stable IDs for name, role and consent-related choices. A fixed-width mobile mockup is not automatic responsive CSS; test and implement the final layout separately.

Keep labels visible rather than relying only on placeholder text. Separate optional updates from required account fields. The example uses synthetic values and intentionally avoids collecting sensitive information.

Add representative pages for a missing name, interrupted setup, unavailable service and returning user. Decide which values should survive Back navigation in the real application. Defaults, wording and opt-in requirements should be reviewed for the product and applicable rules.

Progress indicators are illustrative. This prototype does not register an account, persist profile data, send email or enforce legal consent. Changing a field does not automatically rewrite the static completion screen.

Add an optional Team size step between profile and preferences. Update only the affected navigation links and progress indicators. Preserve existing element IDs and the completion screen. Propose a validated diff.

Inspect every forward and back link after the change. Share the .rvv project with a reviewer and note persistence, validation and accessibility requirements for implementation. See form elements and reviewed AI proposals.