Interactive Project Management Workshop

1. PROJECT MANAGING INTERACTIVE with Shelley SimmonsTuesday, 4 December, 12

2. HI, I’M SHELLEY Content Producer marblemedia shelley@marblemedia.comTuesday, 4 December, 12

3. GROUND RULES • Cell phones: Prefer them off • iPads/computers: Welcome • Lay of the land: Bathrooms around the corner • Wiﬁ connection: “socialinnovation” (open network) • Ask questions along the wayTuesday, 4 December, 12

4. AGENDA • Intros • Project Management Tools • Presentation • Designing your project • 11am Bio Break • 2.30pm Bio Break • Project Plan Workshop • Design Workshop • 12.30pm Lunch • Review • 4pm Guest: Lesley Phord- Toy, UbisoftTuesday, 4 December, 12

5. NAME - BACKGROUND - PROJECTTuesday, 4 December, 12

6. Tuesday, 4 December, 12

7. Test 1Tuesday, 4 December, 12

8. GatewayTuesday, 4 December, 12

9. TEST 2Tuesday, 4 December, 12

13. KEY STAGES 1. Design 7. Final revisions 2. Wires 8. Bug testing 3. Mock-ups and writing 9. Sound layering 4. Technical build 10. Beta 5. Alpha 11. Launch 6. User testingTuesday, 4 December, 12

14. Tuesday, 4 December, 12

15. GOAL • What are you trying to achieve with your project • “To create a buzz for a new show launching in the US with not- so-famous actors, we want to create a prequel ARG-type experience with a psychological twist that aligns with the premise of the show”Tuesday, 4 December, 12

16. USER SCENARIOS • Write up of the user experience from a user perspective • “Users will go to byzantiumsecurity.com and will be drawn down a rabbit hole by clicking on the pop up, the in-link like ‘carefully vetted’ or will see the URL after the corporate video”Tuesday, 4 December, 12

17. USER FLOW • System map, start to ﬁnish • Programs: OmnigrafﬂeTuesday, 4 December, 12

18. STORYBOARDSTuesday, 4 December, 12

19. FLOW CHART • Information architecture • High level snapshot of your info • Navigation necessityTuesday, 4 December, 12

20. MOOD BOARDSTuesday, 4 December, 12

21. RESEARCH Any other projects like yours?Tuesday, 4 December, 12

22. BUILD YOUR TEAM Multi-talented - Breakdown by skill - Build trustTuesday, 4 December, 12

24. WIRE FRAMES • Outlines key functionality • Placeholder imagery, writing, if anything • Programs: Omnigrafﬂe or FREE: balsamiq (online)Tuesday, 4 December, 12

25. KEY STAGES 1.Design 7.Final revisions 2.Wires 8.Bug testing 3.Mock-ups and writing 9.Sound layering 4.Technical build 10.Beta 5.Alpha 11.Launch 6.User testingTuesday, 4 December, 12

26. MOCK UPS • Built on wireframes • As ﬁnal as possible before building • Blueprints, like building a houseTuesday, 4 December, 12

27. SCRIPTS AND COPY • One master document • Includes every word: buttons, next, help, intro, dialogue..any piece of text.Tuesday, 4 December, 12

28. UI BIBLE • Roll-overs • Buttons • Animations • Transitions • Loading sequences etc. • Visual messagingTuesday, 4 December, 12

30. HUNTED TECHNICAL • Predominantly Flash • Test 1: HTML, Test 2-5: Flash • 5 APIs (Facebook, Reddit, Moderation, Facial Recognition, Get Glue) • Share • DatabasesTuesday, 4 December, 12

31. TECHNICAL PARAMETERS • Deﬁnes the creative • Deﬁned by features, functionality and other platforms • Flash vs html • Mobile, tablet, desktopTuesday, 4 December, 12

33. ALPHA • Different deﬁnitions • All functionality with placeholder • All prototypes and pieces come together • Rough, but can understand the entire functionalityTuesday, 4 December, 12

35. USER TESTING • Include time to adjust project after testing • One on one vs group testing • Impartial tester, best if they are familiar with project • Make time for revisionsTuesday, 4 December, 12

36. SIGN OFF • Give yourself time to review with stakeholders • There are always changes • 20% ContingencyTuesday, 4 December, 12

38. BUG TESTING 1.What was the bug 2.How did you get there 3.What did you expect to happen 4.What happened instead 5.Platform and browser versions • Mantis, Redmine or BugNotes (free)Tuesday, 4 December, 12

40. SOUND LAYERING • Goes a long way • Best done at the end • Subtle • Sound on/off • File sizeTuesday, 4 December, 12

42. BETA • Final tweaks • Final imagery, copy, content • Staging server vs production ServerTuesday, 4 December, 12

44. LAUNCHTuesday, 4 December, 12

46. PROJECT PLANNING WORKSHOP • With a partner • Create a plan for one of your projects • Including the key stages from previous slide • Consider your unique creative requirements • Very rough Gantt ChartTuesday, 4 December, 12

47. WIRE FRAMING • Consider the size of your screen • Box in your content • Think through your experience • Can pick a part of the project to frame outTuesday, 4 December, 12

48. AGILE • Short development cycles • Daily stand-up meetings • Prototyping smaller chunks • Iterative, incremental, reactionaryTuesday, 4 December, 12

49. DESIGN WORKSHOP • Choose one of the methodologies to develop your concept • Strongly recommend Wire Frames • Otherwise, User Flow, Scenarios, Story board, Mood boardTuesday, 4 December, 12

50. MORE RESOURCES • Check out Kirsten Hunter’s presentation for other great resources and ways to break down interactive projects. There are LOADS of online resources in her presentation. • http://www.slideshare.net/ProjectFactoryUK/x-summit-super- producer#btnNextTuesday, 4 December, 12