(Rich Gordon)

Though journalists have been creating content for the World Wide Web for almost 15 years now, there's still much we don't know about what makes for effective storytelling on the Web. To be sure, there's no shortage of Web stories. But it's still rare to see Web storytelling that takes full advantage of the unique capabilities of this medium.

Here's one storytelling example that hits the mark: Our First Loves, a new Web site launched by an experimental undergraduate class (Advanced Interactive Design) at the Medill School, where I teach. The site features (as I write this) 89 first-person stories about "first loves," broadly defined - love for another person, for books, a dog, a family member, even Chewbacca from the "Star Wars" movies.

The site represents the work of 11 students who tackled every aspect of Web site development - from content to technology to design to usability - under the direction of my faculty colleagues Susan Mango Curtis and Jeremy Gilbert. It inspired me to come up with a list of attributes of great Web storytelling.

Here goes. Great Web storytelling is:

• Visual. Like TV, magazines and great newspaper photojournalism, great Web stories should look stunning. The Medill students achieved this goal with a clean design featuring lots of white space and a home page that features a dozen stories, represented as Polaroid snapshots.


• Interactive - as in, the user is in control of the storytelling experience. A user has many different choices in how to move through the site - clicking on the Polaroids, selecting based on various criteria, visiting the students' favorite stories, and more.


• Interactive - as in, users can interact with the content. They can rate each story by answering the question "This story made me..." and then choosing from 15 options, from "smile" to "want to slam my keyboard."


• Structured. This is not necessarily immediately apparent upon looking at the site. But every story is categorized based on a variety of attributes: the age and gender of the contributor, his or her age at first love, where the first love took place, the format of the story (audio, video, text, slideshow), the most common story ratings. To plan the site, the students built an elaborate spreadsheet that captured each attribute of every "first love" story. These multidimensional categories allow easy searching and browsing of related stories.


• Multimedia. Stories are presented in images, audio, video, slideshows and text.


• Technology-driven. It would have been very difficult to build this site as a series of HTML pages. Instead, it was built on top of WordPress, which is generally thought of only as a blogging platform but is also a very powerful database-driven Web content management system. Each story is actually a record in an SQL database, and the WordPress engine provides much of the magic that makes the site such an interesting user experience.


• Navigable. "Our First Loves" has a clear, consistent interface that always offers multiple options to the user. The site's navigability is a direct result of its data-driven and highly structured content approach.


• User-generated. The site encourages people to submit their own stories, which are reviewed by the students before posting. The students considered allowing user submissions to go live without moderation but decided that the risks of inappropriate content were too great.


• Personal. While the Web is a technology-driven medium, "Our First Loves" is intensely personal - a characteristic of many of the most compelling Web stories.


• Usable. Like all Web sites, "Our First Loves" can't engage an audience unless it makes sense to users. The students did extensive usability testing before settling on their final design and navigation approaches.


• A team game. While it's true that the Web opens up publishing to individuals like no other medium, great Web storytelling like "Our First Loves" requires collaboration among people with a variety of skills - in this case, visual design, technology, video production and more. The students organized themselves into roles: project management, content, technical development, and design/architecture.

The students presented the site last week to an audience of faculty, students and Medill staff. Some of the things they said they learned:

• How to work on a team;


• How to transfer print design skills to the Web;


• The value of usability testing;


• How to use new tools, such as WordPress;


• The basics of HTML and CSS.

It also helped, said student Jessica Huang, that "we're all really good about meeting our deadlines."

After the presentation, I conducted an email interview with Gilbert, a Medill alumnus who returned to his alma mater in September to teach digital journalism. Here's our interview.

This class brought together students with a variety of strengths and pre-existing skills. What did the class have to be taught that few if any of them already knew, in order to accomplish the end result?
There were two categories of skills the students either needed to learn or benefited from more practice: how to organize a project and Web development skills. The students had all been in team-based work environments before, but they needed to learn how to structure a fast- paced, Web development project. Co-instructor Susan Mango Curtis and I stressed both leadership and project management skills. The student leaders structured the project and helped determine what each other student's specific area of responsibility would be. Also, many of the students needed basic HTML and CSS to be able to use WordPress, the platform we had chosen to create the Website.

How important was it for students to have print design experience? Could the project have been as successful with fewer people having print design skills? What would be the minimum number of skilled print designers needed to pull off this project?
As a prerequisite, the students either had to take a print design class or a basic online storytelling class. Having knowledge about journalism, and especially visual journalism, was very important. The students' print design experience did not make building a Web site possible, but principles behind print design introduced the students to hierarchy, typography, color and grids - all of which are essential. To pull off this kind of project we needed at least 2-4 skilled designers and I would not have expected such a compelling, immersive Website from journalists without a visual background.

What skill set(s) that only one or two people had were indispensable to the project?
The decision to use a highly-customized WordPress site required some experience working with PHP (scripting language) and a fair amount of HTML/CSS experience. Likewise having a student interested in advanced videography and video editing skills allowed the class to create different kinds of stories. The class very much benefitted from the skills of Tom Giratikanon (the WordPress/PHP expert) and Tommy Giglio (the photography and video manager). Without them, the class would have to have been taught differently. For example, instead of starting from scratch with the WordPress theme we could have built on something existing or used a different content management system. The Web site building is not the most complicated piece of the project; the sophisticated, visual storytelling and the clarity of the user experience is.

What does this project suggest about what journalists need to know today (and what students should learn in journalism schools)?
All journalism students should all have some basic experience with HTML, CSS, Web 2.0 storytelling tools, multimedia reporting skills (photography/videography/audio recording) and a basic understanding of how to use employ/use a content management system. Far too many professional reporters with extensive, polished resumes are finding themselves forced to self-publish online. Had they had this basic training, that might not be a frightening prospect.


By Rich Gordon (richgor-at-northwestern.edu)
Rich Gordon is Associate Professor and Director of Digital Technology in Education at Medill School of Journalism at Northwestern University.

Labels: digital storytelling, interactive storytelling, online journalism