PROJECT MANAGING                             INTERACTIVE                              with Shelley SimmonsTuesday, 4 Decem...
HI, I’M                   SHELLEY                   Content Producer                     marblemedia                     s...
GROUND RULES    • Cell         phones: Prefer them off    • iPads/computers: Welcome    • Lay        of the land: Bathroom...
AGENDA    •   Intros                  •   Project Management Tools    •   Presentation            •   Designing your proje...
NAME - BACKGROUND - PROJECTTuesday, 4 December, 12
Tuesday, 4 December, 12
Test 1Tuesday, 4 December, 12
GatewayTuesday, 4 December, 12
TEST 2Tuesday, 4 December, 12
TEST 3Tuesday, 4 December, 12
TEST 4Tuesday, 4 December, 12
TEST 5Tuesday, 4 December, 12
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
Tuesday, 4 December, 12
GOAL    • What                are you trying to achieve with your project    • “To create a buzz for a new show launching ...
USER SCENARIOS    • Write               up of the user experience from a user perspective    • “Users will go to byzantium...
USER FLOW    • System              map, start to finish    • Programs: OmnigraffleTuesday, 4 December, 12
STORYBOARDSTuesday, 4 December, 12
FLOW CHART    • Information          architecture    • High           level snapshot of your        info    • Navigation  ...
MOOD BOARDSTuesday, 4 December, 12
RESEARCH                          Any other projects like yours?Tuesday, 4 December, 12
BUILD YOUR TEAM                          Multi-talented - Breakdown by skill - Build trustTuesday, 4 December, 12
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
WIRE FRAMES    • Outlines            key functionality    • Placeholder            imagery, writing,        if anything   ...
KEY STAGES    1.Design                   7.Final revisions    2.Wires                    8.Bug testing    3.Mock-ups and w...
MOCK UPS    • Built         on wireframes    • As    final as possible before        building    • Blueprints, like      bu...
SCRIPTS AND COPY    • One           master document    • Includes   every word: buttons, next, help, intro, dialogue..any ...
UI BIBLE    • Roll-overs    • Buttons    • Animations    • Transitions    • Loading              sequences etc.    • Visua...
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
HUNTED TECHNICAL    • Predominantly               Flash    • Test         1: HTML, Test 2-5: Flash    • 5 APIs            ...
TECHNICAL PARAMETERS    • Defines              the creative    • Defined     by features,        functionality and other    ...
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
ALPHA    • Different           definitions    • All  functionality with        placeholder    • All prototypes and pieces  ...
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
USER TESTING    • Include   time to adjust        project after testing    • One     on one vs group        testing    • I...
SIGN OFF    • Give           yourself time to review with stakeholders    • There               are always changes    • 20...
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
BUG TESTING    1.What was the bug    2.How did you get there    3.What did you expect to happen    4.What happened instead...
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
SOUND LAYERING    • Goes            a long way    • Best          done at the end    • Subtle    • Sound               on/...
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
BETA    • Final         tweaks    • Final         imagery, copy, content    • Staging             server vs production    ...
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
LAUNCHTuesday, 4 December, 12
KEY STAGES    1. Design                  7. Final revisions    2. Wires                   8. Bug testing    3. Mock-ups an...
PROJECT PLANNING                              WORKSHOP    • With            a partner    • Create              a plan for ...
WIRE FRAMING    • Consider               the size of your screen    • Box          in your content    • Think             ...
AGILE    • Short               development cycles    • Daily          stand-up meetings    • Prototyping              smal...
DESIGN WORKSHOP    • Choose              one of the methodologies to develop your concept    • Strongly            recomme...
MORE RESOURCES    • Check    out Kirsten Hunter’s presentation for other great        resources and ways to break down int...
Upcoming SlideShare
Loading in …5
×

Interactive Project Management Workshop

953 views

Published on

Workshop through WIFT on Interactive Production and Project management.

Published in: Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
953
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Interactive Project Management Workshop

  1. 1. PROJECT MANAGING INTERACTIVE with Shelley SimmonsTuesday, 4 December, 12
  2. 2. HI, I’M SHELLEY Content Producer marblemedia shelley@marblemedia.comTuesday, 4 December, 12
  3. 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 wayTuesday, 4 December, 12
  4. 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. 5. NAME - BACKGROUND - PROJECTTuesday, 4 December, 12
  6. 6. Tuesday, 4 December, 12
  7. 7. Test 1Tuesday, 4 December, 12
  8. 8. GatewayTuesday, 4 December, 12
  9. 9. TEST 2Tuesday, 4 December, 12
  10. 10. TEST 3Tuesday, 4 December, 12
  11. 11. TEST 4Tuesday, 4 December, 12
  12. 12. TEST 5Tuesday, 4 December, 12
  13. 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. 14. Tuesday, 4 December, 12
  15. 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. 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. 17. USER FLOW • System map, start to finish • Programs: OmnigraffleTuesday, 4 December, 12
  18. 18. STORYBOARDSTuesday, 4 December, 12
  19. 19. FLOW CHART • Information architecture • High level snapshot of your info • Navigation necessityTuesday, 4 December, 12
  20. 20. MOOD BOARDSTuesday, 4 December, 12
  21. 21. RESEARCH Any other projects like yours?Tuesday, 4 December, 12
  22. 22. BUILD YOUR TEAM Multi-talented - Breakdown by skill - Build trustTuesday, 4 December, 12
  23. 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 testingTuesday, 4 December, 12
  24. 24. WIRE FRAMES • Outlines key functionality • Placeholder imagery, writing, if anything • Programs: Omnigraffle or FREE: balsamiq (online)Tuesday, 4 December, 12
  25. 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. 26. MOCK UPS • Built on wireframes • As final as possible before building • Blueprints, like building a houseTuesday, 4 December, 12
  27. 27. SCRIPTS AND COPY • One master document • Includes every word: buttons, next, help, intro, dialogue..any piece of text.Tuesday, 4 December, 12
  28. 28. UI BIBLE • Roll-overs • Buttons • Animations • Transitions • Loading sequences etc. • Visual messagingTuesday, 4 December, 12
  29. 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 testingTuesday, 4 December, 12
  30. 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. 31. TECHNICAL PARAMETERS • Defines the creative • Defined by features, functionality and other platforms • Flash vs html • Mobile, tablet, desktopTuesday, 4 December, 12
  32. 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 testingTuesday, 4 December, 12
  33. 33. ALPHA • Different definitions • All functionality with placeholder • All prototypes and pieces come together • Rough, but can understand the entire functionalityTuesday, 4 December, 12
  34. 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 testingTuesday, 4 December, 12
  35. 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. 36. SIGN OFF • Give yourself time to review with stakeholders • There are always changes • 20% ContingencyTuesday, 4 December, 12
  37. 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 testingTuesday, 4 December, 12
  38. 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. 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 testingTuesday, 4 December, 12
  40. 40. SOUND LAYERING • Goes a long way • Best done at the end • Subtle • Sound on/off • File sizeTuesday, 4 December, 12
  41. 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 testingTuesday, 4 December, 12
  42. 42. BETA • Final tweaks • Final imagery, copy, content • Staging server vs production ServerTuesday, 4 December, 12
  43. 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 testingTuesday, 4 December, 12
  44. 44. LAUNCHTuesday, 4 December, 12
  45. 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 testingTuesday, 4 December, 12
  46. 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. 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. 48. AGILE • Short development cycles • Daily stand-up meetings • Prototyping smaller chunks • Iterative, incremental, reactionaryTuesday, 4 December, 12
  49. 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. 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

×