Context
Problem
Outcome
Project Type
schoolhouse.world | Internship project
Role
Lead Product Designer
Skills
Visual Design, Iconography, Interaction Design, Product Thinking, Wireframing, Prototyping
Team
1 Product Manager, 2 Engineers
Timeline
4 weeks
With the engineers and product manager, we started by interviewing teachers at Khan World School to understand what was important when checking up on the test-taking progress of their students. These were some of our key insights:
Insight #1
Insight #2
Insight #3
We knew each class would have around 30 students taking 10 unit tests. I began by exploring different visualization methods we could use to correlate students and unit tests.
After getting feedback from the project team, I learned that teachers want to quickly scan and see how everyone in their class is doing. We chose to proceed with a third visualization method.
A circa-1940 Shippensburg High gradebook. From Pinterest.
The direction we chose because it mirrors real-life gradebooks!
KWS used 4 statuses to describe student test-taking progress – not started, in review, certified, or rejected. To begin, I braindumped a LOT of potential options for our progress table.
As a team, we discussed what we liked and didn’t like and I used the feedback to prototype a table that was refined enough to show to KWS teachers and get feedback.
I added a background around the icon so there was more contrast between statuses. However, I left the not started state without a background to minimize visual clutter and because it was the default state for every student.
For even more contrast, I added colour to every cell. This also filled in the white space on the table, so that the table moved into the foreground rather than blending in with the background.
I used square icons because the straight edges aligned with the rigid rows and columns of the table. However, I rounded the corners 4px so that the icon was consistent with our playful tone.
Lastly, I printed the unit names horizontally, rather than vertically. Although this meant that many unit names had to be truncated, it was easier for teachers to read. Vertical text might work for a physical gradebook because teachers can rotate their books in physical space, but that’s not really possible in the digital space. The vertical text would also be very difficult for engineers to develop.
I also curated an icon set for the progress table. The Schoolhouse design system used icons from Font Awesome, so I had to decide which of their icons could be used to represent each of the 4 statuses – not started, complete, in review and rejected.
The project team met with ~5 KWS teachers over Zoom. During the meeting, I walked them through the prototype and asked them about their overall opinions on the direction we were taking. Feedback was generally positive:
The table provided just enough high-level information for the teachers to quickly scan and see how everyone in their class was doing
It’s great that the table links to detailed individual student reports so the teachers have details to diagnose areas of concern
Teachers wished the “course test” had its own column at the beginning of the table. Contrary to my assumption, passing a course test did not mean students were successful at completing the course.
In the final visualization, I moved the legend to the bottom of the page, where it would remain fixed upon scroll. I felt hierarchically, the legend was not a priority on this page.
I had to work with engineers to get our scrolling behaviour just right. As teachers scrolled vertically, the row header should remain fixed. As teachers scrolled horizontally, the column header should remain fixed. The legend will always remain fixed upon scroll. Again, these decisions were made so teachers could quickly scan and interpret conclusions about their class with ease.
At one point in this project, I didn’t feel comfortable sharing my work with team members because I felt like I hadn’t made any decisions and was still exploring options. Upon sharing however, I received very valuable and directional feedback.
At one point in this project, I didn’t feel comfortable sharing my work with team members because I felt like I hadn’t made any decisions and was still exploring options. Upon sharing however, I received very valuable and directional feedback.