How to Teach Interactive Storytelling: Five Lessons from 36to.ca

One of my big goals in teaching code and interactive design to communicators is to make them feel that the leap from not getting the code to being able to program things themselves is not so large. The trick is usually in harnessing their motivation to tell stories to spur their interest in code, but there is rarely time in the curriculum to teach enough code to permit students to build work of the sort that would satisfy their creative instincts while also supporting them in developing their storytelling craft.

Last fall, in teaching a class of journalism students an intro to interactive storytelling, I wanted to give them a chance to develop a real project while experimenting with 360˚ photography, a shiny new tool in newsrooms. Through a collaboration with my colleague Dan Rowe, the result is 36TO: Activism Around Toronto in Thirty 360˚ Stories. The students used place-based storytelling with audio and 360˚ pictures to create an inspiring collection of stories about the history and landscapes of activist voices in Toronto, from animal rights to abortion activism to Indigenous history to Black Lives Matter, avant garde art history, Oscar Wilde and LGBTQ community murals.

The project spurred some interesting experiments that left me thinking a lot about how to teach interactive storytelling. Here are a few takeaways.

1. Collaborate

Teaching interactive storytelling poses a curricular challenge. In order to develop and design work completely on their own, students would need a strong grasp of programming and frameworks, UX and visual design, storytelling and reporting, as well as time to learn to use new media effectively, in this case 360˚ photography. Ideally they would also have time to reflect on exemplary work. Few courses are set up to teach all of this at once and with depth.

Making this assignment into a collaboration with Dan Rowe’s journalism and social justice class permitted the students in each course to focus their studies. Rather than overloading them with storytelling and development tasks all in one assignment, this collaborative project permitted Dan to support them in reporting original stories, while we focused on the mechanics of digital storytelling in my class. The result is a two-course assignment with enough scope for the students to create projects with both technical and storytelling depth.

2. Keep it Real

In designing storytelling assignments, I like using a common theme and architecture around which to develop projects, so the students’ work can be assembled into a collective platform. This structure helps the students see how their voices can be gathered into environments that feel like the feed-based outlets they interact with online, and helps magnify their projects into something with a larger impact. By working on different topics within the same theme and structure, they also get a sense of how diverse, strong, and valid their individual voices are, which I think helps raise their confidence levels as creators.

In finding a common theme for projects like this, I also like trying to gain inspiration from the new media we’re exploring. We decided to look at stories about place-based activism in Toronto partly by taking a cue from 360˚photography itself, which lets viewers look around — see a space, discover its details for themselves, and view things from novel perspectives. We took the opportunity of photographs in 360 degrees as a call to tell stories with a wider purview — to look at things from all sides, to incorporate perspectives beyond the mainstream.

Channeling the students’ assignment work into public facing media seems to keep their experience in school tied to their own lives as media consumers, and thus, to use the pedagogic terminology for this sort of thing, authentic. When assignments feel real, students’ engagement rises.

3. Teach Bite-Size Code by Working Backwards

I’ve written elsewhere about some of the technical challenges and breakthroughs in devising a student-friendly content management strategy for this project. (TL;DR: I wanted to find an easy way to allow student journalists to upload and integrate their media. The solution was a hybrid using WordPress forms and JSON.)

Another challenge was deciding how much code the students needed to learn to execute this project well.

In teaching code to communicators I’ve sometimes found it best to work backwards by first helping students create a digital project, and then afterwards explaining how the code works, rather than obliging them to learn all the (boring) basics before they can even start to create the cool stuff that motivates them on their own. Another workaround is to develop modular code that requires just a small bit of editing to tailor to a particular project, and then to explain to students how the code block works, and what they need to do to make it their own.

For this project, I decided to create a reusable code structure for the stories, one that I could explain to the students once they’d used it to integrate their own media. To build it, I incorporated the great webVR framework A-Frame, which has a fantastic ecosystem of resources on Glitch. I retooled one of their sample scenes with three photographs to serve as a storytelling interface by adding audio with start/stop functionality and transcripts for accessibility and clarity. To build the overall web app housing these stories, I made this structure into a Vue.js component within a Vuetify interface, which made the design and development of the project feasible. To ensure the students had some connection to the code behind their stories, I also built the modular story structure into a remixable standalone Glitch project, and taught them how the code worked, and how to edit it to showcase their own stories. This way, they could share their stories independently of the class project if they wished and could also have a better sense of what pieces of code were doing what — rather than facing the black-box complexity of a compiled web app.

Rather than teaching all the code they would have needed to design and develop original story architecture, I helped the students assemble a working interactive project that they could feel proud of, and then pulled back the curtain on the underlying code. This approach broke down the overwhelming task of learning to build strong interactive work at multiple levels so as to ideally leave students with both work they could feel pride and ownership in as well as a new level of technical craft and understanding.

4. Let the Students Tell You What They Learned

This project was tough but fun for the students. In addition to honing their reporting skills, they needed to execute strong work with a new medium — digital storytelling via 360˚ photography — while grappling with the unwieldy nature of creating and managing a project with multiple media components.

Even though the story environment structure was quite simple, it required the students to assemble nineteen different media bits for uploading: a title, slug, byline, description, three 360˚ images, three image descriptions, three thumbnail images for navigation, three audio files, and three transcripts. I didn’t foresee how difficult it would be for the students to gather and organize all these files. The challenge of marshalling, editing, and assembling all this media offered them a good lesson in how complex even the simplest projects can become, and showed them how rigorous media management process is a major part of interactive development. A good lesson — and one I didn’t really plan.

They found working with the 360˚ photography exhilarating as well as difficult. Booking and sharing the school’s cameras on a schedule forced them to collaborate, manage their time, and strategize about capturing their media efficiently. They came back from their shoots with many stories of how they kept out of their photographs by hiding behind poles and in alleys, while ensuring that the the camera stand didn’t get toppled over by the wind or someone walking by. These difficulties spurred impressive creativity. One student, rather than trying to hide out of the frame, made her face and physical presence part of her story, to brilliant effect. The students gained creative confidence from overcoming the frustrations of the new medium, and learned the excitement of mastering an intimidating technology — another useful lesson.

I had only set out to create a project that would let the students experience interactive creation with 360˚ photography. By listening to their tales about executing the work, I realized that what they learned from all of these challenges went beyond my original goals. I learned from what they learned.

5. Experiment Alongside Your Students

I heard many stories, months afterwards, of how having worked on this project helped the students as they headed into summer jobs. Internships were offered because the students understood 360˚ photography and were conversant with interactive storytelling techniques.

As a result, a big takeaway for me has been that experimenting with cutting edge tech really pays off for students. Potential employers want to be hiring people with an understanding of that new fad, and an optimism that they can learn to use the next one that will come along, rather than a fear of novelty.

This doesn’t mean that we should only teach the bright new thing at the expense of traditional storytelling, but there’s powerful value in learning about and exploring the limits of new media by enthusing about its potential and by taking our students along for the ride. Schools should be places for experimentation by teachers as well as students.

I came away from this project with a renewed feeling that my job as an educator is not to shy away from the latest bleeding edge media technology because maybe it’s just a flash in the pan, but to experiment in testing its limits with my students, so that they might leave my classes with a strong sense of the state of the art, how far it can be pushed, and what might come next — when they’re at the helm.

Jessica Duffin Wolfe teaches design and code for storytelling at Humber College, where she is a Professor of Digital Communications and Journalism. She has a PhD in English and Book History and is the founding editor-in-chief of The Toronto Review of Books.