Project Sketches

After the prototyping activities in class, I liked one sketch for visualizing student progress in a course, and developed mid-fidelity mockups for this visualization.

Overview

The main audience for this visualization would be teachers using standards-based grading systems. For now, it would mainly be used by myself, but the hope is that I could generalize this for other teachers to use as well. At first glance, I can see the overall mastery of each standard for a specific student in a specific course.

Overview of the visualization that includes color-coded standards; the name of the course and current student are displayed above. Help and about links are at the bottom right corner.

Tasks

Below are examples of how a teacher could interact with the visualization to perform some tasks.

Get Information About a Standard

Upon hovering over a standard, the teacher will be able to see more information, such as what the standard code represents.

A cursor hovers over P5, revealing a tooltip that states "P5. Python Basics. Initialize and use variables."

View Another Student

A dropdown menu allows the teacher to see the overview for another student.

A cursor hovers over a dropdown menu that has Student B selected; the color of each standard has changed to reflect the chosen student.

Pan and Zoom

By dragging and scrolling on the screen, the teacher can zoom in on specific domains and standards.

The Python domain has been enlarged and is now centered on the screen.

View Another Course

A dropdown menu allows the teacher to see the overview for another course.

A cursor hovers over a dropdown menu that has "Programming in Java" selected.