New User Onboarding Flow UI #16501

selfcontained · 2023-02-21T22:42:03Z

Description

This adds a new onboarding flow for new users (currently we consider new users anyone that hasn't provided a preferred IDE). For those users, we'll show the following three step flow when they sign in.

Step One	Step Two	Step Three

This is behind the newSignupFlow feature flag that is enabled in non-production.
While we're collecting a distinct First and Last name in the flow, we're still storing these as a unified fullName on the user. Collecting as 2 fields is an attempt to help signal we're asking for real names and not aliases/usernames.
Email is still stored on user.additionalDetails.profile.emailAddress
Answers to step 3 are stored on new fields under user.additionalDetails.profile
At the completion of the onboarding flow we're storing a timestamp on user.additionalDetails.profile.onboardedTimestamp to help us identify which user's have completed this flow in the future. We plan to introduce this flow, or a variation of it to existing users, and this will help us distinguish those that have gone through it.

Related Issue(s)

Fixes #

How to test

Visit the preview environment: https://bmh-onboarding-form.preview.gitpod-dev.com/
The first time you visit, you should be sent through the flow.
You can verify your name and email changes are applied after completing the flow by visiting the User Settings.

Repeat the flow
You can also initiate the onboarding flow manually by appending the query param ?onboarding=force to a url. For example:

https://bmh-onboarding-form.preview.gitpod-dev.com/workspaces?onboarding=force

... should kick you into the flow even if you've completed it. This was mainly added to aid in testing, but could be helpful in the future to send a user into the flow manually.

With Starting Workspace links:

You can also test this with a workspace context link and include the ?onboarding=force query param:

https://bmh-onboarding-form.preview.gitpod-dev.com/?onboarding=force#https://github.com/gitpod-io/gitpod

Release Notes

We've introduced a new onboarding flow to help user's customize Gitpod and get to know their needs better.

Documentation

Build Options:

/werft with-github-actions
Experimental feature to run the build with GitHub Actions (and not in Werft).
leeway-no-cache
leeway-target=components:all
/werft no-test
Run Leeway with --dont-test

Publish Options

/werft publish-to-npm
/werft publish-to-jb-marketplace

Installer Options

with-ee-license
with-slow-database
with-dedicated-emulation
with-ws-manager-mk2
workspace-feature-flags
Add desired feature flags to the end of the line above, space separated

Preview Environment Options:

/werft with-local-preview
If enabled this will build install/preview
/werft with-preview
/werft with-large-vm
/werft with-gce-vm
If enabled this will create the environment on GCE infra
/werft with-integration-tests=all
Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh
/werft analytics=segment

werft-gitpod-dev-com · 2023-02-21T22:42:11Z

started the job as gitpod-build-bmh-onboarding-form.1 because the annotations in the pull request description changed
(with .werft/ from main)

selfcontained · 2023-02-22T01:18:01Z

/werft run with-clean-slate-deployment=true recreate-vm=true

👍 started the job as gitpod-build-bmh-onboarding-form.3
(with .werft/ from main)

components/dashboard/src/components/ThemeSelector.tsx

selfcontained · 2023-02-22T04:45:36Z

components/dashboard/tsconfig.json

@@ -13,7 +13,7 @@
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,


Disabling for compilation to improve dx a bit. Once we have our linter enabled for PRs it will catch any unused vars rather than it be a compilation error.

selfcontained · 2023-02-22T16:09:30Z

/werft run with-preview with-gce-vm

👍 started the job as gitpod-build-bmh-onboarding-form.10
(with .werft/ from main)

selfcontained · 2023-02-22T17:11:29Z

/werft run with-preview with-gce-vm

👍 started the job as gitpod-build-bmh-onboarding-form.12
(with .werft/ from main)

selfcontained · 2023-02-22T17:37:10Z

/werft run with-preview=true

👍 started the job as gitpod-build-bmh-onboarding-form.13
(with .werft/ from main)

mustard-mh · 2023-02-23T13:52:34Z

I tried with ?onboarding=force, but didn't see this onboarding flow, did I miss any steps? @selfcontained

https://bmh-onboarding-form.preview.gitpod-dev.com/?onboarding=force#https://github.com/gitpod-io/gitpod

gtsiolis

Thanks for making this happen, @selfcontained! 🔮

💭 I'd leave comments with suggestions in individual lines, but for the sake of minimizing the distraction, noise, and scope creep in this PR, I've added only one review comment about a component reusability.

❓ The only question that's possibly worth asking is whether we could skip the first + last name here and go with the proposal of the preferred name you mentioned in our recent discussion. Cc @loujaybee @phimae

🛹 I've also posted a slightly improved version of the flow in a relevant discussion (internal), that includes quite a few changes, including additional steps, better disabled states, skip option, and more. However, I'd not hold this back for the first iteration. Adding below three of the pages affected here in case we could grab any design bits that are easy to address here like copy changes, font styles, etc. See also design thinking (internal) behind these changes.

Step 1	Step 2	Step 3

Approving to unblock merging, holding in case you'd like to address any of the UX suggestions.

/hold

gtsiolis · 2023-02-23T14:05:44Z

components/dashboard/src/onboarding/StepOrgInfo.tsx

+                {signupGoalsOptions.map((o) => (
+                    <div key={o.value} className="flex space-x-2 justify-start items-center">
+                        <input
+                            type="checkbox"


suggestion: We do have a Checkbox component that could be helpful here.

I need to make one, this was the first checkbox I've added ui for, so wanted to build it out a little, and will extract it to a component in a followup. Checkboxes are always so different than other inputs, so I wasn't sure what our UX pattern might look like for them.

DEAL—Opened #16511 yesterday that mentions a checkbox component which is possibly worth splitting into separate issues for each form element. 🏓

Siddhant-K-code · 2023-02-23T14:42:40Z

I tried with ?onboarding=force, but didn't see this onboarding flow, did I miss any steps? @selfcontained

https://bmh-onboarding-form.preview.gitpod-dev.com/?onboarding=force#https://github.com/gitpod-io/gitpod

@mustard-mh, Related Internal conversation

jakobhero · 2023-02-23T14:44:38Z

thanks for working on this @selfcontained !🙏🏼 i'm having a look at the tracking of this now👀

mustard-mh · 2023-02-23T15:35:14Z

components/dashboard/src/onboarding/signup-goals.ts

+            value: "replace_remote_containerized_dev",
+        },
+        { label: "More powerful dev resources", value: "powerful_dev_resources" },
+        { label: "Just exploring CDEs", value: "exploring_cdes" },


Maybe make it (CEDs) possible to add a link here?

And also other labels if it can help user to understand

@mustard-mh I think, He meant Cloud Dev Environments (CDEs)

A link would be great - going to leave that for a followup as I'd need to adjust a few things with how these labels render so it supports it.

@mustard-mh I think, He meant Cloud Dev Environments (CDEs)

Yep, I know it, but for users may don't know this shorthand new word 😂 just want to give them more context

werft-gitpod-dev-com · 2023-02-23T19:26:25Z

started the job as gitpod-build-bmh-onboarding-form.21 because the annotations in the pull request description changed
(with .werft/ from main)

mustard-mh

If it's for commit info, then first and last names do seem not that good to me (it's more like a nick for me).

And I confirmed that it's not working as it said, we may need to add env var too

OnboardingFlow	Settings	CommitInfo

selfcontained · 2023-02-23T22:48:44Z

/unhold

selfcontained added 4 commits February 21, 2023 22:37

disable rule for better dx - linter will catch

cb6af81

add styles for other input types

e853507

adding more options to input components

d4b7832

Building out onboarding form

6cc4f18

roboquat added do-not-merge/work-in-progress do-not-merge/release-note-label-needed labels Feb 21, 2023

roboquat added the size/XL label Feb 21, 2023

adjusting form

5307855

breaking onboarding flow into pieces

f78b0b2

roboquat added size/XXL and removed size/XL labels Feb 22, 2023

adding personalize step

066820a

selfcontained changed the title ~~Bmh/onboarding-form~~ New User Onboarding Flow UI Feb 22, 2023

selfcontained added 3 commits February 22, 2023 04:33

removing old code

74263bc

removing un-needed code

05ebdd7

Plug in ThemeSelector component

f078fcd

selfcontained commented Feb 22, 2023

View reviewed changes

components/dashboard/src/components/ThemeSelector.tsx Show resolved Hide resolved

selfcontained commented Feb 22, 2023

View reviewed changes

cleanup

aa05a79

selfcontained added 2 commits February 22, 2023 17:01

update onboarding logic

4ec1fd7

disable or members query if no current org present

02b3cd3

selfcontained added 4 commits February 22, 2023 23:45

adjusting where we save onboarding data

0f12ff5

make label optional

273525e

change signup goals to an array

189542b

change to company

f2d868e

gtsiolis approved these changes Feb 23, 2023

View reviewed changes

mustard-mh reviewed Feb 23, 2023

View reviewed changes

selfcontained added 9 commits February 23, 2023 18:14

adjust spacing/layout

6b91b5d

Add additional comments for context

1a5d15c

rename isLoading to isSaving for clarity

a676453

fix typo

cae16dd

set type on button, don't submit if invalid

1cc9482

adding required on required fields

3cb0b60

fix typos

c019664

Adjusting titles, styles and adding avatar

9f526a8

account for new profile fields for tracking

3be00ab

remove check for signupGoals

6a9e763

mustard-mh reviewed Feb 23, 2023

View reviewed changes

selfcontained added 2 commits February 23, 2023 21:02

updating options

f49cd2f

Adding exploration reasons question

452874b

roboquat removed the do-not-merge/hold label Feb 23, 2023

roboquat merged commit 83862f2 into main Feb 23, 2023

roboquat deleted the bmh/onboarding-form branch February 23, 2023 22:49

selfcontained restored the bmh/onboarding-form branch February 23, 2023 23:20

roboquat added deployed: webapp Meta team change is running in production deployed Change is completely running in production labels Feb 24, 2023

filiptronicek mentioned this pull request Feb 24, 2023

New signup flow improvements #16553

Closed

11 tasks

gtsiolis mentioned this pull request Feb 24, 2023

Remove the company name field in the user profile #16560

Closed

loujaybee mentioned this pull request Feb 28, 2023

Epic: Collect information from users during onboarding #15857

Closed

gtsiolis mentioned this pull request Mar 1, 2023

[dashboard, server] Add global custom timeout preference #16503

Merged

15 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New User Onboarding Flow UI #16501

New User Onboarding Flow UI #16501

selfcontained commented Feb 21, 2023 •

edited

Loading

werft-gitpod-dev-com bot commented Feb 21, 2023

selfcontained commented Feb 22, 2023 •

edited by werft-gitpod-dev-com bot

Loading

selfcontained Feb 22, 2023

selfcontained commented Feb 22, 2023 •

edited by werft-gitpod-dev-com bot

Loading

selfcontained commented Feb 22, 2023 •

edited by werft-gitpod-dev-com bot

Loading

selfcontained commented Feb 22, 2023 •

edited by werft-gitpod-dev-com bot

Loading

mustard-mh commented Feb 23, 2023

gtsiolis left a comment •

edited

Loading

gtsiolis Feb 23, 2023 •

edited

Loading

selfcontained Feb 23, 2023

gtsiolis Feb 23, 2023 •

edited

Loading

Siddhant-K-code commented Feb 23, 2023

jakobhero commented Feb 23, 2023 •

edited by werft-gitpod-dev-com bot

Loading

mustard-mh Feb 23, 2023 •

edited

Loading

Siddhant-K-code Feb 23, 2023

selfcontained Feb 23, 2023

mustard-mh Feb 23, 2023

werft-gitpod-dev-com bot commented Feb 23, 2023

mustard-mh left a comment

selfcontained commented Feb 23, 2023

New User Onboarding Flow UI #16501

New User Onboarding Flow UI #16501

Conversation

selfcontained commented Feb 21, 2023 • edited Loading

Description

Related Issue(s)

How to test

Release Notes

Documentation

Build Options:

Preview Environment Options:

werft-gitpod-dev-com bot commented Feb 21, 2023

selfcontained commented Feb 22, 2023 • edited by werft-gitpod-dev-com bot Loading

selfcontained Feb 22, 2023

Choose a reason for hiding this comment

selfcontained commented Feb 22, 2023 • edited by werft-gitpod-dev-com bot Loading

selfcontained commented Feb 22, 2023 • edited by werft-gitpod-dev-com bot Loading

selfcontained commented Feb 22, 2023 • edited by werft-gitpod-dev-com bot Loading

mustard-mh commented Feb 23, 2023

gtsiolis left a comment • edited Loading

Choose a reason for hiding this comment

gtsiolis Feb 23, 2023 • edited Loading

Choose a reason for hiding this comment

selfcontained Feb 23, 2023

Choose a reason for hiding this comment

gtsiolis Feb 23, 2023 • edited Loading

Choose a reason for hiding this comment

Siddhant-K-code commented Feb 23, 2023

jakobhero commented Feb 23, 2023 • edited by werft-gitpod-dev-com bot Loading

mustard-mh Feb 23, 2023 • edited Loading

Choose a reason for hiding this comment

Siddhant-K-code Feb 23, 2023

Choose a reason for hiding this comment

selfcontained Feb 23, 2023

Choose a reason for hiding this comment

mustard-mh Feb 23, 2023

Choose a reason for hiding this comment

werft-gitpod-dev-com bot commented Feb 23, 2023

mustard-mh left a comment

Choose a reason for hiding this comment

selfcontained commented Feb 23, 2023

selfcontained commented Feb 21, 2023 •

edited

Loading

selfcontained commented Feb 22, 2023 •

edited by werft-gitpod-dev-com bot

Loading

selfcontained commented Feb 22, 2023 •

edited by werft-gitpod-dev-com bot

Loading

selfcontained commented Feb 22, 2023 •

edited by werft-gitpod-dev-com bot

Loading

selfcontained commented Feb 22, 2023 •

edited by werft-gitpod-dev-com bot

Loading

gtsiolis left a comment •

edited

Loading

gtsiolis Feb 23, 2023 •

edited

Loading

gtsiolis Feb 23, 2023 •

edited

Loading

jakobhero commented Feb 23, 2023 •

edited by werft-gitpod-dev-com bot

Loading

mustard-mh Feb 23, 2023 •

edited

Loading