December 21, 1988 changed our world forever. For the communities at Syracuse University and the Scottish town of Lockerbie it was an especially dark day. All 259 passengers aboard Pan Am Flight 103 including 35 SU students, plus 11 villagers on the ground, perished from the actions of those determined to do evil.

This year marks 25 years since that fateful flight. Who were the student victims, and what is their legacy? How did the events in Lockerbie help shape the world we live in today, and what can each of us do to make it a more peaceful place?

In the Fall of 2013, four teachers and 26 students in the Newhouse School’s ICC 505: Web Journalism and Innovation course decided to explore these questions in a 6-part interactive package called Yesterday, Today, Tomorrow: The Legacy of Pan Am Flight 103.

Working closely with course professors Jon Glass and Dan Pacheco, as well as Newhouse’s visiting programmer in residence Dan Schultz and interactive designer Jeff Passetti, they produced a multifaceted, multimedia digital storytelling package. Over 15 weeks they spent countless hours going through archival materials, interviewing families of victims and SU’s Remembrance Scholars, and producing documentary-quality web video. But on top of all of that, they also conceptualized and hand-coded interactive Web experiences that go beyond traditional web storytelling layouts.

Going Beyond Text and Links

As just one example of the innovative storytelling techniques they employed, one group decided to present video and audio interviews of SU’s Remembrance Scholars using a modified game metaphor.

After watching a sobering video of SU’s annual rose ceremony, you are presented with a small orange dot labeled “You” on top of a campus map along with instructions to use the arrow keys to move around the map. As your dot encounters doves that sit atop different campus buildings, the focus of the screen changes to allow you to explore multimedia content related to that specific SU school. Clicking on the dot again takes you back out to the map to continue exploring.

Another package invites you to celebrate the lives of the 35 student victims through the eyes of SU Abroad’s London Experience. You click through an interactive map to visit the students’ favorite haunts in London, many of which are also frequented by SU students in London today.

You are later invited to learn about the lives of each victim by clicking through squares on the Remembrance Quilt. This was a conscious effort by the students to move beyond the tragedy of Pan Am 103, which is commemorated every year at SU, and to learn about the lives of the students who died. As you read through each victim’s profile and listen to audio interviews with family members, you sense a connection between those lost lives and the positive energy of the current SU students who created the package. You cannot help but reflect on what these amazing people would have gone on to do had their lives not been cut short by terrorism.

This urge to focus on the future is further reflected in a participatory section near the end that invites readers to share how they will “act forward” to make the world a more peaceful place. The feature invites readers to post answers to specific questions, such as “How do you use your talents to enact change?”

The Technology Learning Curve

Beyond the obvious challenges of conceptualizing the experiences and acquiring and producing the content, the coding work — all HTML, CSS and Javascript — was significant. This was the first time that most of these students had done anything in raw HTML and CSS.

Each team designated a “tech lead” who met once or twice a week with visiting programmer Dan Schultz and myself. They started with an overview of how the Internet works, then followed instructions to set up their laptops as local web servers. They also set up the Github code repository tools on their laptops so that they could submit changes that Schultz would review and sync to the master version. The entire package is up in an open-source Github repository for anyone who wants to see what they did, including the history of changes over time which can be viewed line by line, or in a network graph.

Learning by Doing

The instructors made a conscious decision not to do anything for the students that they couldn’t be taught how to do themselves. The ultimate goal was to give the students an understanding of how interactive Web features work so that they can be more effective team members when they’re working in digital newsrooms. Rather than just asking a developer to perform some magic, they can make technically-informed suggestions and maybe even help out a little with the coding.

To achieve this, Schultz consulted with each lead on the experience they wanted to create and set up an extremely simple, intentionally “ugly” HTML and CSS template. The leads worked with their teams to embed text, photos, videos and eventually Javascript into the templates. Later, the teams met with Passetti to improve the visual design using CSS. Because of the way the packages were coded the tech leads were able to implement much of the design, but if they ran into a brick wall they could ask for help and then see what either Schultz or Pasetti had done to make something work.

Because Schultz was only in town one week each month, much of this on-the-fly instruction happened through Google Hangouts, with student, teacher or both sharing screens to work through a problem. Early concerns over the effectiveness of this type of online instruction were quickly quashed when students were observed virtually meeting with Schultz over Hangouts from the comfort of their dorm rooms at night, even during the weeks when he was in Syracuse in person.

Students who needed immediate help that couldn’t be provided remotely would meet with Pacheco, Glass or Passetti in the classroom.

A Model for Future Classes

While frustrating at times, the process the students went through was a rich learning experience focused on multifaceted journalism, the technical aspects of building digital projects, and understanding the impact an event of this magnitude has had during the past quarter century. Surveys collected from students reflected this, with some saying they felt this was the hardest, but also most rewarding and impactful, storytelling project they had worked on in their time at Newhouse.

The instructors also learned a lot about how to teach web coding to students in a way that lets them create interactive experiences that are of interest to them. The primary difference in this model from other courses is that the instructor is not so much about teaching from a font of knowledge, as it is about coaching and guiding along the way. Most of the technologies employed in this interactive package come from the open source world, and if they appear in any textbooks that instruction is almost certainly out of date by the time it goes to print. Courses like this are about teaching students who to teach themselves, both today and throughout their careers.

In the spring of 2014, 20 students in Pacheco and Schultz’s NEW 300/600: How to Make Almost Anything on the Web course will go through a similar process, with a few tweaks to address problems encountered the first time. Because NEW 300 is only a five-week course they will be working one on one rather than on teams. Also, since the course is open to students outside of journalism programs their projects will reflect the diversity of courses offered at the Newhouse school of communications, which include television, film, advertising and public relations. But the end result will be the same. They will come in knowing little, and will emerge with basic technical knowledge and an eye-catching interactive portfolio piece.

At a time when nothing in media stays the same for longer than 6 months, relying solely on pre-packaged templates and tools that hide all of the underlying code isn’t enough. It’s important to understand how things work at a fundamental level, and also to not be afraid to dive into the underlying code. If there’s anything we’ve learned in my years on the digital edge, it’s that innovation is an inherently messy process. We’re proud of the ICC 505 students for diving fearlessly into the unknown and emerging with new skills and an incredible story to boot.

Professor Pacheco in the Press