Merge remote-tracking branch 'origin/bug/default-image' into bug/defa…

…ult-image

documentation/design/Post-MVP Ecosystem Design Thinking.md

@@ -1,39 +1,37 @@
 # Post-MVP Ecosystem Design Thinking
 
-To iterate on our MVP designs, we focused on items in our prioritization matrix that held high user value but brought additional implementation challenges over a short timeframe:
+To iterate on our MVP goals and designs, we focused on items in our prioritization matrix that held high user value. We did not have sufficient capacity in our initial sprint to build these concepts, hence we drafted the following guiding thoughts and wireframes.
 
+## Enable users to shortlist colleges and track applications 
 
-## The Authenticated Experience
-
-
-1. **Account creation**: Students may want to manage their college search and application process within just one website. Allowing users to create accounts and store their data encourages students to make smart return visits.
+1. **Creating an account to store their information**: Students may want to manage their college search and application process within just one website. Allowing users to create accounts and store their data encourages students to make smart return visits. (While authentication isn’t necessarily a feature users would directly want, it is an enabler for the capabilities listed below.)
 
 ![Screenshot of a mural with thinking about what fields might make up the student object, where the entry points might be, and how to present a profile](https://github.com/coforma/swift-tech-challenge/assets/122126772/5540f4a3-5f2d-42cc-b0be-1eff4eba5837)
 
 
-3. **Saving colleges to a list**: Students may want to save colleges to a list that they can edit and continue to add to over time.
+2. **Selecting and saving colleges to a shortlist**: Students may want to save colleges to a list that they can edit and continue to add to over time. 
 
 ![Screenshots of prototype with a favorite icon and a favorites list](https://github.com/coforma/swift-tech-challenge/assets/122126772/f8112b7a-6700-4e51-9c57-f183c36d4c5b)
 
 
-4. **Tracking applications**: Students who have submitted applications to different colleges may benefit from application status tracking, which would allow students to view which applications are in-progress, submitted, and unfinished.
+3. **Tracking applications**: Students who have submitted applications to different colleges may benefit from application status tracking, which would allow students to view which applications are in-progress, submitted, and unfinished. 
 
 <img width="1728" alt="Applications page" src="https://github.com/coforma/swift-tech-challenge/assets/122126772/a9ffecd2-e99e-41cb-97e2-575cc6909644">
 
 
-## Support for First-Generation College Students
+## Support for first-generation college students
 
-Students first in their family to go to college face additional obstacles in attending. The application and enrollment process is unintuitive and a lack of clarity regarding costs and financial aid can cause confusion. After launching the initial functionality, we’d like to focus on supporting this population with additional tools and content. This functionality could have the added benefit of exposing any student to college options and aspects of choice they hadn’t considered.
+Students first in their family to go to college face additional obstacles in attending. The application and enrollment process is unintuitive and a lack of clarity regarding costs and financial aid can cause confusion. After launching the initial functionality, we’d like to focus on supporting this population with additional tools and content, which—in addition to supporting a more straightforward enrollment experience—could have the added benefit of exposing students to college options they hadn’t considered.
 
 
-1. **Guided ‘College match’ quiz**: There is an incredible amount of data about colleges for students to parse through as they compare options. While we did restrict our filters to a set we thought might be most useful, we also think a guided walkthrough of a few of the filters, structured as a ‘My College Matches’ quiz, might be helpful.
+1. **Guiding and educating through a ‘College match’ quiz**: There is an incredible amount of data about colleges for students to read through as they compare options. While we did restrict our filters to a set we believed to be most useful for prospective students, we also believe that a guided walkthrough of a few of the filters—structured as a “My College Matches” quiz—would be helpful. 
 
 ![Screenshot of a college quiz experience](https://github.com/coforma/swift-tech-challenge/assets/122126772/6c3e2998-3033-4bbc-8768-d3f434e58bed)
 
 
-2. **Viewing net cost by income level on list page**: College costs can be so confusing! We made an assumption that students and families would be unlikely to understand the nuances of many of the cost fields provided, and thus looked for ways to simplify or explain in the tool post-MVP. We considered that for students from low-income backgrounds, the average net cost might be VERY different from the average cost for students from all income levels. We explored a tool that could display the average cost for a specific income bracket on the college card by asking a user to simply select their income bracket. We would definitely want to test this with users, because there is a risk that students and families could be even more confused.
+2. **Viewing net cost by income level when browsing colleges**: College costs can be intimidating and unclear. We made an assumption that the nuances of many of the cost fields provided could be confusing, and thus looked for ways to clarify in the tool post-MVP. We considered that, for students from low-income backgrounds, the average net cost might vary significantly from the average cost for students across all income levels. We explored a feature that could display the average cost for a specific income bracket on the college card by asking users to select their income bracket. We would definitely want to test this with users, because there is a risk that students and families could be even more confused.
 
 ![Screenshots of early design thinking around a college cost estimator](https://github.com/coforma/swift-tech-challenge/assets/122126772/332d235e-9e4c-41ac-8fdf-95f69e0f32bc)
 
 
-3. **Static content about applying and financial aid**: Students who do not have an accurate mental model of how college and financial aid works may need extra content to help them build that mental model, and thus be better equipped to successfully enroll and graduate from an affordable college. We explored the creation of static content about applying to and paying for college using chat GPT, and verified the information with an internal subject matter expert. It would be interesting to explore the best way to surface and present this information in user research.
+3. **Providing educational content on applying and financing**: Students who do not have an accurate mental model of how college and financial aid works may need extra content to help them build that mental model, and thus be better equipped to successfully enroll and graduate from an affordable college. We explored the creation of [static content UPDATE LINK!!](link) about applying to and paying for college using chat GPT, and verified the information with an internal subject matter expert. It would be interesting to explore the best way to surface and present this information in user research.

documentation/research/researchplan.md

@@ -0,0 +1,56 @@
+## RESEARCH PLAN
+
+### Design Research Goals
+
+We will conduct design research activities with first-time prospective college students aged 15-25 to understand their needs, desires, and mental models related to finding and applying to college. We are looking to learn:
+
+
+
+* How prospective students think about the college application process:
+    * What they anticipate the experience will be like, and how it works (aka, the mental model)
+    * What pain points they forsee for themselves or peers
+    * What their need, goals, and fears are
+    * Other tools they use to accomplish college-related tasks
+    * What motivates and demotivates them related to applying to college - functionally, emotionally and socially
+* How effective our MVP is at helping students meet their needs related to:
+    * Finding colleges that might be a good fit
+    * Applying for those colleges
+* How students would rate and prioritize post-MVP features like saving colleges, tracking applications, and the college/financial aid quiz.
+
+
+### Methodology
+
+We propose 60-minute, 1:1 interviews with students. They could follow this general format:
+
+
+
+* Part 1: Open ended questions 
+* Part 2: Usability testing session 
+* Part 3: Concept testing session
+
+In a **usability-testing session**, a researcher asks a participant to perform tasks, usually using one or more specific user interfaces. While the participant completes each task, the researcher observes the participant’s behavior and listens for feedback.
+
+A **concept testing session** involves collecting users’ thoughts and attitudes about a product idea (“concept”) in its early stages, usually through a qualitative survey or interview. It is used very early in the discovery phase of the design process to understand whether a specific product idea meets users’ needs and expectations.
+
+
+### Outcome
+
+Our learnings will inform content and visual enhancements along with metrics  to the measure effectivity, ensuring that we are building for the right mental model, and help us build out a roadmap for the product’s future.
+
+
+### Recruitment Approach
+
+Since we’re focusing on first-time college applicants, our primary source of students would likely be highschools or programs for high-school aged students (like community-based organizations, college prep programs, etc). We would prioritize speaking with students from underserved communities, or those who may need more support overcoming systemic obstacles to college.
+
+We might also invite a few adults from advocacy organization that could help us understand the landscape of college applications and financial aid.
+
+Our recruitment methods would be determined in collaboration with DoE stakeholders.
+
+
+### Next steps
+
+
+
+* Research plan adjustment and approval with stakeholders
+* Flesh out recruitment plan
+* Create moderator guide 

src/app/components/form/DropdownField.tsx

@@ -3,25 +3,12 @@
 import { FieldHint, DropdownOptions } from "../../types";
 import { Field } from "formik";
 
-export const DropdownField = ({
-  id,
-  label,
-  required,
-  name,
-  options,
-  hint,
-}: Props) => {
-  const fieldLabel = required ? `${label} *` : `${label}`;
+export const DropdownField = ({ id, label, name, options, hint }: Props) => {
   return (
     <>
       <label className="usa-label" htmlFor={id}>
-        {fieldLabel}
+        {label}
       </label>
-      {hint && (
-        <div className="usa-hint" id={hint.id}>
-          {hint.text}
-        </div>
-      )}
       <Field
         className="usa-select"
         id={id}
@@ -43,7 +30,6 @@ export const DropdownField = ({
 type Props = {
   id: string;
   label: string;
-  required: boolean;
   name: string;
   options: DropdownOptions[];
   hint?: FieldHint;

src/app/components/layout/Browse.tsx

@@ -8,14 +8,17 @@ import {
   FilterModal,
   InstitutionContext,
   Spinner,
+  USWDSForm,
 } from "../../components";
 // utils
+import { filterInstitutions } from "../../utils/filtering";
 import { College } from "../../types";
 // icons
 import arrow_upward from "../../assets/icons/arrow_upward.svg";
 
 export const Browse = () => {
-  const { filteredInstitutions } = useContext(InstitutionContext);
+  const { filteredInstitutions, institutionsArray, setFilteredInstitutions } =
+    useContext(InstitutionContext);
   const [scrollPosition, setScrollPosition] = useState<boolean>(false);
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
@@ -31,6 +34,19 @@ export const Browse = () => {
     setIsModalVisible(true);
   };
 
+  const closeModal = () => {
+    setIsModalVisible(false);
+  };
+
+  const applyFilters = async (filters: any) => {
+    const filteredInstitutions = filterInstitutions(
+      institutionsArray!,
+      filters,
+    );
+    setFilteredInstitutions(filteredInstitutions);
+    closeModal();
+  };
+
   if (!filteredInstitutions) return <Spinner />;
   return (
     <>
@@ -45,9 +61,9 @@ export const Browse = () => {
           </Button>
         </div>
       )}
-      {isModalVisible && (
-        <FilterModal closeHandler={() => setIsModalVisible(false)} />
-      )}
+      <USWDSForm initialValues={{}} submit={applyFilters}>
+        {isModalVisible && <FilterModal closeHandler={closeModal} />}
+      </USWDSForm>
       {filteredInstitutions?.length > 0 ? (
         <ul className="usa-card-group">
           {filteredInstitutions.map((school: College) => (