schoolhouse.world
Leading the end-to-end design of a new online teaching feature for teachers at Khan World School.
Role
Lead Designer
Timeline
4 weeks
Team
1 Product Manager, 2 Engineers
Schoolhouse.world is an ed-tech startup that builds teaching and learning tools. Khan World School (KWS) is a Khan Academy initiative and online school. The first KWS cohort launched in the 2022-23 school year.
KWS is fully remote and self-paced. Students learn course material and complete testing at their own pace. Teachers at KWS use Schoolhouse.world to facilitate online testing and support student progress.
Background
Teachers need to understand the needs of their class so they know who to support and how. However, learning at KWS is remote and self-paced. Each student in a course will progress differently, and teachers do not have visibility into this.
Problem
At any point in time, Student A could have completed four units in a course, Student B one unit, and Student C six units. However, at the next point in time, this could be completely different. KWS teachers do not have visibility into student progress.
I designed Classroom Tools for teachers at KWS, providing the infrastructure they need to support students in a remote and self-paced learning environment.
Create classrooms to manage students remotely between multiple courses
Use the course progress tracker for visibility into student progress per course
Use individual student reports for insight into supporting students who struggle more than others
Summary
We only had 4 weeks before the 2022-23 year began to design and build Classroom Tools. There were two engineers assigned to this project.
Constraints
Because of these constraints, it was important to keep the project team aligned and to prioritize our efforts early on.
Design process
My design process, weekly
Aligning the TeamScreenshots from the Figma file we used to ideate together
In our team alignment meeting, I shared the insights I compiled from the interview conducted with a KWS teacher.
Sharing insights
Insights compiled from an interview with a KWS teacher
We used wireframes to align on three feature requirements for the first version of Classrooms Tools. User research insights indicated that Course Progress Tracking would be the most valuable feature for teachers. Over the next three weeks, both design and engineering efforts were focused on Course Progress Tracking.
Prioritizing features
We would prioritize efforts around Course Progress Tracking
Early DesignIn the first concept, teachers use a dropdown to switch between unit pages. Each page contains student progress for the selected unit.
Course progress tracking concepts
First concept — Separate page per unit
In a different concept, units are grouped into accordions. Each accordion expands to reveal student progress for that unit.
Another concept — Separate accordion group per unit
After getting feedback from the project team, I learned that teachers want to see how everyone in their class was doing at-a-glance. I iterated to arrive at a final concept, where student progress for all units are in one table. Teachers don’t need to click around to view student progress between unit tests.
Final course progress tracking concept
Final concept — One table for all units
Another reason to move forward with the final concept was that it resembled teacher gradebooks, which are physical or digital notebooks teachers use to keep track of student grades. Gradebooks are a familiar mental model for teachers.
Inspiration from the physical world
The final concept resembled teacher gradebooks
Visual DesignBecause unit names span several characters (e.g. “Transformations of Functions”), I had trouble containing unit names into column headers. I went through a few iterations before I found a solution that worked.
Table headers, an unexpected challenge
First iteration
In my initial wireframe, table headers were angled, but engineers would have trouble with this.
Second iteration
I proposed an option where the table is transposed. It was easier to contain unit names into row headers. However, my PM expressed her concerns and preferred we didn’t stray too far from a mental model that teachers were already familiar with.
Final iteration
Following her feedback, I wrapped unit names onto several lines to fit them into multi-line column headers.
KWS teachers used pre-defined statuses to describe how students were progressing through a unit. My task was to determine the best way to visually communicate the status of every student to the teacher. I started with a brain-dump of visual concepts before my design manager and I discussed what we liked and didn’t like about each variant.
Making statuses more visual
A brain-dump of visual concepts
The senior designer and I discussed what we liked and didn’t like about the different variants.
I preferred the status icons with background colour because it created contrast. Contrast would help teachers differentiate between statuses at-a-glance.
I also preferred the addition of a cell background around the status icon because it helped the table move into the foreground rather than it blend in with the background.
Lastly, I preferred square status icons that created straight edges and aligned with the rows and columns of our table. However, rounding the corners with a 4px radius ensured the icon was consistent with our design language.
Putting it all together, I created a medium-fidelity prototype that was refined enough to show to KWS teachers.
Focus Group TestingThe prototype that was shown to teachers for feedback
The project team met with ~5 KWS teachers over Zoom for a focus group. During the meeting, I walked them through the prototype and asked them to provide their opinions on the direction we were taking. I wanted teachers to verify that the table met their high-level Course Progress Tracking requirements. Feedback was generally positive, but there were a few questions.
Feedback was generally positive, but there were a few questions
Final RefinementsTeachers 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 automatically complete the entire course. Because of self-guided learning, students could opt to complete the course test before completing individual units. They must go back to complete all units before completing the course.
Adding a course test column
Previous iteration — No course test column, I assumed passing a course test meant the student automatically complete the entire course
Final iteration — Additional course test column, students can pass the course test before completing individual units and must go back to complete all units
I moved the legend below the table, where it would remain fixed upon scroll. I felt hierarchically, the legend was not a priority on this page.
Legend positioning
Previous iteration — Legend above table
Final iteration — Legend below table
Collaborating with DevelopersFinally, I worked 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.
Our engineers had to create custom code for this scrolling behaviour, but it was worth it for ease of use!
Scroll behaviour
Classroom Tools was shipped in August 2022 and used with teachers at KWS during the 2022-23 school year
After a successful pilot year, KWS is expanding its cohort size from 200+ students to 350+ students
Students at KWS reported an improvement in test scores that is ~4x the typical growth across Math, Language Arts, Reading
Impact & MetricsLearningsAt 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.
Share work early, even if it’s sketchy
Because of deadlines, design and engineering worked in parallel. It was difficult knowing their work was dependent on my work; however, I learned to be transparent about my personal timelines and honest when I felt as though I didn’t have a solution right away. To avoid ad-hoc design solutions, I felt a responsibility to state when I needed an additional day to explore alternatives and possibly review with my senior designer. In general, transparency meant we could work together to figure out our dependencies.