[Issues 720, 721] Research Page Methodology and Archetypes (#813)

* research page method and archetype with test and stories

frontend/public/locales/en/common.json

@@ -51,8 +51,42 @@
     "meta_description": "A one‑stop shop for all federal discretionary funding to make it easy for you to discover, understand, and apply for opportunities.",
     "alert_title": "Simpler Grants.gov is a work in progress.",
     "alert": "To search for funding opportunities and apply, go to <LinkToGrants>www.grants.gov</LinkToGrants>.",
-    "intro_title": "Our existing research",
-    "intro_content": "We conducted extensive research in 2023 to gather insights from applicants, potential applicants, and grantmakers. We’re using these findings to guide our work. And your ongoing feedback will inform and inspire new features as we build a simpler Grants gov together."
+    "intro": {
+      "title": "Our existing research",
+      "content": "We conducted extensive research in 2023 to gather insights from applicants, potential applicants, and grantmakers. We’re using these findings to guide our work. And your ongoing feedback will inform and inspire new features as we build a simpler Grants gov together."
+    },
+    "methodology": {
+      "title": "The methodology",
+      "paragraph_1": "Applicants and grantmakers were selected for a series of user interviews to better understand their experience using Grants.gov. Recruiting choices were made equitably to ensure a diverse pool of participants. We spoke to a large number of users, well above industry standards. Of the applicants who were interviewed, 26% were first-time applicants, 39% were occasional applicants, and 34% were frequent applicants. With the findings from these interviews, we defined user archetypes and general themes to guide the Simpler.Grants.gov user experience.",
+      "title_2": "Research objectives:",
+      "paragraph_2": "<ul><li>Examine existing user journeys and behaviors, identifying where Grants.gov fits into their overall approach and its role in relation to other systems</li><li>Learn from their experiences, roles, challenges, and ability to complete specific tasks</li><li>Identify barriers and areas of opportunity where a simpler Grants.gov can create a more equitable experience for underserved communities</li></ul>",
+      "title_3": "Want to be notified when there are upcoming user research efforts?",
+      "cta": "Sign up for project updates"
+    },
+    "archetypes": {
+      "title": "Applicant archetypes",
+      "paragraph_1": "Archetypes are compelling summaries that highlight the types of applicants that Grants.gov serves. They’re informed by and summarize user research data, and represent user behaviors, attitudes, motivations, pain points, and goals. We’ll use these archetypes to influence our design decisions, guide the product’s direction, and keep our work human-centered. ",
+      "novice": {
+        "title": "The Novice",
+        "paragraph_1": "Applicants lacking familiarity with the grant application process, including first-time or infrequent applicants and those who never apply",
+        "paragraph_2": "Novices often come from low-capacity organizations. They face a steep learning curve to find and apply for funding opportunities. Solving their needs will generate a more inclusive Grants.gov experience."
+      },
+      "collaborator": {
+        "title": "The Collaborator",
+        "paragraph_1": "Applicants who've applied before, working with colleagues or partner organizations to increase their chances of success",
+        "paragraph_2": "Collaborators have more familiarity with Grants.gov. But they face challenges with coordinating application materials, and often resorting to tools and resources outside of Grants.gov."
+      },
+      "maestro": {
+        "title": "The Maestro",
+        "paragraph_1": "Frequent applicants familiar with Grants.gov, who are often directly responsible for managing multiple applications at once",
+        "paragraph_2": "Maestros have an established approach to applying, which may include software and tools outside of Grants.gov. Their primary concerns are rooted in determining grant feasibility and staying ahead of deadlines."
+      },
+      "supervisor": {
+        "title": "The Supervisor",
+        "paragraph_1": "Applicants who have a more senior role at organizations and have less frequent direct involvement with Grants.gov than Maestros.",
+        "paragraph_2": "Supervisors are responsible for oversight, approvals, final submissions, and keeping registrations up to date. Their time is limited, as they're often busy with the organization's other needs."
+      }
+    }
   },
   "Process": {
     "page_title": "Process | Simpler Grants.gov",

frontend/src/components/ContentLayout.tsx

@@ -4,29 +4,48 @@ type Props = {
   titleSize?: "l" | "m";
   title?: string;
   children: React.ReactNode;
-  bottomBorder?: boolean;
+  bottomBorder?: "light" | "dark" | "none";
+  paddingTop?: boolean;
 };
 
 const ContentLayout = ({
   children,
   title,
+  paddingTop = true,
   titleSize = "l",
-  bottomBorder = true,
+  bottomBorder = "none",
 }: Props) => {
   const formattedTitle = () => {
     if (!title) return "";
     const size =
       titleSize === "l"
         ? "tablet-lg:font-sans-xl desktop-lg:font-sans-2xl"
         : "tablet-lg:font-sans-l desktop-lg:font-sans-xl";
-    return <h2 className={`margin-bottom-0 ${size}`}>{title}</h2>;
+    return (
+      <h2
+        className={`margin-bottom-0 ${size} ${
+          !paddingTop ? "margin-top-0" : ""
+        }`}
+      >
+        {title}
+      </h2>
+    );
   };
 
+  const bborder =
+    bottomBorder === "light"
+      ? "border-bottom-2px border-base-lighter"
+      : bottomBorder === "dark"
+      ? "border-bottom-2px border-base-light"
+      : "";
+
   return (
     <GridContainer
       className={`padding-y-1 tablet:padding-y-3 desktop-lg:padding-y-6 ${
-        bottomBorder ? "border-bottom-2px border-base-lightest" : ""
-      }`}
+        !paddingTop
+          ? "padding-top-0 tablet:padding-top-0 desktop-lg:padding-top-0"
+          : ""
+      } ${bborder}`}
     >
       {formattedTitle()}
       <Grid row gap>

frontend/src/pages/content/IndexGoalContent.tsx

@@ -8,7 +8,11 @@ const IndexGoalContent = () => {
   const { t } = useTranslation("common", { keyPrefix: "Index" });
 
   return (
-    <ContentLayout title={t("goal.title")} data-testid="goal-content">
+    <ContentLayout
+      title={t("goal.title")}
+      data-testid="goal-content"
+      bottomBorder="light"
+    >
       <Grid tabletLg={{ col: 6 }} desktop={{ col: 5 }} desktopLg={{ col: 6 }}>
         <p className="usa-intro">{t("goal.paragraph_1")}</p>
         <Link href="#" passHref>

frontend/src/pages/content/IndexProcessContent.tsx

@@ -10,7 +10,11 @@ const IndexProcessContent = () => {
   const { t } = useTranslation("common", { keyPrefix: "Index" });
 
   return (
-    <ContentLayout title={t("process.title")} data-testid="process-content">
+    <ContentLayout
+      title={t("process.title")}
+      data-testid="process-content"
+      bottomBorder="light"
+    >
       <Grid tabletLg={{ col: 6 }}>
         <p className="usa-intro">{t("process.paragraph_1")}</p>
         <Link href="/process" passHref>

frontend/src/pages/content/IndexResearchContent.tsx

@@ -16,7 +16,7 @@ const IndexResearchContent = () => {
     <ContentLayout title={t("research.title")} data-testid="research-content">
       <Grid tabletLg={{ col: 6 }} desktop={{ col: 5 }} desktopLg={{ col: 6 }}>
         <p className="usa-intro">{t("research.paragraph_1")}</p>
-        <Link href="/process" passHref>
+        <Link href="/research" passHref>
           <Button className="margin-bottom-4" type="button" size="big">
             {t("research.cta")}{" "}
             <Icon.ArrowForward

frontend/src/components/ProcessContent.tsx → frontend/src/pages/content/ProcessContent.tsx

@@ -1,20 +1,19 @@
 import { useTranslation } from "next-i18next";
-import { Grid, GridContainer } from "@trussworks/react-uswds";
+import { Grid } from "@trussworks/react-uswds";
+
+import ContentLayout from "src/components/ContentLayout";
 
 const ProcessContent = () => {
   const { t } = useTranslation("common", { keyPrefix: "Process" });
 
   return (
-    <GridContainer className="padding-bottom-5 tablet:padding-top-0 desktop-lg:padding-top-0 border-bottom-2px border-base-lightest">
-      <h1 className="margin-0 tablet-lg:font-sans-xl desktop-lg:font-sans-2xl">
-        {t("title")}
-      </h1>
+    <ContentLayout
+      title={t("title")}
+      data-testid="process-intro-content"
+      paddingTop={false}
+    >
       <Grid row gap>
-        <Grid
-          tabletLg={{ col: 12 }}
-          desktop={{ col: 12 }}
-          desktopLg={{ col: 12 }}
-        >
+        <Grid>
           <p className="tablet-lg:font-sans-xl line-height-sans-3 usa-intro margin-top-2">
             {t("content")}
           </p>
@@ -52,7 +51,7 @@ const ProcessContent = () => {
           </div>
         </Grid>
       </Grid>
-    </GridContainer>
+    </ContentLayout>
   );
 };
 

frontend/src/pages/content/ResearchArchetypes.tsx

@@ -0,0 +1,124 @@
+import { useTranslation } from "next-i18next";
+import Image from "next/image";
+import { Grid } from "@trussworks/react-uswds";
+
+import ContentLayout from "src/components/ContentLayout";
+import embarrassed from "../../../public/img/noun-embarrassed.svg";
+import goal from "../../../public/img/noun-goal.svg";
+import hiring from "../../../public/img/noun-hiring.svg";
+import leadership from "../../../public/img/noun-leadership.svg";
+
+const ResearchArchetypes = () => {
+  const { t } = useTranslation("common", { keyPrefix: "Research" });
+
+  return (
+    <ContentLayout
+      title={t("archetypes.title")}
+      data-testid="research-archetypes-content"
+      titleSize="m"
+      bottomBorder="dark"
+    >
+      <Grid>
+        <p className="usa-intro">{t("archetypes.paragraph_1")}</p>
+      </Grid>
+      <Grid
+        className="margin-bottom-2 tablet-lg:margin-bottom-4"
+        row
+        gap="sm"
+        tabletLg={{ col: 6 }}
+      >
+        <Grid col={3} className="text-center">
+          <Image
+            className="height-auto margin-top-1"
+            style={{ filter: "invert(33%)" }}
+            src={embarrassed as string}
+            alt="embarrased"
+            priority={false}
+          />
+        </Grid>
+        <Grid col={9}>
+          <p className="usa-intro margin-top-0">
+            {t("archetypes.novice.paragraph_1")}
+          </p>
+          <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+            {t("archetypes.novice.paragraph_2")}
+          </p>
+        </Grid>
+      </Grid>
+      <Grid
+        className="margin-bottom-2 tablet-lg:margin-bottom-4"
+        row
+        gap="sm"
+        tabletLg={{ col: 6 }}
+      >
+        <Grid col={3} className="text-center">
+          <Image
+            className="height-auto margin-top-1"
+            style={{ filter: "invert(33%)" }}
+            src={leadership as string}
+            alt="leadership"
+            priority={false}
+          />
+        </Grid>
+        <Grid col={9}>
+          <p className="usa-intro margin-top-0">
+            {t("archetypes.collaborator.paragraph_1")}
+          </p>
+          <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+            {t("archetypes.collaborator.paragraph_2")}
+          </p>
+        </Grid>
+      </Grid>
+      <Grid
+        className="margin-bottom-2 tablet-lg:margin-bottom-4"
+        row
+        gap="sm"
+        tabletLg={{ col: 6 }}
+      >
+        <Grid tabletLg={{ col: 3 }} className="text-center">
+          <Image
+            className="height-auto margin-top-1"
+            style={{ filter: "invert(33%)" }}
+            src={goal as string}
+            alt="goal"
+            priority={false}
+          />
+        </Grid>
+        <Grid tabletLg={{ col: 9 }}>
+          <p className="usa-intro margin-top-0">
+            {t("archetypes.maestro.paragraph_1")}
+          </p>
+          <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+            {t("archetypes.maestro.paragraph_2")}
+          </p>
+        </Grid>
+      </Grid>
+      <Grid
+        className="margin-bottom-2 tablet-lg:margin-bottom-4"
+        row
+        gap="sm"
+        tabletLg={{ col: 6 }}
+      >
+        <Grid tabletLg={{ col: 3 }} className="text-center">
+          <Image
+            className="height-auto margin-top-1"
+            style={{ filter: "invert(33%)" }}
+            src={hiring as string}
+            alt="hiring"
+            priority={false}
+          />
+        </Grid>
+        <Grid tabletLg={{ col: 9 }}>
+          <p className="usa-intro margin-top-0">
+            {t("archetypes.supervisor.paragraph_1")}
+          </p>
+          <p className="margin-top-0 font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
+            {t("archetypes.supervisor.paragraph_2")}
+          </p>
+        </Grid>
+      </Grid>
+    </ContentLayout>
+  );
+};
+
+export default ResearchArchetypes;

frontend/src/pages/content/ResearchIntro.tsx

@@ -0,0 +1,25 @@
+import { useTranslation } from "next-i18next";
+import { Grid } from "@trussworks/react-uswds";
+
+import ContentLayout from "src/components/ContentLayout";
+
+const ResearchIntro = () => {
+  const { t } = useTranslation("common", { keyPrefix: "Research" });
+
+  return (
+    <ContentLayout
+      title={t("intro.title")}
+      data-testid="research-intro-content"
+      paddingTop={false}
+      bottomBorder="light"
+    >
+      <Grid>
+        <p className="tablet-lg:font-sans-xl line-height-sans-3 usa-intro margin-top-2">
+          {t("intro.content")}
+        </p>
+      </Grid>
+    </ContentLayout>
+  );
+};
+
+export default ResearchIntro;