Student Roster — Design Thinking

Published in

Design Ideas/Thoughts

4 min readJan 12, 2018

Background

On Whooo’s Reading’s Student Roster, teachers can do a variety of tasks, such as, editing student or class information/settings, logging reading (for students), sending notes/coins (to students), adding/uploading students, adding classes, and retrieving student login information.

Previously, these actions were all on separate pages and the links (for these actions) were spread between the home and settings pages.

This needed to change for a few reasons:

Spread out. Since tasks were spread out over a number of pages, to log student reading, add new students, and send a note, a teacher would go to three different pages (via different links). Already crunched for time, teachers were losing time on the site.
Unclear navigation. Navigationally, the groupings of the different actions didn’t seem to have much of a connection; making it hard to know where to go. There were categories for Students, Classes, and Editing Information (both for students and classes). Additionally, a few tasks were placed in a sidebar by themselves (as Quick Links). The groupings were confusing even for regular users of the site.
Lack of batch functionality. Some of the actions were rigid in that they could only be performed for all students or one individually.
A common scenario: A teacher wanted to award 5 students from two of their classes with 50 points for their reading from the previous night. Without support for batch processing (taking action on/for numerous students at once), they had to do all the work manually (award each student the coins separately) and were losing even more precious time.

Challenge

Create one place where teachers could perform any of these tasks. Additionally, enable teachers to perform these tasks on behalf of multiple students-easily, all at once, and across different classes.

Design Thinking

Some of the inspiration for the design came from Class Dojo, a highly popular classroom-management tool that is fun, elegant, and easy to use. Their first screen is a list of the teacher’s classes (on little cards). On this page, you can do two things: add more classes and change class-settings for individual classes.

The Class Card brings you to it’s Students Page, where you can select (any or all) students and take a variety of the actions (from their toolbar). Additionally, clicking on a student card brings up the student information and settings which can be changed.

We took a similar approach to Class Dojo’s but with a few important twists.

Similarities to Class Dojo

Students can be selected and batched for different actions.
The batch-able actions are on a toolbar and clicking on an action brings down an interface with the relevant forms and details.
Clicking on a student brings up their information for viewing and editing.

How We Differed and Why

Class Dojo has the students of each class nested within that class; to get to a student, you first click on the class and then the student. We wanted all of a teacher’s students (across different classes) accessible simultaneously.
While Class Dojo has editing student information tucked away, we made it so that clicking on a student card brings up their account information-a more intuitive and easier way to access the information.
To select multiple students on Class Dojo, you first click “select multiple’ on their toolbar, which then allows you to select multiple students. We wanted to keep it simple; select a student by clicking on them. Selecting a student without triggering the information modal, was a little tricky. To do this, we added a checkbox on the right corner of each student card-that would be clickable without triggering the information modal.