Interactive product tour

[Yndira-E]

Description

As a: new user

I want to: be guided through the main features FlowFuse has to offer

So that: I can easily get to the "aha!" moment

Which customers would this be availble to

All Users, (CE)

Have you provided an initial effort estimate for this issue?

I can not provide an initial effort estimate

Here's a list of software that could help us set this up: https://userguiding.com/blog/best-product-tour-software/ And an article about the subject, tied to the trial period length: https://userpilot.com/blog/free-trial-length-saas/

### Tasks
- [ ] Create FlowFuse product tour to highlight basic features. See draft here: https://www.figma.com/board/mkOzyvy2b5Iu86xBpFaBZA/User-SignUp-Flows?node-id=599-849&t=GyOnab2VawzeGPnh-4
- [ ] Create NR Editor walkthrough to lead users to create first basic NR flow. See draft here: https://www.figma.com/board/mkOzyvy2b5Iu86xBpFaBZA/User-SignUp-Flows?node-id=592-422&t=GyOnab2VawzeGPnh-4

[Yndira-E]

@MarianRaphael as we discussed, please check this out and refine it as needed.

I think we could even have different product tours according to the purposes for which they joined, but I'm unaware of how complex this might be.

[joepavitt]

@gstout52 we can use this as a store for any final thoughts on Product Tour content, which we can then use as the basis for any development work

[gstout52]

For our first iteration of a product tour for new FlowFuse users, let's do this.

1. Welcome new users with a 'Welcome to FlowFuse!' message
2. Ask users their overall goal with using FF. (This step adds one screen of friction but will help us narrow down our ICP and can later be used to provide more segmented onboarding.)
3. Ask users what they are looking for: (A) cloud-hosted NR or (B) device management. (Note: this question is not the same as the previous question. This question is asking about what they are going to do in FlowFuse, and the previous question is asking why they want to do it.) 3.A - if the user answered A, direct them to the NR editor. The tour ends here. 3.B - if the user answered B, prompt for an optional tour of FF features. If they decline, the tour ends here and we refer them to knowledge sources as needed.
4. User selects tour - call out Applications, describing their relationship to Instances.
5. Call out Invite Members and managing privileges. (Preferably: make sure users can perform this action and then resume the tour.)
6. Call out Devices
7. Call out Snapshots
8. Call out Blueprints in Library
9. Direct users to NR Editor

See this Figma for more details and some first-pass copy: https://www.figma.com/board/mkOzyvy2b5Iu86xBpFaBZA/User-SignUp-Flows?node-id=501-215&t=LTZruZm75MlnlMsB-4

[gstout52]

@Yndira-E for visibility

[gstout52]

@joepavitt For a first iteration, what if upon first login a new user is just presented with a short welcome video? Would that be something we could ship relatively easily?

[joepavitt]

WIP - but I've put the foundation in place for a product tour:

https://github.com/user-attachments/assets/c03d4c58-1872-4fee-9fcd-79b22506f0b8

• It uses ShepherdJS under the covers
• I've built it so that it's JSON driven
• I've styled it so that it fits the general FF aesthetics
• We can trigger the tour to start after they navigate from the "Verify E-Mail" screen
• As a first iteration, I've skipped over the asking of questions for now, and just focussing on a standard intro to FF concepts, etc.
• The instance it highlights ins't in the first application just because I don't have one there - it will select the correct one it for a brand new account
• The element selection for Devices isn't yet implemented, but I put some placeholder text in.
• I'll follow this with Snapshots, Device Groups and Pipelines.
• Possibly Blueprints too?
  • This is a little more complicated as it requires navigation by the user to show Blueprints first, so requires a bit of JS as part of the tour definition, which would be tricky in a json context
• We should also be able to inject PostHog events in here too so we can track progress and how many users actually engage

[joepavitt]

Building this in https://github.com/FlowFuse/flowfuse/tree/2721-product-tour if you want to take a look, I can open a PR early next week once it's more smoothed out.

[gstout52]

@joepavitt So far, so good! For v1 I think it would be good to prioritize Snapshots even if we can't get Device Groups and Blueprints included.

Let's have the tour end with selecting the editor. This is great so far!

[joepavitt]

https://github.com/user-attachments/assets/37379ba8-87d9-401b-a3b0-ac12dafb121c

Update tour, need to switch the order of device groups and snapshots, but this is now a first draft end-to-end

[joepavitt]

I did try to get the "Open Editor" tracking working, which it did, but then getting the tour to persist into the Immersive Editor view wasn't a very quick win (although I think is possible)

[gstout52]

Great to see! There is a typo in "applications" in the first popup. For the Devices popup, I think the sentence that starts with "Generally" could be trimmed down to "...factories or even a Raspberry Pi on your desk."

[joepavitt]

Update on status: tour is done, but getting it to show at the right time and to the right users is proving trickier than I'd like because of how the navigation was implemented for the "verify" screen. Now having to re-structure our routing so that the "Verify" page is an actual page on it's own, and not just part of if/else logic. Mostly driven by there being 0 knowledge of the user's team at this stage, and can't navigate to the "Home" view via vue router, because we're already on the home view (as are about 12 different iterations/child views)