Virtual Teaching: Intro to Programming Class

CIID Interaction Design Programme
Virtual
May 2020

Team
Annelie Berner, Joshua Horowitz, Matt Visco, Peter Kuhberg, Paula Te

credit: Annelie Berner

Just two months before, I taught the 28 students of the Interaction Design Programme in person, physically in Costa Rica. Then the pandemic happened, and we all experienced a dramatic shift in learning. For two weeks, we taught a virtual class on programming with p5.js. The class culminated in a team project where students built experiences that were designed to take people out of their isolated bubbles.

Learning Process

In week 1, students grappled with programming concepts through daily challenges.

The students' work from day 2: visual patterns
Mouse interaction and animation on day 3

In week 2, students worked in teams of 2-3 on a bigger project that tied together their learnings. The faculty provided prompts and spaces for students in Notion to journal and document along the way.

A student team's journey into their final project, "Constellation Connect," which allowed users to name constellations remotely, in a shared night sky.

Pre-class organization

A day in the life: cup of tea, Slack, Zoom (chat, screen share, live video, annotation), curriculum printout (Notion), p5.js editor, sketch notes, headphones

Our teaching team was completely remote, and we knew it would be very different from the in-person experience. Even with a programming class, remote learning means students can't look over their peers' shoulders to see how they're doing, share in the collective excitement of getting something to work, or empathize with other's frustration when things aren't going well.

Prior to the class, I interviewed faculty from previous weeks to understand how they structured their virtual classes, and reached out to them to see how our class might seamlessly connect. We also reached out to the students to hear what their remote learning experiences have been like so far.

Being hyper-organized is key, for instructors as well as for students. There is no spatial mental model of "the books go here" and "our assignments go there" – so online workspaces need to be consistent, easy to navigate, and its structure needs to be fairly unchanging over time. – Insight from interviews and experience

Class Design

Our user research and feedback led us to ask, how might we recreate a classroom experience online that feels like an in-person flipped classroom, where students sit in groups, engaged in learning, and the teacher facilitates by walking around to the different tables, helping groups one on one?

Our solution was to leverage breakout rooms to facilitate pair programming, where groups of 2 would share and control one screen while tackling programming challenges. Teachers would hop in and out of the breakout rooms and help when necessary. This was a success in giving students space to engage, learn, and fail on their own, with instructors available as guides on the side.

Afternoon pair programming exercises (created by Josh + Paula)

Class workspace on Notion
Schedule

Lecture content (created by Annelie and Matt)

Programming examples, like this Belt Pattern Maker

Post-workshop observations

A typical programming journey, both in CIID and in general.

The two-week class had me thinking and reflecting a lot, both on teaching virtually and in-person, and on what it's like to learn programming. For example, the learning programming journey sketched above came out of my reflection on just how hard it is for students writing their first line of code - and how hard it can be for teachers to remember that when they've spent decades immersed in it. My goal in sharing this sketch is to respect the emotional journeys of the students and to acknowledge how common it is for learning things to feel hard and frustrating.

From teaching the 2020 cohort in person just 2 months before, I experienced a lot of the challenges of transitioning our in-person learning experiences to remote ones. The challenges led me to write this article about the Inequities of Our Remote Gathering Platforms.

Further reading

🎞Slides