[ Issues 832, 833, 834] Research Content Updates (#852)

frontend/public/locales/en/common.json

@@ -47,9 +47,9 @@
     },
     "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.",
+      "paragraph_1": "<p>Applicants and grantmakers were selected for a series of user interviews to better understand their experience using Grants.gov. We recruited equitably to ensure a diverse pool of participants.</p><p>The quantity of participants was well above industry standards. Of the applicants who were interviewed, 26% were first-time applicants, 39% were occasional applicants, and 34% were frequent applicants.</p><p>With the findings from these interviews, we defined user archetypes and general themes to guide the Simpler.Grants.gov user experience.</p>",
       "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>",
+      "paragraph_2": "<ul><li>Examine existing user journeys and behaviors, identifying how Grants.gov fits into their overall approach</li><li>Learn from user experiences, roles, challenges</li><li>Identify barriers and how a simpler Grants.gov can create a more intuitive user experience, especially for new users</li></ul>",
       "title_3": "Want to be notified when there are upcoming user research efforts?",
       "cta": "Sign up for project updates"
     },
@@ -59,7 +59,7 @@
       "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."
+        "paragraph_2": "Novices are often new to the grants application process. 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",
@@ -92,7 +92,7 @@
     "impact": {
       "title": "Where can we have the most impact?",
       "paragraph_1": "The most burden is on the Novice to become an expert on the grants process and system. In order to execute our mission, there is a need to improve awareness, access, and choice. This requires reaching out to those who are unfamiliar with the grant application process.",
-      "paragraph_2": "There are many common barriers that Novices face:",
+      "paragraph_2": "There are many common barriers that users face:",
       "title_2": "Are there challenges you’ve experienced that aren’t captured here?",
       "paragraph_3": "If you would like to share your experiences and challenges as either an applicant or grantmaker, reach out to us at <email>[email protected]</email> or <newsletter>sign up for project updates <arrowUpRightFromSquare></arrowUpRightFromSquare></newsletter>. to be notified of upcoming user research efforts.",
       "boxes": [

frontend/src/pages/content/ResearchArchetypes.tsx

@@ -29,14 +29,17 @@ const ResearchArchetypes = () => {
       >
         <Grid col={3} className="text-center">
           <Image
-            className="height-auto margin-top-1"
+            className="height-auto margin-top-4 tablet-lg:margin-top-6"
             style={{ filter: "invert(33%)" }}
             src={embarrassed as string}
             alt="embarrased"
             priority={false}
           />
         </Grid>
         <Grid col={9}>
+          <h3 className="tablet-lg:font-sans-lg">
+            {t("archetypes.novice.title")}
+          </h3>
           <p className="usa-intro margin-top-0">
             {t("archetypes.novice.paragraph_1")}
           </p>
@@ -53,14 +56,17 @@ const ResearchArchetypes = () => {
       >
         <Grid col={3} className="text-center">
           <Image
-            className="height-auto margin-top-1"
+            className="height-auto margin-top-4 tablet-lg:margin-top-6"
             style={{ filter: "invert(33%)" }}
             src={leadership as string}
             alt="leadership"
             priority={false}
           />
         </Grid>
         <Grid col={9}>
+          <h3 className="tablet-lg:font-sans-lg">
+            {t("archetypes.collaborator.title")}
+          </h3>
           <p className="usa-intro margin-top-0">
             {t("archetypes.collaborator.paragraph_1")}
           </p>
@@ -77,14 +83,17 @@ const ResearchArchetypes = () => {
       >
         <Grid col={3} className="text-center">
           <Image
-            className="height-auto margin-top-1"
+            className="height-auto margin-top-4 tablet-lg:margin-top-6"
             style={{ filter: "invert(33%)" }}
             src={goal as string}
             alt="goal"
             priority={false}
           />
         </Grid>
         <Grid col={9}>
+          <h3 className="tablet-lg:font-sans-lg">
+            {t("archetypes.maestro.title")}
+          </h3>
           <p className="usa-intro margin-top-0">
             {t("archetypes.maestro.paragraph_1")}
           </p>
@@ -101,14 +110,17 @@ const ResearchArchetypes = () => {
       >
         <Grid col={3} className="text-center">
           <Image
-            className="height-auto margin-top-1"
+            className="height-auto margin-top-4 tablet-lg:margin-top-6"
             style={{ filter: "invert(33%)" }}
             src={hiring as string}
             alt="hiring"
             priority={false}
           />
         </Grid>
         <Grid col={9}>
+          <h3 className="tablet-lg:font-sans-lg">
+            {t("archetypes.supervisor.title")}
+          </h3>
           <p className="usa-intro margin-top-0">
             {t("archetypes.supervisor.paragraph_1")}
           </p>

frontend/src/pages/content/ResearchImpact.tsx

@@ -19,9 +19,6 @@ const ResearchImpact = () => {
 
   const boxes: ImpactBoxes[] = t("impact.boxes", { returnObjects: true });
 
-  // Do not render if translations aren't ready as returnObjects and map causes the prerender to fail
-  // if (!ready) return <></>;
-
   return (
     <ContentLayout
       title={t("impact.title")}

frontend/src/pages/content/ResearchMethodology.tsx

@@ -15,7 +15,17 @@ const ResearchMethodology = () => {
       bottomBorder="none"
     >
       <Grid tabletLg={{ col: 6 }}>
-        <p className="usa-intro">{t("methodology.paragraph_1")}</p>
+        <div className="margin-top-3">
+          <Trans
+            t={t}
+            i18nKey={"methodology.paragraph_1"}
+            components={{
+              p: (
+                <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6" />
+              ),
+            }}
+          />
+        </div>
       </Grid>
       <Grid tabletLg={{ col: 6 }}>
         <h3 className="tablet-lg:font-sans-lg tablet-lg:margin-bottom-05">
@@ -26,18 +36,21 @@ const ResearchMethodology = () => {
           i18nKey="methodology.paragraph_2"
           components={{
             ul: (
-              <ul className="usa-list margin-top-0 tablet-lg:margin-top-3 font-sans-md line-height-sans-4 margin-bottom-2" />
+              <ul className="usa-list margin-top-0 tablet-lg:margin-top-3 font-sans-md line-height-sans-4 margin-bottom-4" />
             ),
             li: <li />,
           }}
         />
-        <h3 className="tablet-lg:font-sans-lg margin-top-4 margin-bottom-2">
+        <p className="font-sans-md line-height-sans-4 desktop-lg:line-height-sans-6">
           {t("methodology.title_3")}
-        </h3>
+        </p>
         <Link href="/newsletter" passHref>
-          <Button className="margin-bottom-4" type="button" size="big">
+          <Button className="margin-bottom-4" type="button" outline>
             {t("methodology.cta")}{" "}
-            <Icon.Launch className="text-middle" size={4} aria-label="launch" />
+            <Icon.ArrowForward
+              className="text-middle"
+              aria-label="arror-forward"
+            />
           </Button>
         </Link>
       </Grid>