[Design] Design the Insider Program Onboarding for insights.opensauced.pizza

[pixelsbyeryc]

To design:

• Sign up and provide API token
• User is not logged in: "Log in to view insights"
• User is logged in, but no token: "Complete onboarding to view data"
• User is logged in and shared the token: shows the cards
• [Copy] Provide the copy for the authentication flow #69

Implementation:

• [Front-end] Implement Onboarding Flow #68

---

Reference:

Design something similar to this (found in https://design.opensauced.pizza/?path=/story/onboardring--onboarding-flow):

[bdougie]

Here is an example of how to opt-in user to sign to see more data.

Crunchbase

1. Visit Netlify on Crunchbase
2. Click investments and then "show more." Note the pop up requesting you sign in.

Patreon

I actually like Patreon's approach encouraging this post to be unlocked by paying, but we are just asking for them auth and provide a token.

https://www.patreon.com/JuRY

more thoughts.

The onboarding process includes a manual step (for now), which is providing a token. I think the text should state, "complete onboarding" or similar.

• User is not logged in, "Log in to see this post"
• User is logged in, but no token, "Complete onboarding to see this post."
• User is logged in and shared the token. Show the card

[pixelsbyeryc]

Here are the steps in the authentication flow (copy needs to be adjusted).

Figma File

Screens To-do:

• User is not logged in: "Log in to view insights"
• User is logged in, but no token: "Complete onboarding to view data"
• User is logged in and shared the token: shows the cards

[pixelsbyeryc]

Updated the description to add tasks for what's missing until we close this issue.

[pixelsbyeryc]

User not logged in

Will show the button up top, and blur out some of the information on the page.

• Show button to view data on hover

User hasn't provided token

If the user has authenticated with GitHub, but hasn't provided a token:

• The navigation will show the onboarding status as a button
• Button text will change