Improve product onboarding form (#19755)

Author: Siddhant-K-code

Diff for: components/dashboard/src/components/forms/CheckboxInputField.tsx

@@ -12,15 +12,24 @@ import { InputFieldHint } from "./InputFieldHint";
 
 type CheckboxListFieldProps = {
     label?: string;
+    sublabel?: string;
     error?: ReactNode;
     className?: string;
     topMargin?: boolean;
 };
 
 // CheckboxListField is a wrapper for a list of related CheckboxInputField components.
-export const CheckboxListField: FC<CheckboxListFieldProps> = ({ label, error, className, topMargin, children }) => {
+export const CheckboxListField: FC<CheckboxListFieldProps> = ({
+    label,
+    sublabel,
+    error,
+    className,
+    topMargin,
+    children,
+}) => {
     return (
         <InputField label={label} className={className} error={error} topMargin={topMargin}>
+            {sublabel && <div className="text-sm text-gray-500 dark:text-gray-400">{sublabel}</div>}
             <div className="space-y-2 ml-2">{children}</div>
         </InputField>
     );

Diff for: components/dashboard/src/onboarding/OnboardingStep.tsx

@@ -12,7 +12,7 @@ import { LoadingButton } from "@podkit/buttons/LoadingButton";
 
 type Props = {
     title: string;
-    subtitle: string;
+    subtitle?: string;
     isValid: boolean;
     isSaving?: boolean;
     error?: string;
@@ -53,7 +53,7 @@ export const OnboardingStep: FC<Props> = ({
         <div className="flex flex-col items-center justify-center max-w-full">
             {/* Intentionally adjusting the size of the heading here */}
             <Heading2 className="text-4xl">{title}</Heading2>
-            <Subheading>{subtitle}</Subheading>
+            {subtitle && <Subheading>{subtitle}</Subheading>}
 
             <form className="mt-8 mb-14 max-w-lg" onSubmit={handleSubmit}>
                 {/* Form contents provided as children */}

Diff for: components/dashboard/src/onboarding/StepOrgInfo.tsx

@@ -159,15 +159,14 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
     return (
         <OnboardingStep
             title="Tell us more about you"
-            subtitle="Let us know what brought you here."
             error={updateUser.isError ? "There was a problem saving your answers" : ""}
             isValid={isValid}
             isSaving={updateUser.isLoading}
             onSubmit={handleSubmit}
         >
             <SelectInputField
                 value={jobRole}
-                label="I work in..."
+                label="What best describes your role"
                 onChange={(val) => {
                     if (val !== "other") {
                         setJobRoleOther("");
@@ -188,7 +187,7 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                 <TextInputField value={jobRoleOther} onChange={setJobRoleOther} placeholder="Please share (optional)" />
             )}
 
-            <CheckboxListField label="I'm exploring Gitpod...">
+            <CheckboxListField label="You're exploring Gitpod for">
                 {explorationReasonsOptions.map((o) => (
                     <CheckboxInputField
                         key={o.value}
@@ -223,7 +222,7 @@ export const StepOrgInfo: FC<Props> = ({ user, onComplete }) => {
                 </SelectInputField>
             )}
 
-            <CheckboxListField label="I'm signing up for Gitpod for...">
+            <CheckboxListField label="I'm hoping to use Gitpod for" sublabel="Select all that apply">
                 {signupGoalsOptions.map((o) => (
                     <CheckboxInputField
                         key={o.value}

Diff for: components/dashboard/src/onboarding/exploration-reasons.ts

@@ -7,11 +7,11 @@ export const EXPLORE_REASON_WORK = "explore-professional";
 
 export const getExplorationReasons = () => {
     return [
-        { value: EXPLORE_REASON_WORK, label: "For work" },
-        { value: "explore-personal", label: "For personal projects or open-source" },
+        { value: EXPLORE_REASON_WORK, label: "Work" },
+        { value: "explore-personal", label: "Personal projects or open-source development" },
         {
             value: "replace-remote-dev",
-            label: "To replace remote/containerized development (VDI, VM, Docker Desktop)",
+            label: "Replacing remote or containerized development (i.e. VDI, VM, Docker Desktop)",
         },
     ];
 };

Diff for: components/dashboard/src/onboarding/signup-goals.ts

@@ -8,10 +8,10 @@ export const SIGNUP_GOALS_OTHER = "other";
 
 export const getSignupGoalsOptions = () => {
     return [
-        { value: "efficiency-collab", label: "Dev efficiency & collaboration" },
         { value: "onboarding", label: "Faster onboarding" },
-        { value: "powerful-resources", label: "More powerful dev resources" },
-        { value: "security", label: "More secure dev process" },
+        { value: "efficiency-collab", label: "Improve developer efficiency and collaboration" },
+        { value: "powerful-resources", label: "More powerful development resources" },
+        { value: "security", label: "More secure development process" },
         { value: SIGNUP_GOALS_OTHER, label: "Other" },
     ];
 };