Problem to Solve
Users wanted a faster and easier workflow to grade student’s assignments
Users had to go back and forth over the screen to get to the different functions such as settings, grade book and actually grading the assignment
The workflow to get back to course navigation back in Canvas involved a lot of clicks and leaving SpeedGrader
SpeedGrader didn’t use current Canvas components
Unnecessary buttons within settings which added a lot of clicks for the user
Old Design
Work Flow
I was put on this project after previous teams had come up with some ideas. I took those ideas and elaborated, revised and came up with new ideas to implement.
In my initial design, I had two different tabs for grading. One tab was called Grading where the submission, overall grade and assignment comments would go. The other tab was Rubric where the assignment rubric would be.
I took some of the stats from the old design, thinking that users might want to still have those just because they are used to having them. I placed them on this header nav bar in the right corner so they were farther away from where the user is clicking.
After talking with the PM and other designers who have previously done user testing on SpeedGrader, I discovered that users don’t look at the stats while grading. The user usually looks up stats in Analytics which is a different section in Canvas.
During this process, I was very passionate about what the user wanted and what I thought a teacher might want within SpeedGrader because I have a background in education. I thought this was something users would want and advocated for that. After the third design with the stats, I heard what the previous user testing had concluded and decided to leave it out and see how having no stats would test.
In the first go-around I condensed space and put the annotation tools with the doc viewer, eliminating a need for a third nav bar.
I kept the submission dropdown and download link in the Grade tab, trying to keep all the assignment details in one place. The user is also familiar with the submission and download link being where the overall grade is.
In the old design, the settings were presented as icon buttons in the upper left corner. Once you clicked on those settings, a modal would popup where you could take more actions to apply settings.
To eliminate clicks and confusion, I decided to have two tabs, one for overall settings and the other for help. The problem I was trying to solve overall was “what settings are useful and being used” and “can we eliminate or condense some of these settings?” These questions were solved in the final design.
The courses tab is one of the more significant changes I made. I had a lot of empathy for the user having to click away from SpeedGrader to change courses and assignments and then go back into SpeedGrader from that new assignment.
To solve this, I added the tab within SpeedGrader where users will be able to navigate to a different course and assignment within that course, without ever leaving SpeedGrader. This eliminated at least 5 clicks for the user and made the workflow faster and simpler.
Rubric
In this version of the rubric re-design, I had the label and description in one button. I felt this design resulted in a lot of scrolling and needed a solution to condense the text.
This design was to show what a button might look like with words instead of numbers. Teachers can input words into the rubric rather than having a number. I made the boxes responsive, based on content and made the description appear over hover. I felt like this design would be overwhelming for users with cognitive disabilities.
I moved the overall grade into the rubric tab, so the instructor could see this while using the rubric. The description appears over hover and stays once a number is selected. This was also overwhelming and unnecessary.
The user needed a way to input a partial grade if desired, so I added a text input at the end of the grade buttons.
Final Design
Grade Tab: I combined the rubric and grade tab into one grade tab so everything would be in one place for easy and quick grading. I moved the submission select to the doc viewer (not shown) because it is rarely used and didn’t need to be visible at all times.
The courses tab is kept from my first design. This is a significant change because it eliminates a lot of clicks for the user. The user can easily choose another course and/or assignment within SpeedGrader without leaving the page.
The help tab is the only “settings” tab. This condensed three settings buttons into one. Within the help tab are frequently asked questions along with keyboard shortcuts. The other settings such as muting/unmuting and assignment and turning on blind grading are unnecessary or set in another part of canvas, when creating the assignment.
I expanded the header navigation across the entire page so the student drop down menu was on the left where the rest of the actions take place. This keeps the user in one area of the page for quick grading.
The annotation tools are moved to the left side instead of the top to keep it easy to reach from the grading tab.
The only non actionable piece of information is the amount of submissions that are ungraded. I put these in the upper right hand corner to view easily but be out of the way of the grading process. This is a feature most users wanted within SpeedGrader.
The rubric icon button triggers a full rubric pop-out users can drag around the page. This is so the users can view the full rubric and all descriptions while using the rubric.
The comment icon button is for instructors to make comments on that specific standard if desired.
The final rubric has the overall standard description placed above the buttons. The user can hover over each rating to see the rating description and click to select it or input a number value in the text box.