distance learning application prototype


web-based application prototype


* * Exhibited * *
Department of Graphic & Industrial Design
Traveling Show

* * Presented * *
NC State University Accreditation Committee

Prototype of a content affinity mapping application for the distance learning course "ENT 207: Insects and Human Disease." Students connect and rate the relevance of course content (lectures, readings, lexicon, videos and discussions) to current news articles related to the field.

Classmates critique and comment on those connections by revising the ratings, or adding and deleting connections.

In the final stage of the activity, students use the collaborative map to identify news trends and themes related to insects and human disease. Each student records and posts a video report on that theme.

ecosystem view


web-based application prototype


In this remote conversation system students create an affinity map that evolves throughout the semester as they connect course content (lectures, videos, readings, discussions and lexicon) to current news articles they find on how insects spread human disease. Students can view the content map at various scales and navigate by dragging or scrolling around the space.

playing back the map


When collaborating on visualizations, research shows participants can better understand and critically discuss the result if they can view how the visualization has changed over time. In this application, one way students can see how the map has changed over time is in "playback mode."

filtering and settings


The "Ecosystem View" displays course content as round nodes, news articles as square nodes, and the connections between them as links of varying weight. A faceted filtering system and subject tags helps a student narrow their search for particular content. Content that meets the filter criteria scuttles, shakes or wiggles.

One ecosystem


In this scenario, after exploring the content a classmate chooses a student's contribution to the map to evaluate.

In the reading view, the student's summary and conversation about the article appear on the left, the visualization of the article "ecosystem" appears on the top right, followed by the original news item.

The article ecosystem changes over time as classmates comment on and revise the connections to course content made by the student author. When a comment is deactivated, the visualization of the connections responds, showing the connections and nodes as they appeared before the commenter's revisions.

The reader closes the discussion drawer to focus on reading the article. Here the connections between the article and course content are integrated into the reading experience. Double clicking highlighted text opens the paragraph to reveal a course lecture the student author rates as relevant to the text.

The reader revises the initial rating to "Very Relevant."

After the reader reviews her peer's connections and responds to the system prompts, her words appear as the most recent comment. She revises her original thoughts before submitting her comment and revisions to the map.

Cross-section view


The map can also be viewed in cross-section. In this view, student submissions (news articles) appear in a layer above course content (which is contributed by the instructor). Each object is assigned a position within the layer, content or articles with more connections, higher degrees of relevance and with greater activity rise closer to the layer's surface.

Near the end of the semester a third layer opens where students post video newscasts they record themselves. To create a news cast students are prompted to choose three news items with the same big idea, prepare a script that delivers the big idea like it is news, and record and share the news item with the class.

Research presentation poster in situ with other reading behavior posters. Photograph by Hayley Hughes.

Research Presentation Poster


digital print


42" x 84"


* * Exhibited * *
Society of Environmental Graphic Designers (SEGD) Conference 2012

The poster presents four weeks of research into critical and creative reading behaviors, as well as observations conducted of the Insects and Human Disease course.

The main body of the poster is a task-flow diagram of the news posting activity broken down into hierarchical steps at each stage.

Poster (Detail)


Poster (Detail)


A diagram showing that over half of the content for this online distance-learning course "lives" outside its website, making it difficult for students to literally connect the content to the course.

Poster (detail)


Three student personas and their associated behaviors used in the development of the application: the Planner, the Chunker and the Crammer.

Initial Whiteboard sketches