This is a summary of the process to follow when creating and building websites and other such online media. It's a project process overview for thos in need of such a structure to help run their projects and for clients to get a better idea of how the whole process works. There ar of course other ways of running your projects but this is a good tried and tested stage by stage way of doing it. I've included responsibilities and example outputs as well as key things to do and watch out for each stage.
2. Introduction
I created this process document to inform and help the staff at the global
media company I have recently been working at, in the role of Digital Creative
Services Director. It is a very tried and tested process evolved over many years
working 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 and
methodologies that are equally as beneficial and may suit your project better.
There are. The ‘Agile’ way of working for instance. My process here will work
to keep inexperienced teams and clients on track and can of course be utilised
by more senior teams and for large projects to. It is a summary though and
not intended as a tell all teaching aid of course!
The online advertising process can be very similar to the website one and thus
has the same breakdown of responsibilities as for websites.
4. Web design & build process overview
Initiate Create Develop Launch
e.g.Duration: 1-2 weeks Duration: 3-4 weeks Duration: 6-8 weeks Duration: 1-2 weeks
Work streams Work streams Work streams Work streams
• Initiation / kick-off • Further requirements • Design realisation • Deployment
• Project initiation meets & creative
•Design templates • Deploy to hosted
(internal and client) inspiration
environment
• SOW agreement • Interface dev
• Creative brief
•Set KPI’s • XHTML / CSS • Final QA testing
•Information • QA rounds
• Fact finding • Domain switch
architecture
• Survey • Site build
• Live
• Information audit • Sitemaps / • Functional
• Asset receipt wireframes development
• Databases etc
•Update SOW & sign
• Project planning
off
• Project plan •Testing
• Media planning •Design concepts • Interface testing
• Initial briefing • Home + section and design proofing
• Internal testing
•Documentation • UAT testing
•Functional spec
•Technical spec
• Testing plan
Key outputs Key outputs Key outputs Key outputs
• PID / SOW / KPI’s • Creative brief •Design templates • Deployed, signed
• Media plan • IA / Updated SOW •Dev iterations for off & live
•Contract & budget • Design concepts testing
• Project plan • Specifications •Website into UAT
5. Initiate – stage 1
This is our initiation stage and commences the project in a structured but stimulating
fashion. The aim is to encourage participation and enthusiasm within the agency and
the client, as well as to define the important initial project details, prior to beginning
the project itself.
Work package Responsibility Involvement Description Key outputs
Internal Initiation AD -Agency team, Inspirational kick-off. Covers all -Internal plan
known aspects of project so far -Client initiation
and the process. Encourages presentation
ownership and foresees risk.
Also involves the creative
thinking / workshops.
Client Initiation AD -Agency team, Client kick-off. Defines process -Any amends to dates
-Clients to be followed, key dates and and process agreed
stakeholders. Agree scope.
Fact finding Producer -Planning and IA This can take many forms but -Existing content /
teams will usually be a content and assets agreed
- Agency team asset audit, surveys and initial -Requirements
-Clients requirements workshops. gathering plan
SOW / Contracts / Producer (for -Clients Agree the scope of work, finalise -Agreed SOW
Costs / KPI’s SOW) / AD - Agency team and sign contracts and agree -Signed contract
costs (or budget range) -Costs
Planning Producer / AD - Agency team Finalised project plan to be -Project plan
produced and agreed. PID also -Project initiation doc
to be produced if relevant and (PID)
any media plans. -Media plan
6. Initiate – stage 1 output examples
Initiation – Betty Crocker client initiation presentation
Note that the ‘scope of work’ on the agenda below will be largely going over the
original client brief and the proposal (if applicable). We are setting the stage for the
project here and have a good idea of what is required, but this is nowhere near set in
stone and the scope can change dramatically before we finally have the proper project
SOW document agreed.
7. 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 this
example does, but the scope informs the next stage of evolving these or often their
creation 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 parts
of the project.
• Larger projects will have functional & technical specifications produced based on
the SOW but which are far more detailed and supersede the SOW.
9. Initiate - Key points
• Do not set budgets & deadlines before the internal & client initiations (kick-offs). If you do
then you risk limiting the scope, creativity, number of design concepts etc not to mention
the 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. Have
just one point of contact in the main for your agency, the client and any external third
parties 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 to
face 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 to
the client at th
• Always produce a detailed project plan & present this face to face with the client to
ensure that they understand what is going to happen, their responsibilities & the impacts if
they do not stick to the schedule.
10. Create – stage 2
Where the creative thinking and conceptual work comes in. We have our project base set so
can now get stuck into the fun and interesting stuff. There are still some requirements
finalisation to attend to of course but we are underway now.
Work package Responsibility Involvement Description Key outputs
Further requirements Producer -Agency team Will vary from project to project -Planned outputs
workshops & creative -Clients but here we are detailing the such as content
inspiration forum. signed off requirements further matrix, site functions,
if need be. Note that this may creative definition
have been covered in full within
stage 1 ‘fact finding’, but scope
can change & needs to be
tightly controlled.
Client Creative brief Client -AD / Producer These should be written by the -Signed off brief
-Agency team client and not be a ‘reverse’
brief. This may lead to an
enhanced internal brief from the
producer / creative director.
Information Producer / IA -AD Creation of sitemaps, user -Sitemap
architecture - Client journeys and wireframes. Digital -User journeys
producer / IA to do with input. -Wireframes
Design concepts Producer -AD / CD Design concept iterations, -Signed off concepts
- Client usually involving 2 to 3 (e.g. home page and
concepts, review and amends section pages)
before sign off
Documentation Producer -Developers Digital production of functional -Functional spec
- AD and technical specs based on -Technical spec
- Client the requirements and IA
15. 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 produced
template. Reverse briefs are not ideal. Most agencies will have a briefing questionnaire that
can be discussed direct with the client to help them in writing the brief. This may lead to a
further enhanced brief internally from the producer and creative director for the design
team to use.
• Information Architecture (IA) – Sitemaps and Wireframes are vital to lead both the design
and 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 next
steps.
• Design concepts – agree how many will be created and how many iterations will be
produced at the initiation stage and document in the Scope. Usually you will agree to
create 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 find
yourself 2 months down the track on your tenth iteration.
• Present design concepts face to face and ideally with the designer who created them, or
at least the Creative Director. The designer (or CD) will be best placed to explain their
creative thinking and benefit greatly in receiving the feedback, emotion and reactions first
hand.
16. Develop – stage 3
The actual build of the site, application and / or online advertising. We will complete the
agreed design templates and imagery / illustration digital production and have these signed
off. The build will then move into actual development and a thorough quality assurance stage.
Work package Responsibility Involvement Description Key outputs
Design realisation Producer - Designer / CD Creation of the agreed number -Design templates
- Client of design templates. These will -Imagery
be main section pages, -Illustrations
generic pages & specific
pages such as an entry form.
Interface Producer - Developers Front end interface -XHTML and CSS
development - QA development in XHTML / CSS. templates
Ensures design integrity, (thoroughly tested)
browser compatibility, usability
and accessibility.
Site build Producer - Developers The actual site build, whether -Completed site
- QA this be a flash or CMS driven ready for final QA
site. Involves rounds of and user acceptance
properly scheduled QA / testing (UAT)
testing to an agreed test plan.
QA / testing QA manager / - Agency team Scheduled final QA and -Completed site
Producer - QA amends. Covers all aspects of ready for live
- Client the site, browsers, usability deployment
and accessibility. Also includes
client UAT.
19. Develop - Key points
• Before you start coding the website and back-end (database and so forth) make sure that
you have a detailed testing plan to be followed throughout the development and quality
assurance 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 the
previous 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 be
less 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-testing
than 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 nothing
worse than a client using IE 6 noticing a major bug that does not exist on the more up to
date 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. They
should sign off that they are happy with everything and have tested thoroughly before the
staging site is deployed to live and then again before it is set live.
20. Develop - Key points (2)
• CHANGE CONTROL – Any changes to the Scope of Work should go through a thorough
change control process that has been detailed during Initiation. Changes should been
completed on a change request form and signed off by the agency and the client. The
Scope of Work should also be updated by the producer.
• Changes during development should be designated as essential for live or scheduled for
a further phase after live. The more changes during development in the run up to live you
have the more risk of errors there are.
• REMEMBER – a change request can impact both the design and layout of the website as
well as the coding and back-end. A seemingly small change can have a big impact, involve
several skill sets and will always require re-testing. And possibly re-testing of the whole
website.
• Design realisation – The Information Architecture will dictate how many design templates
for the site sections, forms, generic and certain non-generic pages. Ensure these are
signed off before going into development.
21. Launch – stage 4
Final deployment to the live environment (and staging environment). Further QA and testing
is required with any amends completed. Also includes the finalisation and implementation of
overall launch strategy.
Work package Responsibility Involvement Description Key outputs
Deployment Producer / -Development Deployment to the live -Deployed site
Development team environment (which should ready for QA
manager -3rd party host (if have been put in place at
applicable) the start of the project)
Final QA / testing Producer / QA - Agency team The site is now on the live -Signed off site for
manager - QA environment and will need live
- Client a final thorough phase of
testing
Live Producer -Agency team Time to switch live. Domain -Site set live
-Clients name changes etc should -Post live plan
have been actioned commences
beforehand. This is done -Post project review
by the Agency team but the
Producer has to give the go
ahead based on internal
and client sign-off.
22. Launch - Key points
• Ensue that the staging and live environments are set up at the outset of the project and
not left until the last minute.
• Define who controls the domain name and has responsibility for instructing the switching
of this in order to make the website live. Note this can take up to 24 hours and should
ideally be in client control. Though lack of technical knowledge will probably mean that the
Agency 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 your
agency 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 live
than 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 for
live despite what they might think. Life will be more comfortable if non-essential changes
are undertaken after live.
24. Online advertising process overview
Initiate Create Develop Launch
e.g.Duration: 1 week Duration: 2-3 weeks Duration: 2-3 weeks Duration: 1-2 weeks
Work streams Work streams Work streams Work streams
• Initiation / kick-off • Creative brief •Interface dev • Deployment
• Project initiation • Flash development
•Ideas and content • Deploy to ad
(internal and client) • Amends for
serving or website
•Contract / budget • Storyboard / formats
agreement scamps • Final QA testing
•Content plan •Testing • Live
• Requirements meets • Interface testing
•Copywriting
and design proofing
•Specification / SOW
•Design concepts • Internal testing
• Asset delivery •Development
• Project planning
• Concept iterations amends
• Project plan
• UAT testing
• Media planning
•Interface design
• Initial briefing
•Design template
•Further asset
creation incl. Video,
photography etc.
Deliverables Deliverables Deliverables Deliverables
• Spec / SOW • Creative brief • Flash ads created • Passed UAT
• Media plan • Scamps & content •Passed QA •Passed for live
•Contract & budget • Design concepts •Ready for UAT •Ads launched
• Project plan • Template
25. 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 design
for 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 your
agency team or external 3rd party design teams to be able to go through the plans and
notice 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 source
Photoshop (PSD) file.
• What’s the clients goal? To drive sales? Inform on new features? Brand awareness? These
affect 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 click
through.
• We are telling a story so when they click-through they should end up where they expect
i.e. the competition entry form or the product details page. Just plonking them on the
home 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 better
than animated ones.
26. Thanks.
Bruce Waskett
Director - Feels like mine
bruce@feelslikemine.com
http://www.feelslikemine.com
http://www.storybridgedigital.com
