May 8, 2012

StoryCode Immersions #3

Technology Process

AGENDA

• Technology Process Overview - 45 Minutes

• Working with Developers / Deep-Dive: 45 Minutes

Mark Harris - www.desperatecomfort.com

Twitter: @MegaMarkHarris

• #storycodeorg

OVERVIEW

• Immersive media projects blend processes from Editorial

+ Film + Tech

• New type of project process has evolved

• Blend of the three

• Inspired by the work of Loc Dao (Creator of Bear71) of

National Film Board (www.nfb.ca)

BLENDED PROCESS

• Concept

• Script

• Information Architecture

• Wireframes

• Storyboards

• Tech Spec

• Design

• Development

CONCEPT

• Overarching idea for the project

• Keep it high-level - consider including premise of the

story here

• Examples:

• Distribute film on Facebook - hook into Social Graph

• Explore randomized presentation of scenes

SCRIPT

• Stick to traditional screenwriting tools here

• However some scenes may be abstracted (not scripted

but controlled by technology)

• Indicate where the narrative jumps platforms and which

platforms are which

• Examples:

• Scene 2, 4, 6 - list of images from Flickr with labels

• Scene 10 - randomly selected video clip from YouTube

INFORMATION ARCHITECTURE

• Site Map for your Story

• Indicate platforms

• Typically shows “user flow”

• Helps communicate how/where users will experience the

story

INFORMATION ARCHITECTURE EXAMPLE

WIREFRAMES

• Non-Designed Screen Comps

• Focused on Front-End Functionality

• Great place for notes to begin Technical Requirements

• Provides roadmap for prototypes

WIREFRAME EXAMPLES

STORYBOARDS

• Similar to traditional film storyboards or sketches

• Could also be rough screen comps to start to flesh out

key scenes

TECHNICAL SPECIFICATIONS

• Analyze every aspect of the functionality and make

technical notes - review in detail with technology team

• Goal is to capture all potential outcomes and baseline

tech functionality

• Consider a Use Case approach: use cases define

interactions between an “actor” and a “system” to

achieve a goal.

• Example:

• Bank Customer uses ATM to withdraw money

• Users wants to watch film on Facebook

DESIGN

• Traditional user interface design approach

• Design, review internally, review with tech team

• Consider showing to potential users, get feedback

• Revise, review, repeat

DEVELOPMENT

• Prototype

• Test to ensure it meets baseline tech requirements and

handles alternate outcomes (password fails)

• Develop Alpha / Test

• Work with development team to deal with traffic

issues / load balancing

• Develop Beta / Test

• Soft Launch / Fix Bugs

• Launch / Fix Bugs

CONTACT

mike@storycode.org

www.storycode.org

@storycodeorg

mark@desperatecomfort.com

www.desperatecomfort.com

@MegaMarkHarris