The Digital Creative Process

The Digital Creative Process.

1. Introduction

2. Website overview

3. Initiate

4. Create

5. Develop

6. Launch

7. Online ads overview

Introduction

I created this process document to inform and help the staff at the globalmedia company I have recently been working at, in the role of Digital CreativeServices Director. It is a very tried and tested process evolved over many yearsworking with some of the top agencies in our industry. To be blunt, it works.

That is of course not to say that there are not other processes andmethodologies that are equally as beneficial and may suit your project better.There are. The ‘Agile’ way of working for instance. My process here will workto keep inexperienced teams and clients on track and can of course be utilisedby more senior teams and for large projects to. It is a summary though andnot intended as a tell all teaching aid of course!

The online advertising process can be very similar to the website one and thushas the same breakdown of responsibilities as for websites.

Web design and build process

Web design & build process overview

e.g.Duration: 1-2 weeks

Work streams

• Initiation / kick-off• Project initiation(internal and client)• SOW agreement•Set KPI’s

• Fact finding• Survey• Information audit• Asset receipt

• Project planning• Project plan• Media planning• Initial briefing

Duration: 3-4 weeks

Work streams

• Further requirementsmeets & creativeinspiration

• Creative brief

•Informationarchitecture

• Sitemaps /wireframes

•Update SOW & signoff

•Design concepts• Home + section

•Documentation•Functional spec•Technical spec• Testing plan

Duration: 6-8 weeks

Work streams

• Design realisation

•Design templates

• Interface dev• XHTML / CSS• QA rounds

• Site build• Functionaldevelopment• Databases etc

•Testing• Interface testingand design proofing• Internal testing• UAT testing

Duration: 1-2 weeks

Work streams

• Deployment

• Deploy to hostedenvironment

• Final QA testing

• Domain switch

• Live

Key outputs• PID / SOW / KPI’s• Media plan•Contract & budget• Project plan

Key outputs• Creative brief• IA / Updated SOW• Design concepts• Specifications

Key outputs•Design templates•Dev iterations fortesting•Website into UAT

Key outputs• Deployed, signedoff & live

Initiate Create Develop Launch

Initiate – stage 1

This is our initiation stage and commences the project in a structured but stimulatingfashion. The aim is to encourage participation and enthusiasm within the agency andthe client, as well as to define the important initial project details, prior to beginningthe project itself.

Work package Responsibility Involvement Description Key outputs

Internal Initiation AD -Agency team, Inspirational kick-off. Covers all

known aspects of project so far

and the process. Encourages

ownership and foresees risk.

Also involves the creative

thinking / workshops.

-Internal plan

-Client initiation

presentation

Client Initiation AD -Agency team,

-Clients

Client kick-off. Defines process

to be followed, key dates and

stakeholders. Agree scope.

-Any amends to dates

and process agreed

Fact finding Producer -Planning and IA

teams

- Agency team

-Clients

This can take many forms but

will usually be a content and

asset audit, surveys and initial

requirements workshops.

-Existing content /

assets agreed

-Requirements

gathering plan

SOW / Contracts /

Costs / KPI’s

Producer (for

SOW) / AD

-Clients

- Agency team

Agree the scope of work, finalise

and sign contracts and agree

costs (or budget range)

-Agreed SOW

-Signed contract

-Costs

Planning Producer / AD - Agency team Finalised project plan to be

produced and agreed. PID also

to be produced if relevant and

any media plans.

-Project plan

-Project initiation doc

(PID)

-Media plan

Initiate – stage 1 output examplesInitiation – Betty Crocker client initiation presentation

Note that the ‘scope of work’ on the agenda below will be largely going over theoriginal client brief and the proposal (if applicable). We are setting the stage for theproject here and have a good idea of what is required, but this is nowhere near set instone and the scope can change dramatically before we finally have the proper projectSOW document agreed.

Initiate – stage 1 output examples

Scope of Work document

.• Vital to be agreed before moving into the Create stage.

• Can include information architecture and design work from the proposal as thisexample does, but the scope informs the next stage of evolving these or often theircreation from scratch.

• All scope changes should be managed via a change control process.

• Testing / QA plans to be created from the SOW & strictly followed in the QA partsof the project.

• Larger projects will have functional & technical specifications produced based onthe SOW but which are far more detailed and supersede the SOW.

Initiate – stage 1 output examples

Master project plan

.

Initiate - Key points

• Do not set budgets & deadlines before the internal & client initiations (kick-offs). If you dothen you risk limiting the scope, creativity, number of design concepts etc not to mentionthe huge risk of putting yourself up against a very difficult deadline.

• Conduct a structured internal initiation before the client initiation.

• Ensure that roles and responsibilities between all parties are defined at the outset. Havejust one point of contact in the main for your agency, the client and any external thirdparties working with you.

• The main point of contact at your Agency team must be in a project management /producer role and NOT the designer or developer.

• Set weekly / fortnightly internal and client meetings at the outset.

• Agree the Scope of Work / Specification before any design or development work begins.This greatly helps to avoid things being missed by the web team.

• There is an over-reliance on emails to communicate desired changes. Try to meet face toface and use a change control form that can then be signed off and the SOW updated.Introduce the change control process and stress the importance of adhering to the SOW tothe client at th

• Always produce a detailed project plan & present this face to face with the client toensure that they understand what is going to happen, their responsibilities & the impacts ifthey do not stick to the schedule.

Create – stage 2

Where the creative thinking and conceptual work comes in. We have our project base set socan now get stuck into the fun and interesting stuff. There are still some requirementsfinalisation to attend to of course but we are underway now.


Further requirements

workshops & creative

inspiration forum.

Producer -Agency team

-Clients

Will vary from project to project

but here we are detailing the

signed off requirements further

if need be. Note that this may

have been covered in full within

stage 1 ‘fact finding’, but scope

can change & needs to be

tightly controlled.

-Planned outputs

such as content

matrix, site functions,

creative definition

Client Creative brief Client -AD / Producer

-Agency team

These should be written by the

client and not be a ‘reverse’

brief. This may lead to an

enhanced internal brief from the

producer / creative director.

-Signed off brief

Information

architecture

Producer / IA -AD

- Client

Creation of sitemaps, user

journeys and wireframes. Digital

producer / IA to do with input.

-Sitemap

-User journeys

-Wireframes

Design concepts Producer -AD / CD

- Client

Design concept iterations,

usually involving 2 to 3

concepts, review and amends

before sign off

-Signed off concepts

(e.g. home page and

section pages)

Documentation Producer -Developers

- AD

- Client

Digital production of functional

and technical specs based on

the requirements and IA

-Functional spec

-Technical spec

Create – stage 2 output examples

Information architecture - sitemap

.


Information architecture – Home Page wireframe

.


Design iterations – 1st iteration in concept phase.

.


Design iterations – Final concept work.

.

Create - Key points

• Ideally, do not begin this stage until the Initiate stage has been closed.

• Have as many of the team involved in workshops.

• The Creative Brief should be written by the client based on an Agency team producedtemplate. Reverse briefs are not ideal. Most agencies will have a briefing questionnaire thatcan be discussed direct with the client to help them in writing the brief. This may lead to afurther enhanced brief internally from the producer and creative director for the designteam to use.

• Information Architecture (IA) – Sitemaps and Wireframes are vital to lead both the designand functional development. Do not skip this step and do present the IA face to face,ensuring the client understands what these elements mean and how they dictate the nextsteps.

• Design concepts – agree how many will be created and how many iterations will beproduced at the initiation stage and document in the Scope. Usually you will agree tocreate 2 to 3 concepts with one of these chosen to be taken forward into to more iterations(or review and enhancement periods). Be as strict as you can on this or you will findyourself 2 months down the track on your tenth iteration.

• Present design concepts face to face and ideally with the designer who created them, orat least the Creative Director. The designer (or CD) will be best placed to explain theircreative thinking and benefit greatly in receiving the feedback, emotion and reactions firsthand.

Develop – stage 3

The actual build of the site, application and / or online advertising. We will complete theagreed design templates and imagery / illustration digital production and have these signedoff. The build will then move into actual development and a thorough quality assurance stage.


Design realisation Producer - Designer / CD

- Client

Creation of the agreed number

of design templates. These will

be main section pages,

generic pages & specific

pages such as an entry form.

-Design templates

-Imagery

-Illustrations

Interface

development

Producer - Developers

- QA

Front end interface

development in XHTML / CSS.

Ensures design integrity,

browser compatibility, usability

and accessibility.

-XHTML and CSS

templates

(thoroughly tested)

Site build Producer - Developers

- QA

The actual site build, whether

this be a flash or CMS driven

site. Involves rounds of

properly scheduled QA /

testing to an agreed test plan.

-Completed site

ready for final QA

and user acceptance

testing (UAT)

QA / testing QA manager /

Producer

- Agency team

- QA

- Client

Scheduled final QA and

amends. Covers all aspects of

the site, browsers, usability

and accessibility. Also includes

client UAT.

-Completed site

ready for live

deployment

Develop – stage 3 output examples

Design realisation – example page design jpeg templates.

.

Develop – stage 3 output examples

Quality Assurance and Testing – testing issue tracker

.

Develop - Key points

• Before you start coding the website and back-end (database and so forth) make sure thatyou have a detailed testing plan to be followed throughout the development and qualityassurance phases here. This should have been created by the project manager / producer(or, if you are really lucky, an actual test manager) at the Create stage, based on the Scope.

• Make sure that they use issue tracking software such as the Gemini Issue Tracker on theprevious slide.

• Make sure that adequate time has been set aside for reviews, amends and full testing.The temptation is often to eat into testing time if budgets and timings require there to beless of some task or other but this is really bad.

• It is better to push back the live date to allow for proper testing, amends and re-testingthan to go live with harmful and possibly critical bugs.

• Ensure the agency has the ability to test across all modern Operating Systems (i.e.Windows, Mac , Linux etc) and browsers (IE6, 7, 8, Firefox, safari etc.) There is nothingworse than a client using IE 6 noticing a major bug that does not exist on the more up todate browsers that the Agency team use. This happens more often than you would think.

• Ensure the client knows what their role in testing is and what they are testing for. Theyshould sign off that they are happy with everything and have tested thoroughly before thestaging site is deployed to live and then again before it is set live.

Develop - Key points (2)

• CHANGE CONTROL – Any changes to the Scope of Work should go through a thoroughchange control process that has been detailed during Initiation. Changes should beencompleted on a change request form and signed off by the agency and the client. TheScope of Work should also be updated by the producer.

• Changes during development should be designated as essential for live or scheduled fora further phase after live. The more changes during development in the run up to live youhave the more risk of errors there are.

• REMEMBER – a change request can impact both the design and layout of the website aswell as the coding and back-end. A seemingly small change can have a big impact, involveseveral skill sets and will always require re-testing. And possibly re-testing of the wholewebsite.

• Design realisation – The Information Architecture will dictate how many design templatesfor the site sections, forms, generic and certain non-generic pages. Ensure these aresigned off before going into development.

Launch – stage 4

Final deployment to the live environment (and staging environment). Further QA and testingis required with any amends completed. Also includes the finalisation and implementation ofoverall launch strategy.


Deployment Producer /

Development

manager

-Development

team

-3rd party host (if

applicable)

Deployment to the live

environment (which should

have been put in place at

the start of the project)

-Deployed site

ready for QA

Final QA / testing Producer / QA

manager

- Agency team

- QA

- Client

The site is now on the live

environment and will need

a final thorough phase of

testing

-Signed off site for

live

Live Producer -Agency team

-Clients

Time to switch live. Domain

name changes etc should

have been actioned

beforehand. This is done

by the Agency team but the

Producer has to give the go

ahead based on internal

and client sign-off.

-Site set live

-Post live plan

commences

-Post project review

Launch - Key points

• Ensue that the staging and live environments are set up at the outset of the project andnot left until the last minute.

• Define who controls the domain name and has responsibility for instructing the switchingof this in order to make the website live. Note this can take up to 24 hours and shouldideally be in client control. Though lack of technical knowledge will probably mean that theAgency team requests the actual switch once the client has signed off the site for live.

• The DNS provider (the technical company that controls the domain name i.e.yoursite.com) will need the website IP address and DNS record to switch live. Get youragency team to send this well in advance and not last minute.

• DO NOT SCRIMP AND CUT BACK ON TESTING TIMES! Once again, it is better to delay livethan put a website out there for the world to see that has bugs in it.

• Change control – remember that not all client change requests are really necessary forlive despite what they might think. Life will be more comfortable if non-essential changesare undertaken after live.

Online advertising process

Online advertising process overview

e.g.Duration: 1 week

Work streams

• Initiation / kick-off• Project initiation(internal and client)•Contract / budgetagreement

• Requirements meets

•Specification / SOW

• Project planning• Project plan• Media planning• Initial briefing

Duration: 2-3 weeks

Work streams

• Creative brief

•Ideas and content

• Storyboard /scamps

•Content plan

•Copywriting

•Design concepts• Asset delivery• Concept iterations

•Interface design•Design template•Further assetcreation incl. Video,photography etc.

Duration: 2-3 weeks

Work streams

•Interface dev• Flash development• Amends forformats

•Testing• Interface testingand design proofing• Internal testing•Developmentamends• UAT testing

Duration: 1-2 weeks

Work streams

• Deployment

• Deploy to adserving or website

• Final QA testing

• Live

Deliverables• Spec / SOW• Media plan•Contract & budget• Project plan

Deliverables• Creative brief• Scamps & content• Design concepts• Template

Deliverables• Flash ads created•Passed QA•Ready for UAT

Deliverables• Passed UAT•Passed for live•Ads launched

Initiate Create Develop Launch

Online advertising - Key points

• Have a creative and planning discussion at the outset, before setting plans and budgets.Otherwise you will miss creative and innovative opportunities by only being able to designfor the specs already booked. Run it as a proper project with the stages outlined.

• Final costs can not be produced without the plan and the specification. Don’t expect youragency team or external 3rd party design teams to be able to go through the plans andnotice every format etc they have to build. You MUST lay it out clearly in the specification.

• Try and get creative assets before costing as well. Always remember to ask for the sourcePhotoshop (PSD) file.

• What’s the clients goal? To drive sales? Inform on new features? Brand awareness? Theseaffect placement and creative.

• Like the websites and other digital media, the client should write the initial creative brief.

• Simple and clear for the ads themselves. People skim read and have ‘banner blindness’for the most part. Get to the point and give a very clear call to action and incentive to clickthrough.

• We are telling a story so when they click-through they should end up where they expecti.e. the competition entry form or the product details page. Just plonking them on thehome page is not good enough. Create tailored landing pages with the website.

• Note that on some majorly interactive sites that static banners might well work betterthan animated ones.

Thanks.

Bruce Waskett

Director - Feels like mine

[email protected]

http://www.feelslikemine.com

http://www.storybridgedigital.com

Technology

The Digital Creative Process