Assessment List Page

Figma Link

User Story

As an internal employee at RethinkEd, I need to see and search the full list of Integrated Assessments so that I can determine when to Add New Assessments or edit existing ones.

UI Description: Assessment List Page

  1. Search Bar:

    • Description: Search bar is a smart search where user searches for existing Assessment by typing the assessment name or Company that made the assessment.

    • Required: Yes

    • Type of Input: Search

    • Validation Criteria:

      • Without Search selected, user sees alphabetical ordered list by Assessment Name.

      • Given the Assessment Name contains multiple entries, then the secondary criteria for determining alphabetical order is Company Name followed by Subject as the tertiary criteria

      • Given user has typed a minimum of 3 characters for either the Assessment name or Company Name, the search results begin to populate in the list shown.

  2. Add Assessment Button

    • Description: A button that opens the Add Assessment Modal where user enters the information for the new Assessment

    • Required: Yes, in order to Add a new assessment

    • Type of Input: Button

    • Validation Criteria:

      • If selected, then Add Assessment Modal opens for User.

      • If not selected, then button is present on screen and active

  3. Company Sorting Selector

    • Description: A dropdown containing an alphabetical list of Companies with at least one integration for at least one subject area

    • Required: Yes

    • Type of Input: Dropdown

    • Validation Criteria:

      • If selected, then list within the dropdown shows an alphabetical list of Companies with at least one integration

      • If a company is selected from the dropdown, then the Assessment list shows all of the integrations for that company

  4. Subject Sorting Selector

    • Description: A drop down containing the following Subject options: Attendance, Behavior, ELA, Math

    • Required: Yes

    • Type of Input: Dropdown

    • Validation Criteria:

      • If selected, then the list shows the following in alphabetical order: Attendance, Behavior, ELA, Math

      • If a selection is made from the drop down by clicking on it, then the Assessment List table will include all integrations for that subject in alphabetical order by Assessment Name as primary criteria and Company as secondary criteria

  5. Table Contents

    • Description: List of Assessments with headers: Assessment Name, Company, Subject, Description.

      • Given User hovers over a line in the table, we show the line colored gray

      • User clicks on a highlighted line within the chart to view Edit Assessment Modal

      • Description is an optional field in Add/Edit Assessment modal so if it was not used we show three dashes (---)

    • Required: Yes

    • Type of Input:

      • Chart; contents from Add/Edit Assessment Modal

      • User clicks on element (row) within the chart to Edit Assessment Modal

    • Validation Criteria:

      • If just viewing chart, we see the headings: Assessment Name, Company, Subject, Description.

      • If just viewing the chart, the contents below are listed in alphabetical order by Assessment Name as the primary criteria, Company as the secondary criteria and Subject as the tertiary criteria. If all other criteria for alphabetical order are equal, then Description is the tie breaker as the alphabetical order of the letters typed as the deciding factor and items with no description are at the bottom of the list.

      • If User clicks on a highlighted line, then the Edit Assessment Modal opens for that item.

 

User Interaction and Validation Notes: Assessment List Page

  1. Search Bar

    • Text entry minimum of 3 characters with smart search returning within 2 seconds matches for Assessment Name or Company Name

  2. Add Assessment Button

    • User clicks on Add Assessment Button to open the Add Assessment modal

  3. Company Sorting Selector

    • User clicks on down arrow to open dropdown and views Company list

    • Company list is in alphabetical order

    • User selects choice from dropdown by clicking on it

    • Given User selects a choice from the dropdown, the chart view shows the results of the selection for the Company Name

    • Given there are multiple Assessments for the Company Name selected in the dropdown, then we show the Assessment Names in alphabetical order.

    • Given there are Assessments with the same name and same company, then we use the Subject as the alphabetical order criteria

  4. Subject Sorting Selector

    • User clicks on down arrow to open dropdown and views Subject list

    • Subject list is in alphabetical order: Attendance, Behavior, ELA, Math

    • User selects choice from dropdown by clicking on it

    • Given User selects a choice from the dropdown, the chart view shows the results of the selection for the Subject chosen

    • Given there are multiple Assessments for the Subject selected in the dropdown, then we show the Assessment Names for that Subject in alphabetical order

    • Given there are Assessments with the same name for the subject selected, then we use Company as the criteria for the alphabetical order list

  5. Table Contents

    • Hovering over lines in the table will show a gray highlight indication it is available for selection

    • If user clicks anywhere on the gray highlighted line, then we open the Edit Assessment Modal

 

Workflow Description / Options

  1. View Assessment List in Default State

    • User views Assessment list shown in alphabetical order by Assessment Name

  2. Search by Assessment Name and/or Company

    • User searches for particular assessment by typing a minimum of 3 characters in search bar and views returns for both Assessment Name and Company

  3. Sort by Company and/or Sort by Subject

    • User clicks on sorting options for company and / or Subject to see a more focused

  4. Add a New Integrated Assessment

    • User clicks on Add Assessment button to open the Add Assessment modal

  5. Edit an existing Integrated Assessment

    • User hovers over a line in the chart and clicks anywhere on the gray line to open the Edit Assessment Modal for the selected Integration.