Designing an adaptive literacy assessment for K-2 students
Role: Senior UX Designer
Users: Early readers - kindergarten to 2nd grade
Client: Houghton Mifflin Harcourt Learning Technology
Objective:
Re-design and update an adaptive literacy assessment that adjusts the assessment based on student's answers. Product and UX goal was to match the current design system and make enhancements as necessary for mobile-responsiveness and accessibility, including updated audio script corresponding to new interface.
Methods:
-
Heuristic analysis
-
Usability tests
Deliverable: Prototype using Figma
Original assessment - Demo of Phonological awareness assessment type
Audio auto-plays: “Fan. Ball. Man. Shoe. What word sounds like ‘fan’?”
“Man sounds like fan. I’ll click man and then click the arrow to go on.”
Audio auto-plays: "Click the arrow to go on."
Re-design
Enhancements made included:
-
Updated images using color
-
Horizontal line to separate the top (stem) image from the answer choices (distractors)
-
Navigation buttons were placed in consistent location and includes icon and text label for accessibility (such as a blind student)
-
Progress bar is added to top right to indicate student’s progress in completing assessment
-
Video controls added for accessibility for demo video/animation introduction of each assessment type (i.e. play/pause/replay) - added after usability test
-
Visuals added on transition screens between assessment types and on completion screen to provide positive feedback and reinforcement on completing items and assessment.
Design System
I created a new design system to standardize all components in assessment products such as buttons, header, and progress bar.
Phonological awareness assessment item
Audio auto-plays: What word sounds like “ring”? (Each image displays sequentially with audio.) Bus. Cat. Swing. Choose the word that sounds like “ring.”
As item is selected, audio of word is played.
Video Demo
All Videos
I worked closely with the audio-visual team to provide design and timing of interaction and reviewed video output to create video demo portion of assessment item.
Letter Recognition
Audio auto-plays: "Choose the letter you hear. W."
Letter size increases, becomes bold, and background changes to light blue color when selected to account for students who may be color blind to show selected state in multiple ways.
Word Recognition
Audio auto-plays: "Choose the word you hear. Bone."
Transition screen with visual of medal for positive feedback added to show completion of a section of assessment.
Audio auto-plays: "Nice work! Click the button for the next part."
Completion screen with visual of trophy added to provide sense of achievement.
Audio auto-plays: "Good Job! Press the Done button."