Classroom test builder
OVERVIEW
One of our state clients needed a way for teachers to build tests using premade test questions, assign them to groups of students, and score the results afterwards. These tests were to help teachers focus on certain content areas that showed up in yearly testing.
SOLUTION
A new section of our Administration site was built out to accommodate the creation and assigning of tests. This area allowed them to create custom groups of students, assign them one or more tests, and view the results all in one location.
ROLES
UX/UI design
Iconography
SCOPE
– Desktop
– Mouse/keyboard
PLANNING & SKETCHING
![Sketch_passage selection 2](https://www.mdoesthings.com/wp-content/uploads/2022/02/Sketch_passage-selection-2.png)
These are a few of the many sketches that show my thought process as I work through various issues in a design. These ones in particular show being able to select a passage (a short story or excerpt that student’s read and answer questions on).
![Sketch_passage selection](https://www.mdoesthings.com/wp-content/uploads/2022/02/Sketch_passage-selection.png)
The final design
CREATED TEST PAGE
This is the page is a one stop shop where users can see a page they’ve created (as well as edit, add in tools, and assign to a new group of students). They can see each assignment of the test, where the student is at with it, and what their score is.
![Manage Tests_v3_View Test 3 cards depicting various school personas](https://www.mdoesthings.com/wp-content/uploads/2022/02/Manage-Tests_v3_View-Test.png)
MANAGING TEST GROUPS
A teacher can see all of the groups that are auto generated for them (like groups by grade level, or classes they’ve been assigned), as well as create custom groups of students.
![CAB_Manage groups](https://www.mdoesthings.com/wp-content/uploads/2022/02/CAB_Manage-groups.png)
CREATING A NEW TEST
These images show the process of creating a new test, from finding test questions to reviewing them and creating answer keys. Each test question aligns with a standard that the teacher needs to cover in their class.
![Manage Tests_v3_View Test_items editable 3 cards depicting various school personas](https://www.mdoesthings.com/wp-content/uploads/2022/02/Manage-Tests_v3_View-Test_items-editable.png)
The test overview page.
![Create New Test_v3_preview item_answer disabled](https://www.mdoesthings.com/wp-content/uploads/2022/02/Create-New-Test_v3_preview-item_answer-disabled.png)
Previewing an item (test question) on a test.
![Create New Test_v3_add items_browse_items](https://www.mdoesthings.com/wp-content/uploads/2022/02/Create-New-Test_v3_add-items_browse_items.png)
The modal for adding new test questions from the item bank.
![Create New Test_v3_add items_filters](https://www.mdoesthings.com/wp-content/uploads/2022/02/Create-New-Test_v3_add-items_filters.png)
All of the various filter states for the add item modal.
MOCKUP SITE MAP
Using Adobe XD, most of these mockups were strung together into a clickthrough preview.
![CAB prototype](https://www.mdoesthings.com/wp-content/uploads/2022/02/CAB-prototype.png)