Interactive Project Management Workshop

PROJECT MANAGINGINTERACTIVE

with Shelley Simmons

Tuesday, 4 December, 12

HI, I’M SHELLEYContent Producer

marblemediashelley@marblemedia.com

Tuesday, 4 December, 12

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

AGENDA

• Intros

• Presentation

• 11am Bio Break

• Project Plan Workshop

• 12.30pm Lunch

• Project Management Tools

• Designing your project

• 2.30pm Bio Break

• Design Workshop

• Review

• 4pm Guest: Lesley Phord-Toy, Ubisoft

Tuesday, 4 December, 12

NAME - BACKGROUND - PROJECT

Tuesday, 4 December, 12

Tuesday, 4 December, 12

Test 1

Tuesday, 4 December, 12

Gateway

Tuesday, 4 December, 12

TEST 2

Tuesday, 4 December, 12

TEST 3

Tuesday, 4 December, 12

TEST 4

Tuesday, 4 December, 12

TEST 5

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

Tuesday, 4 December, 12

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

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

USER FLOW

• System map, start to finish

• Programs: Omnigraffle

Tuesday, 4 December, 12

STORYBOARDS

Tuesday, 4 December, 12

FLOW CHART

• Information architecture

• High level snapshot of your info

• Navigation necessity

Tuesday, 4 December, 12

MOOD BOARDS

Tuesday, 4 December, 12

RESEARCHAny other projects like yours?

Tuesday, 4 December, 12

BUILD YOUR TEAMMulti-talented - Breakdown by skill - Build trust

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

WIRE FRAMES

• Outlines key functionality

• Placeholder imagery, writing, if anything

• Programs: Omnigraffle or FREE: balsamiq (online)

Tuesday, 4 December, 12

KEY STAGES

1.Design

2.Wires

3.Mock-ups and writing

4.Technical build

5.Alpha

6.User testing

7.Final revisions

8.Bug testing

9.Sound layering

10.Beta

11.Launch

Tuesday, 4 December, 12

MOCK UPS

• Built on wireframes

• As final as possible before building

• Blueprints, like building a house

Tuesday, 4 December, 12

SCRIPTS AND COPY

• One master document

• Includes every word: buttons, next, help, intro, dialogue..any piece of text.

Tuesday, 4 December, 12

UI BIBLE

• Roll-overs

• Buttons

• Animations

• Transitions

• Loading sequences etc.

• Visual messaging

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

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

TECHNICAL PARAMETERS

• Defines the creative

• Defined by features, functionality and other platforms

• Flash vs html

• Mobile, tablet, desktop

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

ALPHA

• Different definitions

• All functionality with placeholder

• All prototypes and pieces come together

• Rough, but can understand the entire functionality

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

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

SIGN OFF

• Give yourself time to review with stakeholders

• There are always changes

• 20% Contingency

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

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

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

SOUND LAYERING

• Goes a long way

• Best done at the end

• Subtle

• Sound on/off

• File size

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

BETA

• Final tweaks

• Final imagery, copy, content

• Staging server vs production Server

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

LAUNCH

Tuesday, 4 December, 12

KEY STAGES

1. Design

2. Wires

3. Mock-ups and writing

4. Technical build

5. Alpha

6. User testing

7. Final revisions

8. Bug testing

9. Sound layering

10. Beta

11. Launch

Tuesday, 4 December, 12

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

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

AGILE

• Short development cycles

• Daily stand-up meetings

• Prototyping smaller chunks

• Iterative, incremental, reactionary

Tuesday, 4 December, 12

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

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