The Challenge
Design a simple grading application for middle school teachers.
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:
- 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.
Research
A Teacher’s Blog
Link: https://www.sammichespsychmeds.com/why-it-takes-teachers-so-long-to-grade-work/
My observations:
- Grading takes a LONG time. 13 hrs ~ for a single day collected, 5 classes.
- Inputting grades also take 1-2 mins per assignment.
- Teacher tries to slip in grading in between classes / meetings
- Most teachers can only find time grading after-work hours where family responsibilities need to be attended to
- When grading work piles up, pressure is high and it is not a good feeling
RESEARCH
User Reviews on Blackboard
With no access to Canvas and Blackboard, I relied solely on the Appstore reviews on Blackboard. There’s definitely a few outspoken individuals that want to make their voices heard!
I continued to search around on for markup examples:
My research reveals:
- Writing markups on paper is usually in red.
- A comment always accompany with an annotation
- Annotations are usually
- Strike-cross
- Arrows
- Underline
- Double underline
- Bracket
- Circle
- The comment could get really long and often runs of out space
For markup tools, I decided that we didn’t need to reinvent the wheel. Apple’s markup tool has already set a good standard and highly likely that it is familiar with most users.
User Flow
Link: https://www.figma.com/file/eWXVodapR53NsTFdnefuTh/Canvas-Design-Challenge-User-FLow?node-id=0%3A1
With enough research, I feel I have gained enough insights on how to design an experience for teachers to grade quicker.
So I started with a user flow, highlighting each single click/tap along the grading experience.
I chose to design in Mobile because I think layout can scale upward for larger screens. Also, teachers always try to slip in grading whenever they can. They shouldn’t be limited to grading on desktop only.
DESIGN
Key Experiences
From the user flow I identified several Key Experiences that will makes up the Grading Process.
- Main Dashboard
- Assignment Dash
- Submission Details
- Docs Attachments
- Short / Long Answers
- Grading
1. Main Dashboard
- Because grading session often gets interrupted and happens sporadically during the day. It will be important for teachers to resume their previous grading session quickly. Few other notes:
- add functionality to display progress completion
- add encouraging progress verbiage to motivate teachers
- add estimated time remaining to complete the assignment grading – allows teachers to plan their day accordingly after work hours
- With only a few high level navs option, it’s simpler to use bottom nav tabs for quicker access to other menus.
2. Assignment Dashboard
- Borrowing the infographic from Blackboard’s page – the graph gives a quick glance on assignment grades and few simple stats (submissions, and scores)
- A larger surfaced CTA to remind teachers what the next step is for this assignment. (To continue grading)
- The bottom portion is the list of students and their assignment status – hidden in the accordion menus.
3. Submission Details
- To quickly access other students’s submission. A row of student’s Initials are presented at the top
- The content contains instructions, student’s response and student’s attachments to the assignment.
- At the very bottom, the Assign Grades button is for teachers to quickly grade. For this type of assignment (essay), grading takes form in a rubrics.
4. Attachments
- The top title, once tap, presents the list of attachments the students uploaded. This allow quick access to other attachments.
- In the doc section, teacher could scroll, zoom with 2 fingers to accommodate the annotation tool.
- Drawing inspiration from Apple’s markup tool, the simplified version presents a undo / redo button, a red markup pencil, an eraser and a text selection tool.
- More details in the interaction on how to annotate / comment in the tap prototype
5. Submissions (Short/Long Answers)
- The top row of student initials allows teacher to quickly select other students.
- There sub option menu presents an option to switch to “Grade By Questions” which grades assignment by Questions rather than by Students.
- The short / long answer are presented in the middle, one question at a time. This is meant to replicate Quiz games where player picks quick selection to move on.
- Quick scoring buttons [-1] [Perfect] [+1] are for teachers to grade scores quickly.
- Once a question is graded, teachers can swipe up or hit the Next Question button to reveal the next question.
6. Grading
- Grading is done via the submission detail screen. The grading menu slides up from the bottom.
- This is borrowing from Blackboard’s rubrics grading system
- Each category’s scoring metric is behind the accordion menu.
- Once all the categories are scored. The final grade is revealed.
PROTOTYPE
Figma Click Prototype
Next is to string up the screens together to better illustrate the entire experience.
Click Prototype
DESIGN
Hi-Fi Mockups
Then I applied some colors and theming to the screens.
DESIGN
Other Concepts Explored
Message Styled Student Submission View
- Could be an interesting take on submission where each response, attachment is a message.
- The teacher can reply directly in this view to provide personalized, meaningful feedback
- Chats from all students would be organized in a top level menu where teacher could search and find submissions.
Timer for grading short / long answers
- Could let teachers know how much time they’ve already spent on grading current assignment. A good metric to measure against other assignments.
- Provides estimates for similar type of assignments
- Could gamify this aspect with:
- Beat self fastest time
- Compete in leaderboards against other teachers
- Go meta with individual question stats
Universal Search
- From multiple reviews, teachers are asking for a way to search for something specific. Ie. student, assignment, attachments.. etc
- Putting the search functionality in the nav top level would provide quick access for teachers