Session P04 Storyboard to Storyline Kevin Thorn, NuggetHead Studioz, LLC. Las Vegas, NV | September 30 – October 2, 2015

PowerPoint Presentation

Session P04Storyboard to StorylineKevin Thorn, NuggetHead Studioz, LLC.

Las Vegas, NV | September 30 October 2, 2015Welcome and IntroductionWhy am I here and what am I doing?Our ObjectivesHow to storyboard for StorylineDifferent types of storyboardsStyle Guide for a Storyline projectAsset management and progress trackingGet the files and know your teamdownload link:http://bit.ly/1Frk7zl

table talkIdentify a table TEAM NAMEAGENDAA brief history and introduction to storyboardsStoryboarding to Storyline: What does that mean?Elements of User Experience DesignVisual Storyboards

BREAKStoryboard templates and todays project filesStoryboarding raw content

LUNCHDocumenting, preparing, and transferring your plan to Story View

BREAKClient/Customer adds new content!Tips & Techniques for managing change during the dev processReview and Tracking changesWhat is a Storyboard?The process of visual thinking and planning allows a group of people to brainstorm together, placing their ideas on storyboards and then arranging the storyboards on the wall. This fosters more ideas and generates consensus inside the group.

Process of visual thinking displayed in sequenceGraphic organizers such as a series of illustrations or images displayed in sequence for the purpose of previsualizing a motion picture, animation, motion graphic or interactive media sequence, including website interactivity.http://en.wikipedia.org/wiki/Storyboard

Storyboarding is NOT writing a Story.Tools to produce a storyboard are irrelevant.

6History of the Storyboard

1928 Plane Crazy

1933 Steamboat WillyDisney credited animator Webb Smith with creating the idea of drawing scenes on separate sheets of paper and pinning them up on a bulletin board to tell a story in sequence, thus creating the first storyboard.

http://en.wikipedia.org/wiki/Storyboard 2015 NuggetHead Studioz, LLC., All Rights Reserved7Storyboard is part of DesignStoryboarding is as much the creative design process as is the elearning project itself.

The more time you devote to the storyboard, the less time is needed for development.

2015 NuggetHead Studioz, LLC., All Rights ReservedSetup: two identical Lego models. One assembled, and one in a bag disassembled.

Introduce the assembled Lego modelThis model has ### pieces all nice and snuggly fit together. To assembled this model, you need instructions. A map. A plan.Introduce Lego model build sheetYou need one of these. (show Lego instruction sheet)In its simplest form, the Lego build sheet IS a storyboard. A visual sequence of steps/tasks to the end result.Lets correlate this Lego model to the design & development of an eLearning courseShow disassembled Lego model in bag.Pull out a piece and suggest it is a piece of contentPull out another and suggest it is an imageAnother and suggest a button used in the courseAnother and suggest it is an audio fileSummarize: How do you get from "here" (show pile of bricks) to "here" (shows model).

You need a plan. A storyboard. The ART of the storyboard is entirely up to you!

8

The Documents

ScriptNo ScriptBilingualVideo ShootPhoto ShootLets talk about how to make a storyboard. There is no right or wrong way to make one. Its what works for YOU in YOUR workflow. I like to start with a piece of graph paper and a pencil. Then I transfer than diagram to PowerPoint. Next, I map out all the pieces in parts in a Word document. Im a bit OCD when it comes to documenting so I like both the visual flow of instruction, as well as the text document that has all the details of the project.9Storyboard Workbook

Table of contents listing all associated documents in project.

Text-based storyboard document outlining flow of instruction

Visual storyboard showing usability flow and navigation

Interaction document (optional)

Audio script storyboard (optional)

Video shot list (optional)

Style Guide

Image Guide

2015 NuggetHead Studioz, LLC., All Rights Reserved

Design first 2015 NuggetHead Studioz, LLC., All Rights Reserved

then DevelopWith BlueprintsWithout Blueprints 2015 NuggetHead Studioz, LLC., All Rights ReservedWith StoryboardWithout Storyboard 2015 NuggetHead Studioz, LLC., All Rights ReservedHomeownerSMEs or StakeholdersArchitects analogyArchitectInstructional DesignerContractorElearning developerHVACCarpenterLandscapeGraphics / Visual DesignProgrammerAudio/Video 2015 NuggetHead Studioz, LLC., All Rights ReservedArchitects analogy

16BenefitsYour most powerful collaborative tool for a team designing and developing eLearning.

A contextual map outlining flow of instruction.

Used as a guide in the project management of an eLearning course.

Course management for post eLearning edits and maintenance. 2015 NuggetHead Studioz, LLC., All Rights ReservedWhy do you suppose the storyboard is not used as much in a creative industry such as ours? 2015 NuggetHead Studioz, LLC., All Rights Reserved

2015 NuggetHead Studioz, LLC., All Rights Reserved19

2015 NuggetHead Studioz, LLC., All Rights Reserved20What does storyboarding mean to you as it applies to elearning?to Storyline?Storyline does NOT come packaged with design skills.We need to think differently in order to design differently.Elements of User Experience

March 2000Jesse James Garretthttp://jjg.net/iaElements of User Experience

StrategyIs where it all begins: What do we want to get out of the site? What do our users want?ScopeTransforms strategy into requirements: What features will the site need to include?StructureGives shape to scope: How will the pieces of the site fit together and behave?SkeletonMakes structure concrete: What components will enable people to use the site?SurfaceBrings everything together visually: What will the finished product look like?EXERCISE 1a:How do these elements apply to an elearning project?StrategyScopeStructureSkeletonSurfaceEXERCISE 1aStrategyWhat do we want to get our users do after completing this course?ScopeWhat is the learning path? Will we need a branching scenario? Interactions? Will there be media?StructureHow will the course navigate? Exploratory or Linear? How will the overall navigation behave?SkeletonWhat components will enable people to use the course? Type of buttons? Desktop, Mobile, or both?SurfaceWhat will the finished course look like? Standard user interface or custom? Branding guidelines?

Elements of User Experience as it applies to Storyboards and Storyline

Storyboarding to StorylineSTRUCTUREIntroScreen OneObjectivesInteractionScreen TwoSummary

Word documentFlowchartPowerPoint slidesSophisticated templateStoryboarding SoftwareSKELETON Storyline Player settings

SURFACE look and feel

EXERCISE 1b:How about now? Add to your previous list.StrategyScopeStructureSkeletonSurfaceVisual StoryboardIntroScreen OneObjectivesInteractionScreen TwoSummaryThe Structure123?3.13.23.3VVV?PF!4?iGXGLOBALi = Help / FAQG = GlossaryR = ResourcesX = Exit? = Assess! = ResultsV = VideoP = PassF = Fail# = SequenceLEGENDR34Visual Storyboarding - StructureDEMOSEXERCISE 2:Sketch out the following ideas into a visual storyboardHow to Make a Peanut Butter and Jelly SandwichHistory of Jazz (or Blues, or Bluegrass) in the American SouthInteractive Guide to Making Great CoffeeUser Guide for First-Time DevLearn AttendanceThink design not development. Think about user experience, navigational flow and interactivity. Dont worry about what Storyline can or cant do at this point. Be creativethis is part of the design phase.BREAKCoffee time!Template time!Storyboard templates: MS Word vs. MS PowerPoint

Quiz template

Narration script template

Style Guide

Project TimelineYour Mission: Zombie Survival GuideYouve been asked to do some preliminary designs and build a prototype for a local Emergency Management Agency

They want to help their citizens be better informed.

They want to help their citizens develop survival kits for a zombie apocalypse.

They want the design to be exploratory and interactive

Your Mission: Learning ObjectivesUsers should be able to identify, list, and track major/minor items to include in an emergency kitUsers should be able to establish an emergency planUsers should be able to plan family emergency contact and contingency plansUsers should know how to stay informedUsers should have a security plan to protect themselves from a Zombie attack!

User parametersUsers are citizens aged 18-64, and all citezens have mobile devices (either smartphone or tablet)

Your Mission: DisclaimerYou may source placeholder images/graphics from major stock photo sites by downloading comp images.

You may download placeholder images/graphics from Google. If you do it is for training purposes ONLY. This project may not be repurposed in any way with borrowed Google images/graphics.

You may source placeholder images from Flickr. If you do intend on repurposing this project ensure images are CC and artist attribution is given.RESOURCEShttp://beprepared.com/http://www.cdc.gov/phpr/zombies.htmhttp://www.ready.gov/EXERCISE 3:Plan you Zombie Preparedness KitSee folder: 05-Content_Zombie-Preparedness-Kit1-Zombie-Preparedness_Your-Mission.pptx2-Zombie-Preparedness_Content1.pptx

See subfolder: Sample Emergency Preparedness for inspiration

See subfolder: assets for images, audio and of course, Zombies

See folder: 04-Resources for additional content from CDC.LUNCHLunch time!Transferring your plan to Story ViewStoryline time!KITPLANINFORMEDFoodWaterPLANFamily CommunicationPLANFamily DisasterRESOURCESEXERCISE 4:Layout your plan in Story View.

Add basic navigation and functionality

Youre building a working model of your planBREAKCookie time!Client: I have new content for you. Please add to the project

You: Umokay.New ContentEXERCISE 5:Add new content to your Zombie Preparedness KitSee folder: 05-Content_Zombie-Preparedness-Kit2-Zombie-Preparedness_Content2.pptx

See subfolder: Sample Emergency Preparedness for inspiration

See subfolder: assets for images, audio and of course, Zombies

See folder: 04-Resources for additional content from CDC.NOTE: If you are uncomfortable about guns, be aware the subfolder assets > weapons there are images of gunsyou know, for security against Zombies!Whats your new plan?New ContentINFORMEDFoodWaterKITPLANPLANFamily CommunicationPLANFamily DisasterRESOURCESShelterGearSURVIVALSECURITYSECURITYWeaponsSECURITYSecurity PlanEXERCISE 6:Finalize your project for stakeholder reviewSee folder: 03-TemplatesReview-and-Tracking_temlate.xlsx

Set up the tracking sheet to match your Scenes and Slides in StorylineAdd PPT reference numbersAdd Storyline slide numbersAdd Storyline slide titles

You want to ensure the sheet is as clear as possible for your stakeholder to read.EXERCISE 7:Match Up! Stakeholder review time!Two from one table/team swap with two from another table/team

Take turns looking at and reviewing the project as stakeholder and then as designer/developer.

As the stakeholder, fill in the tracking sheet for the designer/developer. Be clear with actionable changes/edits.REVIEWA brief history and introduction to storyboardsStoryboarding to Storyline: What does that mean?Elements of User Experience DesignVisual StoryboardsStoryboard templatesStoryboarding raw contentDocumenting, preparing, and transferring your plan to Story ViewClient/Customer adds new content!Tips & Techniques for managing change during the dev processReview and Tracking changesWRAP!