Interactive Design & Media ApplicationProfessor David E. MeyersProject B Final Project Design and Storytelling Interactive NarrativeBridgid McCarrenWinter 2011

2 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Design and Storytelling

Humans have always been captivated by stories and thus have always found new ways to tell them. But has the nature of storytelling changed in the digi-tal age? Interactive media has opened new ways of experiencing a narrative, making stories more col-laborative, open-ended and user-driven. So, where experiencing a story was once a largely passive expe-rience, technology has put the audience in control, often even taking on the role of the hero and helping to determine the resolution. This has required a rein-vention of story structure, point-of-view, and even the use of language. By considering the evolution of inter-active narrative, from nascent, lo-fi interactive works such as Julio Cortazar’s novel, Hopscotch, to B-films such as “Mr. Sardonicus,” on to more complex expe-riences now found in website content, social media and multi player gaming, I will discover for myself and the users what makes a great interactive narrative and what potential the medium has for the future. The narrative will explore questions such as: What is an interactive narrative? Can the interactive narrative be story boarded? What are the interactive storytell-ing tools? Does the interactive narrative need a hero? What makes a great interactive narrative?

Therefore my final project will be an interactive nar-rative about the link between storytelling and design. Informing designers about their role as storytellers and the importance of this responsibility to society to create stories, which are positive influences on soci-ety. This will be a flash based movie or site with mov-ing type and info graphics. It will also present a series of options along the way. Allowing users to choose the direction they want to investigate more deeply thereby creating their own unique experience.

Audience for this site is practicing writers, designers, publishers, and creatives trying to explore and better

Understand the role that storytelling has in the new interactive, digital world we live in.

My motivation for this topic is that I currently work in the publishing industry, magazine design to be specific and have slowly watched less and less books magazines being produced. The replacement to these is ebooks or downloadable PDFs. I think that while these alternatives have their advantages by being environmentally friendly, easily accessible and may fulfill a need for consumers they do not enrich the experience of reading the story on the pages. The are static or have limited, planned time lines that mimic the printed version of the product. I would like to further explore this topic through this project and better understand interactive narratives, storytelling and design. And through those discoveries hopefully there will come a better experience for users than a PDF book or ebook for publications online in the not so distant future.

Project B Final Project Part 1: Motivation, Proposal, Audience

3 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 2: Site architecture

A horizontal and verti-cal scrolling page that allows users to jump to various “pages” or parts of the site’s content and learn the information in the order they see fit.

4 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 2: Site architecture

Users can choose if they believe design is best described as problem solving method or a story-telling method. Or their own definition in which they create the content for the middle portion. Not quite sure how the middle portion will work? Maybe a form that allows you to post content? A link to a blog?

5 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 2: Sites early build

A horizontal and vertical scrolling page that allows users to jump to various “pages” or parts of the site’s content and learn the information in the order they see fit.

6 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 3: Prototype

A horizontal and vertical scrolling page that allows users to jump to various “pages” or parts of the site’s content and learn the information in the order they see fit. Home page and then either storytelling path or problem sovling path. Contained with in each path are other links to deeper content and examples. The look of the site is inspired by infographics and also the “thread” or storytelling that weaves throughout.

7 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 3: Testing Results

Test Subjects: 7 people ( 5 females, 2 males), Ages 18-60, Design students and professionals, Copy writter for design publication

Are you a design student or professional?[1] a. I am a student[5] b. I am a design professional[1] c. I am a writer in design industry

Are you familiar with storytelling as a design meth-odology:[0] a. yes, very familiar[2] b. yes, a little familiar[5] c. not at all

Did you find this site to be informative on the topic:[5] a. yes, very good overview of topic[2] b. yes, but would want more information[0] c. no, I found the site to be confusing[0] d. no, I feel the site does not give enough infor-mation

What is your favorite part of the website:[2] a. Reading about storytelling and design[4] b. Viewing the case studies and supporting examples[1] c. the ability to give feedback

How would you describe the design of the site:[6] a. clean, attractive[1] b. Interesting to look at but not the style I would have chosen[0] c. cluttered or overwhelming

What do you like least about the site:[2] a. Not a topic I am interested in[5] b. Needs more resources or opportunities for continued learning[0] c. Needs less info, busy or overwhelming

What are your thoughts on the Horizontal scrolling navigation:[5] a. very appropriate for this linear content as a “thread of storytelling”[2] b. Allows users to read only what they are inter-ested in or gloss over all of it quickly[0] c. I found it to be confusing and could not find content

Change to consider from feedback:- Add a sources or additional resources page- Add some more example and links- Have links open in a separate window

Other comments:- I like the option to respond via message to author- Case studies are very helpful in illustrating the points of the cop-confusing to have the “your own def” page. Better just to have the feedback pages at the end of each path.

8 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 4: Final

9 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 4: Final

10 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 4: Final

11 • Mccarren INTERACTIVE DESIGN & MEDIA APPLICATION P ROj E C T B

Project B Final Project Part 4: Final

A couple of ntoes about the final solution:The both horiztonal and verti-cal scrolling help users dife-renciate between the main content and the examples. It also keeps the user engaged and able to quickly view a number of examples without having to load a flipbook.

Also the simple color scheme and shape graphics are inter-sting but not distracting from the main content.