Onboarding Data Collection for Personalization

Build PrimerPath, a responsive SaaS workspace setup flow for a project lead who wants a useful first project without answering a sales questionnaire. Return one complete standalone HTML document with internal CSS and JavaScript, no framework, external assets or network requests. This is a local fictional demo, not a connected account. The actual output must work, not return another brief.

Inputs and customization: default workspace name “Acorn Studio”; starter choice “Client delivery”; optional team size unselected. Expose the brand, workspace default and two starter definitions as clearly named constants. Client delivery maps to three tasks: Write the project brief, Schedule the kickoff, Share the first milestone. Product launch maps to: Define the launch scope, Review the release checklist, Prepare the announcement. Team size choices are Just me, 2–5 people and 6+ people; a team choice adds the task Invite a teammate, while Just me or skipped adds none. Replace these values for another buyer job while preserving the same input-to-result mapping. Never invent adoption, revenue, testimonials or an account connection.

Art direction: an airy, quietly confident workspace using ink #202d46, blue #2855bb, mist #eef3fb, white #ffffff and muted slate #53627a. Use a system humanist sans stack, a strong 40–48px heading and comfortably readable 16px body. A compact PrimerPath header says “Local setup demo”. Below it place a narrow three-step progress rail, a generous form column and a preview of the real starter checklist. The distinctive element is a folder-tab starter preview whose task rows change with the answers. Avoid decorative charts, gradients, fake avatars, sales metrics and repeated marketing cards. Keep alignment and spacing deliberate; every control must have a clear purpose.

Step 1, “Name your workspace”: labeled Workspace name field, required, trim on continue, 1–40 characters; whitespace-only input is invalid. Show “Enter a workspace name (1–40 characters).” next to the field and associate it accessibly. Preserve typed invalid values. Continue focuses the next step heading; Back returns with answers intact. The preview name updates safely as text, never HTML. Include “Use defaults” as a visible route directly to the same final review with Acorn Studio, Client delivery and team skipped; personalization must not block product value.

Step 2, “Choose your starting point”: native radio inputs Client delivery and Product launch with one clear sentence explaining the resulting checklist. Client delivery is selected by default. Changing it immediately updates the adjacent preview and leaves no tasks from the previous starter. Step 3, “Who is joining you?”: explicitly optional team radio group, no preselected answer, with Skip for now and Review setup actions. Skip clears any prior team choice and moves to review. The optional answer only changes whether Invite a teammate appears; do not imply it invites someone. Display progress text “Step N of 3” and current-step semantics. Review and the finished project are outside the numbered questions.

The review heading is “Review your workspace”. Show the exact current name, starter, team (or “Skipped”) and matching task checklist. Edit answers returns to Step 1 preserving selections. “Create local workspace” starts a deterministic 600ms busy state, prevents duplicate triggers and then opens a usable local project with the selected name and task list. Show “Workspace ready on this device” and “Demo only. No account was created and no invitations were sent.” Task rows are real labeled checkboxes and the completed count updates. “Edit setup” returns to Step 1; after a setup change/recreation reset task completion. “Start over” clears only this demo's stored progress and returns to the defaults with team unselected. No action may navigate to a fake dashboard or only display a toast.

Persist validated setup answers, current stage and task completion locally under the single versioned key primerpath-demo-v1. Restore on reload with a visible “Restored on this device” status. Validate the entire saved payload before using it; malformed JSON, invalid stage, invalid enum, out-of-range name or inconsistent task state falls back to defaults without crashing. Do not read or store identity or sensitive data. If local storage is denied or full, all actions must still work in memory and clearly say “Changes will last only while this page is open.” Never show a saved/restored success after a storage failure.

Add a quiet expandable “Demo controls” section with “Fail next creation”. When selected, the next creation attempt shows the busy state then a specific inline failure: “Workspace could not be created in this demo. Your answers are still here.” Provide “Try again” to succeed with the same answers. Consume the simulated failure once; nothing is submitted to a server. Loading, validation, retry, saved/restored, skipped, review, ready and empty-completion states must be inspectable. Announce material updates via a persistent polite live region. Move focus to the current heading on stage changes and to the invalid field on validation. Use semantic form controls, visible focus, correctly ordered headings, sufficient contrast and 44px targets. Task progress needs a text count; no meaning by color alone.

At 1440×900 the current question and checklist must fit comfortably in one viewport. Below 800px, place compact progress above the question and checklist below the actions. At 390px and 320px, use a single column, wrapping titles and no horizontal scrolling, fixed footer or controls hidden behind keyboard assumptions. Reduced motion and Save-Data preserve all steps and feedback without animation. Mark the settled document data-preview-ready. Include a quiet “View source prompt” link to /prompts/forms-feedback-data-collection-onboarding-data-collection-20260703-free/.

Acceptance checklist: (1) whitespace name fails without losing input; Back and Edit retain answers; (2) Product launch plus 2–5 people gives exactly its three tasks plus Invite a teammate, and Skip removes that task; (3) review, final workspace and preview agree; (4) failure then retry retains answers, prevents duplicate creation and ends at a usable checklist; (5) reload restores valid progress, corrupt or blocked storage cannot crash or claim a save; (6) defaults and Start over work, keyboard reaches all controls, reduced motion works, and 1440/1024/768/390/320px layouts have no clipped controls or horizontal overflow.