# Mode Full User Journey — Landing Page to Active User This is the approved Mode new-user journey from landing page through active user. It is the canonical product-flow reference for product analytics, activation/PQL modeling, event/property registry work, onboarding analysis, and first-use experience planning. ## Journey This is the full new-user journey from landing page to active use. Onboarding has multiple steps. The demo is one onboarding step, not the entire onboarding flow. ### 1. Signup and account onboarding 1. User lands on the Mode landing page. 2. User starts signup. 3. User enters their email, password, and standard signup details. 4. User answers the normal onboarding questions. 5. User completes signup. ### 2. Demo onboarding step The user enters a pre-populated demo app/canvas made in Mode. This demo teaches the core Mode workflow using prepared content the user can safely edit before connecting their own codebase. 6. User lands on the interactive demo canvas. 7. User goes through the demo to learn Mode inside the product. 8. User recognizes familiar Figma-style canvas basics: - zooming, - selecting, - moving, - editing, - frames, - layers, - elements. 9. User learns the canvas can contain frames, layers, elements, components, and portal nodes. 10. User learns that a portal node is the live app/dev-server view inside the canvas. 11. User learns they can click elements inside the portal. 12. User learns they can move items between the portal and the canvas. 13. User edits prepared demo content on the canvas. 14. User learns that edited canvas work can be built back into a live app/codebase. 15. User sees share links and GitHub/PR output explained as later workflow paths, but does not need to share or submit a PR during the demo. 16. User completes the interactive demo. ### 3. Codebase onboarding step After the demo, Mode invites the user to bring in their own product context. This is the final onboarding step. 17. User is taken back to their dashboard. 18. User sees a prompt to import or connect a codebase. 19. User chooses how to import their codebase: - upload a codebase file, or - connect GitHub. 20. If the user uploads a file: - user selects the codebase file, - user uploads it to Mode. 21. If the user connects GitHub: - user starts GitHub authentication, - user installs or authorizes Mode for GitHub, - user chooses which GitHub projects Mode can access. 22. User waits while Mode sets up the imported project. 23. User sees the import/setup complete. 24. User opens the canvas for their own project. 25. User has completed onboarding. ### 4. Post-onboarding own-product workflow After onboarding, the user applies the same workflow to their own product. 26. User returns to the same canvas environment they learned in the demo. 27. User explores the portal for their own project. 28. User clicks around their live app inside the portal. 29. User tries visual edits on top of their existing codebase. 30. User may prompt AI to make changes in their existing codebase. 31. User moves between the portal and the canvas. 32. User uses the portal for real codebase context. 33. User uses the canvas for Figma-like design work. 34. User opens the components tab. 35. User opens the component drawer. 36. User selects a component from their existing codebase. 37. User places or edits the component on the canvas. 38. User makes design changes to the component. 39. User clicks the Build button on the component. 40. User is asked to select a target div or element. 41. User clicks the target element in the portal where the component should be added. 42. User reviews the built result in their product. 43. User continues iterating between canvas design work and portal/codebase output. 44. User reaches a product/design change they want to share or ship. 45. User chooses an output path: - share a link, or - push/export through GitHub. 46. If the user shares a link: - user clicks the share option, - user creates a shareable link, - user sends the link so others can view the prototype or created work. 47. If the user pushes through GitHub: - user pushes the work to GitHub, - user creates a pull request. 48. If the user originally uploaded a project without GitHub: - user can connect GitHub at this stage, - user can create a new GitHub project/repo from the uploaded project, - user can create the first pull request in that repo. 49. User has completed the end-to-end new-user product flow. ## Active user definition for this journey A user is active when they have: - completed signup, - completed the interactive demo, - imported or connected their own codebase, - opened their own project canvas, - used the portal/canvas workflow on their own project, - made a useful product or design change, - and shared it or moved it toward GitHub output.