Uh oh, spaghettios!
Making the grade - Preview Image

Making the grade

Building a better gradebook

One of the cornerstones of an LMS (Learning Management System) is its gradebook. This module sends grades out to students, and can either be a pain in the instructors side, or a component that makes their lives easier.

The gradebook in the SOLE LMS had become dated and needed a serious refresh on both the front end interface and back end code. Additionally, there are numerous new additions being implemented that become much more powerful when tied to the gradebook itself. New in browser annotations will allow students and instructors to interact more freely with assignment submissions. Notifications which can be seen in SOLE, through email, or SMS will alert students when assignments are due, and grades are posted. It will also allow instructors to know when assignments are ready to be graded. The integration of each piece of technology into this new gradebook has led to an incredible update that should be very exciting for all users.

For the layout of the gradebook itself we started with SlickGrid (https://github.com/mleibman/SlickGrid) which provided an excellent option for tabular data with fixed rows and columns. Previously the gradebook was just a basic table with some horizontal scrolling. It turned what should be a simple task of reviewing students and their grades a burden. Long rows with numerous cells made losing your place a common issue. Aside from repairing the grid itself, the goal for the interface was to condense mystery meat buttons and reporting into constructive and obvious areas rather than displaying them with the gradebook. I broke each of these areas into 3 basic zones of Create, Reports, and Settings. There were other options tied to assignments themselves, and those were added to the gradebook tabular data itself in drop downs for each assignment header. Working through all of this led to a new gradebook layout that now devotes nearly 100% of the real estate to the grades themselves. Have a look at the old layout compared to the new.

The second core goal was to develop a new grading solution for instructors so they could actually interact with student submissions. In the past we only offered a quick grader which was simply a list of students with fields to input grades. This didn't provide any real option for viewing student submissions within the LMS. Considering each assignment can have the base assignment, discussions, and file attachments, we needed a new solution that would let instructors work with all of this within the LMS. After doing some homework and reviewing solutions other LMS's had worked on, I developed an interface for an internal detailed grader that can be launched from the gradebook. Many other LMS's have similar solutions but their interfaces are quite scattered and breakdown in complex scenarios. Student information in one zone, their files and grading options in another, the submit button often hidden or not obvious. Ultimately, I didn't feel like anyone was doing it very well.

I spent quite a bit of time sketching wireframes trying to make the best use of the space. Primarily, my goal was to have the majority of the screen space devoted to assignment submissions. Many students submit word documents so I wanted to ensure an 8x11 word document would be easily visible. Additionally, students can submit just about any type of file. Power point, Excel, images, PDF's, and if any file is not recognized or viewable in the browser, they can be downloaded and reviewed. A goal in development of this new grading was to allow for in browser annotations. Our team reviewed a few annotation solutions and Croc-A-Doc was hands down the best option available. With Croc-A-Doc instructors can add notes to these attachments and upload them for the students to review directly from within our LMS. This is something we really think can speed up the grading process, as well as the interactivity between students and instructors. With a majority of the space devoted to assignment interaction, there still needed to be space to review, download, and upload files. Instructors also need to grade the assignments, leave comments, and select any student in the course and review their submissions. The solution here was to create a space that would be easy for users to find, and interact from. While the assignment is the most important piece, the ability to work through each student and assignment is crucial to ensuring it all works fluidly. To achieve this I designed an admin interface which maintained proximity to the assignment itself, but also creates its own uniform connectedness so instructors can quickly digest all of the available information for each student and their assignment. The final product is something I believe will allow for a simple and effective grading option for our instructors.

In addition to these two paramount aspects of the SOLE gradebook, we have various other views. Students now have a much cleaner space to review their grades, as well as a much better interface to add and review their assignment submissions. There are also great new options for gradebook reporting, and the settings themselves. In addition to all of these new interface options we are also implementing push notifications that will allow our students to know when grades are available, and our instructors to know when items need graded. These notifications can be received within SOLE, through email, or to their mobile devices via SMS messages.

Making the grade - Preview Image

Overall, the new workflow between students and instructors is something I am really excited about. I believe it will make receiving and reviewing gradebook information easier than ever, which will allow for all of our users to spend more time focusing on their education.