VII. Interactive Design Process
(prepared by Matthew Fisher, Night Kitchen Interactive)
Working with The Philadelphia School middle school students, we designed this site using inexpensive, easy-to-use Web 2.0* services. Our process was simple:
Step 1. Collections Management
We selected about 100 artifacts from the two exhibitions and uploaded images and information about these artifacts to www.flickr.com - a photo sharing website. You can view our collections here:
Poor Richard: Anatomy of an Almanac
We tagged the images with keywords in order to make them easier to search for.
Step 2. Exhibition Design
We selected WordPress blogging software to create the body of the site and installed it on our servers. We installed a few plug-ins to allow us to easily add our Flickr images to our pages and included a handy player for our podcasts. Next we selected our WordPress theme for the basic design, customizing the header graphic to give it a taste of Franklin.
Step 3. Exhibition Layout
We created the basic pages for the site, including a homepage, an “About” and “Credits” page, as well as pages for each of our teachers and students. We also installed an audio slideshow player created in Flash that would allow us to display our audio skits. We were now prepared to add the content.
Step 4. Exhibition Installation Phase 1: Student Artifacts
Our first exercise centered on the students creating their own artifact remix page. Each student was shown how to add a short bio to their page using WordPress. They also learned how to access the Flickr site, pick an artifact, and “remix” it using a handy set of online image editing tools available at flagrantdisregard.com. There are many tools available here, but we selected the motivational poster, the movie poster, the magazine cover and the trading card tools for this exercise. Each student used their image and tool preference to create a remixed artifact image to add to their page. You can browse the fruits of their labors here.
Step 5. Exhibition Installation Phase 2: The Narrated Exhibit
Our next major exercise was to create the narrated portion of the online exhibit. After students identified their “big idea” and major themes, they selected artifacts for each theme and composed label copy for each artifact. Once this was completed, we created blog posts for each artifact, in which we included a title, an image, image credits and label copy. We associated each post with a theme using WordPress categories, allowing us to instantly display each theme’s artifacts on its own page.
Step 6. Exhibition Installation Phase 3: The Audio Skits
The last step of the exhibit creation (and by far the most enjoyable) was the recording of the audio skits. These were recorded as podcasts using another handy Web 2.0 service: www.slapcast.com. This site allowed the students to record a voicemail message to the slapcast service, which then automatically converts the voicemail to a podcast and uploads it to our blog. As if that were not cool enough, because we added the podcast player plug-in, these podcasts were able to play back directly from the site. Thus, the students recorded a series of (truly hilarious and creative) audio skits, which were uploaded to playback through the audio slideshow. The feedback on their efforts was almost instantaneous. The students then went on to record audio for each of the artifacts in their exhibit.
Step 7. Exhibition Installation Phase 4: Student Profiles
As a fun bonus, we took photographs of all the students and uploaded those to the Flickr site as well. In addition, each student recorded their own audio for their personal page, describing the most interesting thing they learned about Ben Franklin. By displaying the photos and adding the audio to each of their pages, the site really came alive for the students.
Step 8. Finishing Up
As a final step we composed our welcome text for the homepage and added a few thumbnails from the Flickr site to jazz it up. We also added text and images to the “About” and “Credits” page. Finally, we added a WordPress standard comments page for our visitors. Feel free to add your own by visiting the comments page now.
*For a more information about Web 2.0 and what it is, read 24 hours of Web 2.0 (www.citycreatives.com/blog). This is a transcript of Night Kitchen Interactive President Matthew Fisher’s presentation at the Global Creative Economy Convergence Summit in June 2006.