GRADER APP

UX/UI & VISUAL DESIGN FOR WEB APP




THE CHALLENGE

As a personal project, I took on the following challenge. Teachers have many responsibilities and too little time in a day to get things done. They create lesson plans, teach classes, grade assignments, and need to be available to support students individually. How do you help them get things done more efficiently? How can they spend less time on administrative tasks?



DISCOVERY

I surveyed a number of teachers about their work experiences. I identified some common concerns:

  • They have limited time to provide enough feedback
  • They worry about missing opportunities to engage with students
  • They want to connect with students who miss due dates or are struggling
  • Grading is one of the most time consuming parts of their day



THE SOLUTION

A grading web app where teachers can efficiently:

  • Create assignments and quizzes
  • Grade assignments and quizzes
  • View which students are missing assignments
  • Message students



DOCUMENTS

I started with the information architecture and main task flows. The first feature I focused on was grading an assignment.

Information architecture (left), Task flow - Grading an assignment (right)



WIREFRAMES

Next I created wireframes and iterated.

Dashboard (left), Class - Assignments List (right)

Assignment - Grade View (left), Grader App (right)



PROTOTYPES

I created prototypes using InVision, tested and made improvements.

Dashboard (left), Assignment - Grade View (right)

Grader App (left), Grader App - Assigning Grade (right)

Grader App - Assignment Graded (left), Assignment - Grade View Updated (right)