When a student completes an online test, quiz or homework, they get to their scoresheet where they can view their grades.
The old scoresheet needed to be updated to match our new style guide as well as meet accessibility requirements.
This is the first iteration of the scoresheet. The idea was to create a question carousel so students and instructors could quickly see the scores at a glance, and give each question its own page.
Dusting off the Project
I began by looking the initial design we had proposed and iterating on it:
The first thing I did was update the visuals with our new color palette and icons, and business needs.
Will This Work for Younger Students?
One concern was whether or not the scoresheet was too complicated for younger students (such as 4th or 5th graders). All previous user testing we had done with the initial redesign was with college students.
User Testing Round 1
With the hypothesis that the scoresheet would be too complicated for younger grades, we did an initial user testing with our target users, k12 students and instructors, to see what they thought of this design:
Interactive Prototype: https://j546xj.axshare.com
“I like to see how…like what I got right, and if I got them wrong, how I got them wrong.”
– 4th Grader Student on being able to see the correct answer below each question
“It could just be one at a time with an arrow, they could just go from one question to the next, or … they could see them all. Just scroll down and go through all of them on one page, without having to go to the top and click on each one.”
-2nd Grade Instructor on the carousel question-navigation
“My students…I think after some exposure and after some practice with it, they would eventually get it. I think it would take them a while to get it. There’s a lot going on here. So I think it would be a little bit tricky for them to navigate.”
-5th Grade Instructor on if her students would find the scoresheet easy to use
Simplifying the Design
Overall, students in the user testing sessions liked the carousel navigation. But instructors were less enthusiastic, and felt that the questions should be a single-page scroll.
Here is another iteration of the scoresheet as a single page scroll. The idea was that younger students would find it easier to navigate.
User Testing Round 2
Now with another version, which we called the single-page scoresheet. We decided to conduct A/B testing with k12 instructors one more to see which design they preferred.
Interactive Prototype: https://fd0p83.axshare.com
“It’s more clear. Like, I don’t know if they’d get confused on the other one, but they’d have to look for it a little more. Where this one is easier to read.”
-5th Grade Instructor on the design of the single-page scoresheet
“I like it better. This is an at-a-glance page. So I can go straight to…number 2 of why did I get partial credit for 4 and 5.”
-6th Grade Instructor upon seeing scoresheet with carousel-navigation
“I like the fact that it’s all on one page. It’s all one document scrolling down…it’s all together, you don’t have to worry about clicking on different problems back and forth. And it kind of looks like a little report, so kind of helps.”
-3rd Grade Instructor on single-page scoresheet layout
Overall, instructors were split as to which design they prefer. Most instructors who taught 5 grade or higher preferred the carousel navigation while most who taught lower grades liked the single-page layout more.
Finalizing the Design
Based off feedback from user testing, we decided to use both designs. The carousel-navigation one would go towards assignments with long math problems and everything else would have the single-page design.
Accessibility was a big factor in the design. Below is a diagram detailing how a screen read should read out each region and heading:
The End Result
Below are the designs we developed after several iterations and rounds of user testing.
Interactive Prototype: https://xcmob3.axshare.com