Updated onboarding flow

[corywatilo]

The goal of this new onboarding flow is to increase activation.

I mapped out the onboarding steps for each product, splitting between the required steps (can't proceed/get value without completing) and the "optional" steps (things we really want you to do, but don't absolutely have to).

---

Figma prototype of the product analytics path. (Directly after signing up, you're taken here. Click through to product analytics.)

Notes for each step below...

After signup...

Choose a product to start with.

• Drops you into the app vs a separate onboarding flow.
• You can jump around if you want, but the benefit here is you're in the app, which is a vastly preferred experience.
• Replaces the Project home tab with "Welcome to PostHog", which eventually gets replaced once you've onboarded

Product analytics

Install

• Takes you to the product analytics section, since you showed intent from the welcome screen. If you activate on this product, then click to other products, you'd see something like this
• Tabs the code snippet and package installation instructions
• Adds a new reverse proxy step (to be done as a separate test) since this is a better experience, though we don't want to hurt activation
• If you can send events from frontend and backend (language-specific), we can show a toggle
• Includes more details about sending events (including identifying users). This is where the dopamine really starts hitting.

Verify / Configure

• Combines installation verification and config – to give the user something to do while they're waiting
• Adds more config options that are useful for the majority of customers. Note they're opt-out by default.
• Note: This specific toggle UI is part of updated form components I initially outlined here

Plans

• Gives a summary of plans, with full plan comparison below

Invite

Not mocked, but similar to what we have today

---

Post-install

After installing, you'd be taken to the product analytics empty state, and we'd use the sidebar to show an onboarding wizard for the product that covers:

• Creating an action
• Creating an insight
• Creating a dashboard
• and maybe incorporates templates?

(WIP. More to come in the new year...)

[raquelmsmith]

Loooooove this super excited to get moving on it.

[corywatilo]

Once initial onboarding is completed, we open the onboarding side panel. Here's an updated version of that - it splits tasks down per product.

The example below shows Product OS (which would always show), and then whichever products you've opted into.

Notes

• In above, I threw out a reference to getting a free merch code (maybe for a sticker). It can be dependent on completing all steps available to you, and should probably only show if you've subscribed to a product (even if free). Offer should only be good once, so once you've completed all steps for a product, even if you subscribe to another product, you wouldn't be able to redeem it again.
• The icon next to the Actions tab link is "Open in main column" - basically the reverse of an existing icon we have which is "Open in side panel"
• Each product is expandable/collapsible, and each line item inside does the same for each product

Proposed steps

Some of these steps can apply to multiple products (eg: defining an action is good for Product OS and a few products) or some might be done before this flow (like inviting teammates), so it'd be ideal if we are marking these as complete internally, then we show the correct status in the side panel – meaning if it's already done, mark it off – or at the very minimum, have a way to manually mark it as complete.

Product OS

1. Send your first event
2. Invite your team (mark as done if they've already done this in onboarding flow)
3. Define an action with the Toolbar (optional, dependent on library)
4. Install a pipeline source/destination

Product analytics

1. Create an action – may already be done with Toolbar in Product OS steps
2. Create an insight
3. Create a dashboard
4. Something related to using dashboard templates?

Other products

TBD

Spark joy ideas

• When a step is completed...
  • animate a line through the line item
  • do something cool with the checkbox getting filled in and turning green
  • collapse that step automatically and open the next one
  • have the graduation hog do a little dance
• When all steps are completed, show some confetti and a merch code for a PostHog sticker

[corywatilo]

Unsubscribed product state

If you navigate to a product you haven't set up yet, you'd see a screen like this. Clicking get started would take you to the onboarding flow for that product (seen at the top of this thread), and after initial onboarding, you'd see a new section added to the side panel for that product.

[joethreepwood]

These are all absolutely sick. I suggested a few language changes in the prototype for you to consider, if helpful. My main one is that in the very first onboarding page we may want to add a reference to how users can enable extra products. That way, they know they can enable one product first and do others later without needing to return to this wizard again.