CIID Interaction Design Programme Virtual May 2020

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

credit: Annelie Berner

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

The students' work from day 2: visual patterns

Mouse interaction and animation on day 3

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.

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

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)

Afternoon pair programming exercises (created by Josh + Paula)

Class workspace on Notion

Class workspace on Notion

Schedule

Schedule

Lecture content (created by Annelie and Matt)

Lecture content (created by Annelie and Matt)

Programming examples, like this Belt Pattern Maker

Programming examples, like this Belt Pattern Maker

Post-workshop observations