SEL Self-Assessment
- Mary DelPiano
Overview
The SEL Self-Assessment interface is being revamped to create a more inviting student user experience. The SEL Self-Assessment interface is designed to deliver a 45-question assessment, with features to enhance accessibility and usability for students, such as text to speech and Spanish translations.
User Story
As a student, I want to complete the SEL self-assessment with clear progress tracking, the ability to have questions read aloud in English or Spanish, and the option to navigate through questions easily, so I can effectively reflect on my Social and Emotional skills.
Figma
Epic
Epic 193777: Student Center
UI Description
Question Card:
A question card in the center displays one assessment question at a time.
Each question card shows the question number (e.g., 4/45) and a progress bar below the question card, filling incrementally as questions are completed.
The card includes the question prompt and multiple-choice answer options.
A clickable button for language toggle:
"Cambiar al español" button when English is shown on the question card.
“Change to English” button when Spanish is shown on the question card.
A volume icon for text-to-speech functionality accompanies each question https://rethinkautism.atlassian.net/l/cp/ug3j6X0T .
Answer Selection:
Answer choices are listed on the card.
Answer Choice Selections: Strongly Disagree, Disagree, Neutral, Agree, Strongly Agree
Selected answer choice is highlighted in orange-yellow to indicate selection.
Navigation:
Back and forward arrow buttons are included for question navigation.
Sidebar Layout
The sidebar includes a back navigation link to the assignments page and the Self-Assessment title.
A sidebar with an option to collapse allows for a more focused view of the question card.
User Interaction and Validation Notes
Answer Selection:
Upon clicking an answer choice, it should immediately change to orange-yellow to visually confirm the selection.
The selected answer should be saved even when navigating between questions.
Language and Accessibility:
The language toggle button should switch the language of the question and answer choices between English and Spanish.
Text-to-speech should activate upon clicking the volume icon and read the question in the set language.
Navigation:
Students must be able to move back and forth between questions using the arrows without losing selected answers.
Progress bar should update in real-time as each question is answered.
Validation:
Ensure language toggle changes all text on the card and activates the correct text-to-speech language.
Verify that the progress bar accurately represents the number of questions completed.
Test navigation buttons for functionality and ensure they save the current state of the assessment.
Workflow Description
Beginning the Assessment:
The student starts the assessment, sees the first question e.g., 1/45, and the progress bar indicates the start (0%, empty bar).
Engaging with Questions:
The student reads and selects an answer. If needed, they toggle the language or activate text-to-speech by clicking on the icon.
The progress bar fills as each question is answered. The current question number is displayed.
Navigation Through Assessment:
The student navigates the assessment using back and forward arrow buttons, with the option to change answers to previous questions.
Assessment Completion:
After answering the last question, the student is presented with an end-of-assessment message, “Great Job! You’re all done!” with a Finish button that navigates the user back to the assignments page of the student center.