Workshop through WIFT on Interactive Production and Project management.

1. PROJECT MANAGING
INTERACTIVE
with Shelley Simmons
Tuesday, 4 December, 12

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

3. GROUND RULES
• Cell phones: Prefer them off
• iPads/computers: Welcome
• Lay of the land: Bathrooms around the corner
• Wifi connection: “socialinnovation” (open network)
• Ask questions along the way
Tuesday, 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, Ubisoft
Tuesday, 4 December, 12

5. NAME - BACKGROUND - PROJECT
Tuesday, 4 December, 12

6. Tuesday, 4 December, 12

7. Test 1
Tuesday, 4 December, 12

8. Gateway
Tuesday, 4 December, 12

9. TEST 2
Tuesday, 4 December, 12

10. TEST 3
Tuesday, 4 December, 12

11. TEST 4
Tuesday, 4 December, 12

12. TEST 5
Tuesday, 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 testing
Tuesday, 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 finish
• Programs: Omnigraffle
Tuesday, 4 December, 12

18. STORYBOARDS
Tuesday, 4 December, 12

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

20. MOOD BOARDS
Tuesday, 4 December, 12

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

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

23. 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 testing
Tuesday, 4 December, 12

24. WIRE FRAMES
• Outlines key functionality
• Placeholder imagery, writing,
if anything
• Programs: Omnigraffle 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 testing
Tuesday, 4 December, 12

26. MOCK UPS
• Built on wireframes
• As final as possible before
building
• Blueprints, like building a
house
Tuesday, 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 messaging
Tuesday, 4 December, 12

29. 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 testing
Tuesday, 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
• Databases
Tuesday, 4 December, 12

31. TECHNICAL PARAMETERS
• Defines the creative
• Defined by features,
functionality and other
platforms
• Flash vs html
• Mobile, tablet, desktop
Tuesday, 4 December, 12

32. 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 testing
Tuesday, 4 December, 12

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

34. 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 testing
Tuesday, 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 revisions
Tuesday, 4 December, 12

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

37. 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 testing
Tuesday, 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

39. 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 testing
Tuesday, 4 December, 12

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

41. 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 testing
Tuesday, 4 December, 12

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

43. 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 testing
Tuesday, 4 December, 12

44. LAUNCH
Tuesday, 4 December, 12

45. 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 testing
Tuesday, 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 Chart
Tuesday, 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 out
Tuesday, 4 December, 12

48. AGILE
• Short development cycles
• Daily stand-up meetings
• Prototyping smaller chunks
• Iterative, incremental,
reactionary
Tuesday, 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 board
Tuesday, 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#btnNext
Tuesday, 4 December, 12