GRADING MADE EASIER
Simply and Quickly Grade Tests, Quizes, Essays and Papers
About
- Instructure is a leading provider of eLearning software for grades K-20. Their goal is to help teachers innovate and students succeed. They designed Canvas, their Flagship LMS, to empower teachers and engage students. Canvas makes education more efficient, effective, and all-around awesome for everyone. Portfolium, a division of Canvas, recently approached me with a design "challenge" to create a feature where teachers can quickly grade assignments and quizzes online. I conceptualized and designed this new grading module using results from user research and user testing following a LEAN UX model.
Client
- Instructure
INDUSTRY
- Education
YEAR
- 2019
ROLE
- Product Designer
RESPONSIBILITIES
- Needs Assessments
- User Research
- User Testing
- Wireframing
- Prototyping
- Visual Design
The Challenge
Design a simple grading application for teachers.
The Problem:
Teachers are spending too much time grading assignments and quizzes. They need a way to grade faster and provide meaningful feedback to their students.
Requirements
Instructure had a list of predetemined requirements:
- Teachers need to quickly view and grade student assignment submissions.
- This tool needs to accommodate a variety of submission types (documents, quizzes, essays).
- Teachers should be able to annotate or 'mark-up’ student submissions.
- Teachers should be able to provide comments to students about their submissions.
- Teachers need to be able to Grade quizzes 'one question at a time'. For example: if you had a class of 30 students that took a quiz, you would be able to grade question 1 for all students before moving on to question 2
- Teachers also need to be able to grade a quiz 'one student at a time'. For example: you would grade the entire quiz for a single student 1 before moving on to student 2.
In addition to the requirements from Instructure, I conducted informal research by interviewing local teachers.
Interviewees
- Joe S.
- Math Teacher - West Hills High School, Santee CA
- "Pre-checks would save me a ton of time."
- Krissy H.
- 2nd Grade Teacher - Hillcreek Elementary, Santee CA
- "Having saved comments to reuse would be a huge time-saver."
- James G.
- 8th Grade English Teacher, La Mesa School District CA
- "I would like the stylus capabilities to grade on mytablet."
Additional requirements from interviews:
- Ability to scan the document and do some preliminary checks for spelling and grammar errors.
- Have a “bank” of positive and negative responses to quickly choose from.
- Have the capability of using my stylus on my tablet.
- Have online quizzes pre-graded for repetitive questions that are not subjective grading. Like multiple choice, multiple answer, true/false, etc.
User Stories
Next, to better understand the user's needs, I transformed the requirements into more defined user stories targeting a specific persona.
As a 4th Grade Teacher...
- I would like to be able to grade scanned documents like pdfs, word docs with the ability to ‘markup’ the document and leave comments, so that I wouldn’t have to print and physically write on papers.
- I would like to be able to grade online quizzes one student at a time, so that I can focus on each student’s quiz.
- I would like to be able to scan and mark the uploaded documents for spelling and grammar errors, so that I wouldn’t have to focus on common errors.
- I would like to have a “bank” of positive and negative responses, so that I won’t have to write the same response repeatedly.
- I would like to be able to grade online quizzes one question at a time, so that I can quickly grade the same question and answer key.
- I would like to be able to have the capability of grading on a tablet, so that I can use a stylus and take it anywhere.
- I would like to be able to grade papers based on an online custom rubric, so that I don’t have to refer to a paper copy.
- I would like to have online quizzes pre-graded for multiple choice, multiple answer, true/false questions, so that I won’t need to.
Sketches
I like to flush-out ideas by quickly sketching rough wireframes. I typically always sketch in the beginning stages of design, because when I am presented with a new problem, I immediately create visual models. These quick sketches help rid me of these initial assumptions, and they cost me little in time, as well as being too invested in any one idea.
Lo-Fi Wireframes & User Flows
After sketching multiple design options and reviewing with stakeholders, we determined a design direction to build from. I created low-fidelity wireframes and user flows in Adobe XD based on the designs.
Prototyping & Testing
Once wireframes and user flows are completed, I turned the wireframes into a working prototype. Maintaining the designs as lo-fi helps to validate the user flows and test usability. I tested the prototype with users and gathered feedback. I iterated this process and cycled through test-fix-test until we determined readiness.
Some notes from user feedback:
- How do I get back to the assignments page?
- The save button and exit button are confusing.
- Why are there two save buttons? Do they do the same thing?
- After finishing grading, I would like to see the results.
Add Visual Design Details
After fixing issues that arose during user testing and finalizing the lo-fi prototype, I added a splash of color and branding. I mimicked Portfolium's actual color scheme, typography, iconography, and UI elements to show brand continuity.
Showcase
Grade Essays
Prototype for grading uploaded pdfs and word docs.
Grade Online Quiz per Question
Prototype for grading quizzes one question at a time.
Grade Online Quiz per Student
Prototype for grading quizzes one student at a time.
