Havas_Digital_Production_Process

Havas Digital

Creative and Production Process

2/19/2013

This document outlines and explains the working digital development process followed by Havas Digital. This was written for the purpose of setting in place stringent measures to ensure the quality of work we deliver is reflective of who we are as a digital agency. Our ideas rely on our ability to bring our vision to life in every undertaking. Every project is a testament of our beliefs, our expertise and our credibility as true digital advocates.

Havas Digital

2

Table of Contents Table of Contents ........................................................................................................... 2 Pre-Production Process Flowchart ............................................................................................... 3 Pre-Production Process ................................................................................................................ 4

Proposal Stage .......................................................................................................................... 4 Project Scoping ......................................................................................................................... 7

Production Process Flowchart .................................................................................................... 10 Production Process ..................................................................................................................... 11

Project Kick-Off ....................................................................................................................... 11 Design Stage ........................................................................................................................... 12 Development Stage ................................................................................................................ 13 Quality Control Stage .............................................................................................................. 15 Going-Live ............................................................................................................................... 17 Introspective Knowledge Management ................................................................................. 17

Post-Production Process Flowcharts .......................................................................................... 19 Post-Production Process ............................................................................................................ 20

Post Deployment Scheduling .................................................................................................. 21 Maintenance Contracts ........................................................................................................... 21

Footnotes ................................................................................................................................... 23

Havas Digital

3

Pre-Production Process Flowchart

Proposal Stage

Project Scoping

Receive Client Brief

PRE-PRODUCTION PROCESS

Create & Send brief to Project

Manager

Allocate Resource

Creative Resource Tech Resource Project Costing

and Timings

Respond to Briefing

Document

Create & Present Proposal

Proposal Approved?

Revise based on Feedback from

Client

Create Functional Specs

documentation

FS Approval?

Proceed to Production

Revise based on Feedback from

Client

N

Y

N

Y

Present FS document to

client

PM

PM

AM

AM

PM

AMPM

AM

AM

PM

CD TD PM

AM

PM

CD

TD

Account Manager

Project Manager

Creative Director

Tech Director

Get Signed Proposal (Deal

Closed)AM

Structured brief?

Ask client to fill out RFI

N

YAM

Feasibie? Decline Project

Y

N

Alignment Meeting

AM

Arrange meeting to discuss Feasibility

PM

Havas Digital

4

Pre-Production Process

In this initial stage of the production process, we are presented with a challenge in the form of a brief from a client and from here we start proposing our plan of attack. At the Proposal Stage, we will be presenting them with our strategy, our course of action and our recommendations as digital experts. But just like any other proposed plan, the devil lies in the details. Every project has to be properly delineated and defined through Project Scoping thereby setting the expectations of project deliveries from the beginning. Proposal Stage Responsibi l ity

Receiving the Cl ient Brief

Documents Required

Account Manager

Inquiries received from the client should be structured enough to make sense out of and it is the duty of the Account Manager to keep asking intelligent questions to drill down what the client truly requires. As a guide for clients, the Request for Information (RFI) document can be sent to them to be filled out OR serve as a guide for Account Managers on what questions can be asked.

Request for Information Document

Creating the Brief

Account Manager

Part of the job of an Account Manager is creating smart and structured briefs. A brief is not merely a copy and paste version of a client’s presentation deck or email. Take the time to extract and understand what needs to be done before writing. As soon as there is a clear understanding on what the client needs, the appropriate brief should be filled out accordingly and passed on to the Project Manager. Digital Brief In the instance that the requirements are ad hoc such as landing pages, banners, eDMs….etc that have minimal design and production requirements (ex. design or codes have been supplied already and all we need to do is build), the Account Manager can fill out the Digital Brief. Remember: When filling out the digital brief, please have these questions in mind:

Request for Information Document Digital Brief

Havas Digital

5

1. What do I need and by when? 2. What details should I add to help the designer or

developer? 3. What are the technical details that a developer

needs to know? 4. What is the budget for this project?

Creative Brief If the requirement entails coming up with NEW ideas, concepts, designs, executions…. etc, then the Creative Brief should be properly filled out. As the name implies, the Creative Brief is made to INSPIRE, MOTIVATE, EXCITE, SPARK, INCITE, ENTHUSE…the Creative Team to come up with a creative idea. Remember: Behind every successful advertising campaign is a well thought of Creative Brief. Filling out a Creative Brief requires clarity, focus, consistency and creative stimulation, so please do fill this out with care.

Creative Brief

Responding to the Brief

Account Manager, Project Manager, Account Director Creative Lead, Technical Lead, Technical Director, Managing Director

Upon receipt of the brief from the Account Manager, the Project Manager starts understanding the project requirements and calls a meeting with representatives from the Client Services Team and the Production Team to discuss project feasibility. In the case of ad hoc projects, the Project Manager consults with the Creative Lead or Technical Lead of available resources to carry out the task at hand and to calculate cost and timing requirements. No meeting is required unless necessary. If the decision is to proceed with the project, the agenda to be discussed next is how to approach the brief. If the decision is to decline the project. The Account Manager should notify the client and gracefully decline stating reasons agreed. Meeting Attendance:

Havas Digital

6

• Project Manager • Account Manager • Account Director • Creative Lead • Technical Lead • Technical Director • Managing Director

Meeting Agenda:

• Project Feasibility • Resource Allocation/ Availability • Technology Approach • Creative Approach • Timings and Cost Implications

Proposal Development

Account Manager, Project Manager

After the discussions in the meeting, the Account Manager takes the lead in creating the Project Proposal with the help of the Project Manager. In the case of ad hoc projects, the Account Manager prepares the proposal based on the timings and cost given by the Project Manager and asks the client for approval before proceeding to Production stage. The proposal document should have the foundation of the Functional Specification (FS) document. The content difference between a Project Proposal and an FS document is that the proposal document contains the cost breakdown and the commercial terms of the project. After assembling the proposal, it is then shared by the Account Manager internally and should get clearance before sending it to client for approval. Should there be any amendments or feedback given by the client, the Account Manager consults the Project Manager if there will be any impact to the original scope of the proposal.

Project Proposal Document

Havas Digital

7

Project Scoping Responsibi l ity

Functional Specif ication Development

Documents Required


Once the Project Proposal is approved, the project is considered ours and it is the responsibility of the Account Manager to get the signed proposal as proof. Only at this stage that the Functional Specification document is filled out in detailed fashion. Functional Specification Document: The FS document is considered the ‘bible’ of the project. It details all aspects of the project starting from the client brief right down to the executional details, timings and post deployment requirements. Heavy-handed attention to detail is required at this stage. This cannot be emphasized enough. Tread carefully. The following are important parts of the FS Document and descriptions of each:

1. Summary & Versioning

− The first page of every FS should have a general overview of the project. The fields provided are considered mandatory and should be filled out accordingly.

− Another important aspect of the FS is versioning control. Every revision or update made should be documented for easy tracking.

2. The Brief

− The FS document begins with stating what we are trying to address. This should show details shown in the Digital Brief or the Creative Brief and even the client’s briefing document if supplied.

3. The Solution

− The biggest chunk of the FS is detailing the

proposed solution, which at this point, should have

Functional Specification Document

Havas Digital

8

been agreed upon and approved from the Proposal Stage.

− To fill out this part of the document one should start with the general concept or idea and move on to granular details on how this will be carried out throughout the course of the project.

− The fields provided serve as a guide but there is a certain frame of mind that you must have to fill out this part of the document. Here are some questions that can help you get started:

o What is the general solution/idea/concept?

o What are the campaign phases/flow/journey/roadmap to be followed to carry out this general idea?

o Define each phase/ stage. o What are the requirements in each

phase/ stage? (Website, Application, Banners…etc)

o What are the requirements per aspect? It is important to be very detailed in describing the requirements here (Sitemapa, User Flowb, Wireframesc, Content Pland, CMS Functionality, Hosting…etc)

o What needs to be managed on our end after we have delivered everything? (Serves as the PDS overview)

4. Scope of Work

− The FS should also define what would be included

and excluded in the project. The purpose of this part of the document is to give clarity to the client of our roles and responsibilities to the project.

5. Assumptions & Dependencies and Risks

− This part of the FS defines the factors that may

delay certain milestones and deliveries throughout the project. This includes approval times, rounds of revisions, feedback delays…etc. This helps in setting expectations to the client and gives them a sense of responsibility with achieving milestones.

6. Production Timings

Havas Digital

9

− These pertain to the estimated time of every

major milestone of a project with accompanying inclusions of what happens on each stage.

− Each timeframe estimate should be consulted and verified with the Project Manager.

7. Campaign Rollout Schedule

− It is here that the complete schedule of the campaign is presented through a Gantt chart. This includes production timings of each deliverable and live-dates.

8. Post Deployment Schedule (PDS)

− Another important part of the FS is the PDS, which

details the tasks and timings carried out after the project has gone live. This could be anything from Winner Announcements, Monthly Reports, posting schedules…etc.

− If reports are required, make sure to indicate the elements and the format

− Each task should be described along with the task owner and the time it needs to be delivered including the frequency (is it weekly? Daily? Monthly?).

9. Sign-Off

− The final step to complete the FS document is the

client’s sign-off, which officially gives us the go-signal to start production.

Havas Digital

10

Production Process Flowchart

QC

Development Stage

Design Stage

PRODUCTION PROCESSProject Kick

Off

Open Job in Basecamp

Add Project Milestones in Basecamp

Proceed with Design and Copy

Development

Wireframe Approval

Present Design & Copy

2 Rounds of Feedback

Design & Copy Sign-Off

Proceed to Development

Stage

HTML Development

Server-Side Development

UAT Staging (Internal)

Present & Share QC Report Internal QC Address Bugs

from Report

Bug Free?

Present Staging to Client

2 Rounds of Feedback

(WITHIN SCOPE)Address Bugs/

Issues

Get approval from Client to Go-

Live

Bug Free?

Go-Live

N

Y

N

Y

FD

SD

Front-End Developer

Server-Side Developer

QC QC Engineer

ALL

PM

PM

D Designer

D

FD

AM FD

SD

AM

UAT StagingALL

Cross Check HTML (Commit to

SVN)

Code Review (Commit to SVN)

D SD SD

ALL

QC on Live Server

ALL

FD

SD

Collect PaymentAM

Tech Kick-Off Meeting

FD

SD

QC

QC

Introspective Knowledge

ManagementHandover

ALLAM

Havas Digital

11

Production Process

The plans have been outlined and finalized, and the timings have been set. Now it’s time to put idea into action. But just like in a film set, before the director shouts, “Lights, camera…action!” the final meeting with the cast and crew before the actual shoot is critical so everyone is aware of their roles. The production process begins with a Project Kick-Off, the meeting wherein those involved in the project gathers to discuss and go over the project specifications. Only after then that the real action begins at the Design Stage where the Creative Team plays an active role. Once all artworks have been finalized and produced, it is the Developers’ turn to build the framework and the mechanism to bring the project’s vision to life. This is known as the Development Stage. But before the work goes live, a precautionary step is required called the Quality Control Stage, wherein every aspect of the project’s deliverables is scrutinized and tested by all involved. From here, the project Goes-Live once all issues have been addressed and the client gives their approval. The production process continues even after everything has been done and delivered. Just like the process of learning, every project offers a different learning experience that everyone involved can benefit from. Through an Introspective Knowledge Management meeting, the entire project is reviewed and dissected to establish Key Learnings that can be applied in all future projects. Project Kick-Off

Responsibi l ity Project Kick-Off Meeting Documents Required

Account Manager, Account Director, Project Manager, Tech Director, Tech Lead, Creative Lead, QA Lead

This meeting is attended by all who are directly involved with the project. The purpose of this meeting is to make sure that everyone is aligned with what needs to be accomplished and to familiarize themselves with each other’s roles and responsibilities. Attendance is mandatory. After the meeting, the Project Manager opens a job in Basecamp and adds everyone involved in the project. The project milestones are also added into the Calendar for everyone to see. At this point, the Account Manager should begin monitoring the project through Basecamp and the Project Manager ensures that milestones and deliveries are being


Havas Digital

12

met accordingly. Note: Basecamp will serve as an important communication tool in the entire Production Process. All feedback, files, tasks and milestones are all posted, recorded and captured here for easy tracking of a project’s status and developments.

Design Stage

Responsibi l ity Wireframe Development Documents Required

Creative Lead, Creative Team, Account Manager, Project Manager, QA Lead

Based on the design requirements, the Creative Lead maps out a Wireframe. This signals the first step of the Design Stage. A wireframe serves as a blueprint that represents a page layout. It shows the arrangement of how the content will be distributed throughout the page. This functions as a guide for the designer and to establish a front-end structure for the developers. The Wireframes need to be signed-off by the client before proceeding to the next step, Design Development. It is the role of the Account Manager to facilitate in the feedback and approval process with the client while the Project Manager ensures that feedback is addressed. At this point, the QA Lead will start developing the QC Document or the Test Case Document, which will be shared with the Client Services Team and the Developers. The QC Document lists all the elements and scenarios that need to be tested in the site or the application. This will be used primarily for User Acceptance Testing (UAT).


Design Development Creative Lead, Creative Team,

Before moving to Design Development, the Account Manager should make sure that the following assets have been shared with the Creative Team.


Havas Digital

13


− Final Artwork design files − Stock Images (provide image codes if it requires

purchasing) − Images to be used − Logos − Brand Guidelines

Upon approval of the Wireframes, its time to begin the design process. The approved blueprint will be the basis of the Screen Designs delivered by the Creative Team. Just like the Wireframes, the Screen Designs need to be signed-off by the client before entering the Development Stage. Note: The client is given 2 rounds of feedback, which should be properly monitored and enforced for by the Account Manager while the Project Manager makes sure that each point in the feedback are understood and addressed by the Creative Team.

Development Stage

Responsibi l ity HTML Development Documents Required

Creative Lead, Front-End Developer, Tech Lead, Project Manager

After the designs have been signed-off, we now enter the Development Stage and the work is now passed on to the Front-End Developer to transform the designs into HTML. HTML or Hyper Text Markup Language is the language responsible for the display of text and images in a website. Once the HTML has been developed, the Creative Lead cross checks the work produced to make sure the design is properly rendered and the correct version is applied before proceeding to Server-Side Development.


Server-Side Development Server-Side Developer, Tech Lead,

Following the completion of the HTML, the Server-Side Developer takes over although in some cases they can even start work in parallel to build the core architecture and data structure while the HTML is being developed.


Havas Digital

14

Project Manager The role of the Server-Side Developer is to build the

codes behind the functionalities of a website or an application. Once the codes have been developed and stitched together with the HTML, the Tech Lead reviews the codes to ensure proper versioning is applied before uploading the codes in a staging environment for testing.

Preliminary User-Acceptance Testing

QA Lead, Creative Lead Tech Lead, Project Manager, Account Manager

At this point, the staging environment has been set up and ready for User-Acceptance Testing (UAT), which is done through a test link provided by the Tech Lead. There are 2 levels of UAT at this stage. They are: QC Level At this level, the QA Lead uses QC Document as a guide to do the initial UAT and shares the results to the team. The bugs/ issues caught by the QA Lead are addressed either by the Creative or Tech Lead depending on the nature of each bug. Once these issues have been addressed, we now proceed to the next level of UAT. User Level The rest of those involved in the project performs the next level of UAT. These are members of the Client Servicing Team, Project Manager, Creative and Tech Leads. Using the QC Document as a guide, everyone pitches in the UAT and fills out the document with their list of bugs. All bugs/ issues need to be posted in Basecamp for easy tracking. From here the Creative and Tech Leads will take over and start addressing the bugs/ issues discovered. It is the Project Manager who coordinates with both Leads and keeps track of the issues that have been resolved or are still pending. The testing continues until all bugs/ issues have been resolved before the testing environment is shared with the client, which marks the beginning of the Quality Control Stage.

Functional Specification Document, QC Document

Havas Digital

15

Quality Control Stage

Responsibi l ity Site Staging Documents Required

QC Engineer, Creative Lead Tech Lead, Project Manager, Account Manager

The staging site is now ready to be shared with the client to obtain their feedback and approval before going-live. In here the role of the Account Manager is critical particularly when receiving feedback. There are 3 things every Account Manager should take note of when receiving feedback:

1. Validating the Feedback

− Feedback received does not automatically mean that it should be forwarded and posted in Basecamp. The feedback should be understood first and then checked if it is valid. If valid, this is the only time the feedback should be shared with the team.

2. Consolidating and Documenting the Feedback

− Giving piece-meal feedback to the team is unacceptable. Feedback should be consolidated and added either in a PPT deck or an excel sheet for easy tracking, then shared through Basecamp.

− The information given about the feedback should also be complete and understandable. It is important to include information such as type of browser used, details of how/when/why the issue came about….etc.

3. Determining whether the Feedback is out of scope

or within scope

− Not all feedback should be considered automatically. Check the scope of the feedback if it falls within the FS. If the feedback is a bug, design or copy issue, this falls within the scope but if the feedback requires new functionality changes not included in the scope, the Account Manager

QC Document

Havas Digital

16

should flag this to the client. If you are uncertain about whether it falls within or out of scope, it is best to consult with the Project Manager.

Note: Just as the in the Design Development stage, the client is given 2 rounds of feedback, which should be properly monitored and enforced for by the Account Manager while the Project Manager makes sure that each point in the feedback are understood and addressed by the Creative and Tech Leads. This time however, this only applies to non-bug related issues. If the issue is bug-related then this should be addressed accordingly. After all issues and bugs have been addressed, its time to move from the staging environment into the live environment and this will not happen unless clearance from the client has been given.

Pre-Live Checklist


Before going live, there are important details that need to be checked to make sure everything is in place and all requirements are met. Websites/ Application/ Landing Page:

− Domain Name or URL has been specified − FTP details supplied (if hosting is provided by the

client) − GA Tracking or Tracking Tools are in place − Meta Tags have been added

Banners

− Pixels or Tracking Codes have been embedded eDM

− Database has been set up − Subject Line is provided − GA Tracking or Tracking Tools are in place − Meta Tags have been added


Havas Digital

17

Going-Live

Responsibi l ity QC on Live Documents Required

QC Engineer, Creative Lead Tech Lead, Project Manager, Account Manager

Going-Live does not signal the end of the UAT. There is always the possibility of bugs cropping up in a live environment. At this stage it is the role of all those involved to continue testing, reporting and addressing bugs.


Handover

Project Manager, Account Manager

Depending on the commercial terms stated on the signed proposal, the Account Manager can now bill the client for the work done and delivered. Any revisions requested from hereon can only be considered if it is within the warranty period per contract terms. If there is no more work to be done then a Handover is in order. All digital assets delivered should be turned over to the client (Example: PSD/ FLA files, HTML Codes…etc). In cases when a CMS was built, then the Project Manager should create a CMS Guide for the client to maintain their site on their own. If there is post-deployment work to be delivered or if the signed proposal calls for maintenance services then we can proceed to Post-Production.

Signed Proposal

Introspective Knowledge Management (IKM)

Responsibi l ity Introspective Knowledge Management Documents Required

Account Manager, Account

At the end of every project a wrap-up discussion should take place and attended by the same people at the Project Kick-off. The purpose of this stage is to review


Havas Digital

18

Director, Project Manager, Tech Director, Tech Lead, Creative Lead

and highlight Key Learnings that would help us improve on future projects. During the course of the project, it is the duty of the Project Manager to observe and take notes on how improvements can be made in the process and execution of every project. The agenda for this meeting should be:

1. Project Summary and Rollout 2. Projects Highs & Lows 3. Key Learnings

The Project Manager should fill out the IKM Document after the IKM meeting and this contains introspective notes of what had occurred on each stage of the process. The results of this document should be shared with the team

IKM Document

Havas Digital

19

Post-Production Process Flowcharts

POST PRODUCTION PROCESSPost Deployment Scheduling

Post-LiveAM

PM Fill out/ edit and send PDS document

Approve PDS?

Enter schedule on Basecamp

Y

N

AM

PM

PM

Account Manager

Project Manager

Rollout PDS

Project over?

Collect PaymentAM Introspective

Knowledge Management

HandoverALLAM

Y

N

Havas Digital

20

Post-Production Process

Out of all the processes, the Post-Production Process is commonly missed out. Some projects have requirements even after it has been launched. Typically projects that have a contest component, campaign management, reporting, website maintenance will require a schedule of tasks and deliveries post-production. In this case, we will need a Post-Deployment Schedule to be followed to ensure timely delivery of all required tasks. If the task falls out of scope of the original proposal then this can be offered to the client at an added cost in which case we enter into a Maintenance Contract.

Receive Maintenance

RequestAM

PM

Account Manager

Project Manager

POST PRODUCTION PROCESSMaintenance Contracts

Create/ Edit Maintenance

Proposal AMPM

Enter schedule on Basecamp

PM

Rollout PDS

Project over?

Collect PaymentAM Introspective

Knowledge Management

HandoverALLAM

Y

N

Approved?

Y

N

Havas Digital

21

Post-Deployment Schedule

Responsibi l ity Post-Deployment Schedule Documents Required


As mentioned previously, the Post-Deployment Schedule should be included in the FS Document. The Account Manager should submit this to the Project Manager and get approval before rolling it out. The PDS should take into account the following:

1. Tasks Required 2. Dates of Delivery 3. Task Owner 4. Frequency (daily, weekly, monthly…etc)

Once the PDS has been approved, the Project Manager posts the schedule in Basecamp and makes sure that everything gets delivered on time. Once the engagement is done according to the contract, the Account Manager bills the client and proceeds to do a Handover if required. And just like all other projects, an IKM meeting is set up by the Project Manager with all involved to study and review the project highlights and extract Key Learnings.

Post-Deployment Schedule (PDS) FS Document

Maintenance Contract

Responsibi l ity Maintenance Contracts Documents Required


Should the client require us to do maintenance work post-production or want us to maintain their digital assets (websites, hosting, reporting…etc), then we can enter into a maintenance contract with them. Once the requirements from the client are gathered, the Account Manager creates a proposal outlining the tasks to be undertaken and include the PDS with it. The proposal is sent to the Project Manager to check on feasibility of timings and to give the cost. With the

Post-Deployment Schedule (PDS) Project Proposal Document (New)

Havas Digital

22

approval of the Project Manager, the Account Manager sends this to the client for approval. The approved PDS will only be rolled out upon the client’s sign-off. It is the responsibility of the Account Manager to make sure that the project is being billed according to the payment terms outlined in the signed contract. On the other hand the Project Manager should alert the Account Manager if the engagement has ended.

a Sample Sitemap

Homepage About KLM

History of KLM

About Amsterdam

KLM in Singapore

KLM SAYS SITEMAP

About KLM Says News & Events

Terms & Conditions Privacy Policy

Photo Gallery The Winners

Daily Winners

Weekly Challengers

Grand Prize Winner

PHASE 3

Mechanics & Prizes

FAQs

PHASE 2

Havas Digital

23

b Sample User Flow

Havas Digital

24

Havas Digital

25

c Sample Wireframe

Havas Digital

26

d Sample Content Plan Phase Page Content/ Sections Functionality

ALL Homepage (Elements) ‘Add This’ button ‘Add This’ platform for sharing

ALL ‘Follow Us’ links Follow Us: Twitter, Facebook, Instagram

1 KLM Says blurb Short copy about the campaign and current challenge

1 Twitter Feed Twitter feed from #KLMSays

1 Gallery Entries Feed of Photos that have been submitted (will be hidden if no photos yet)

1 Events Blurbs Thumbnail and blurb of latest news

ALL About KLM Says About the campaign Content and Image

Mechanics & Prizes Content & Image

FAQs Content only

ALL News & Events Landing Page Articles with Content and Image

ALL Photo Gallery Landing Page Gallery Photo Gallery segmented by date (will be hidden if no photos yet)

ALL About KLM History of KLM Content and image

About Amsterdam Content and image

KLM in Singapore Content and image

ALL Terms & Conditions Landing Page Content only

ALL Privacy Policy Landing Page Content only

Havas_Digital_Production_Process

Documents

havas digital creative

digital agency

project manager

project kickoff

development stage

true digital advocates

design stage

quality control stage