Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Digital Creative Process

19,129 views

Published on

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.

Published in: Technology, Business
  • Be the first to comment

The Digital Creative Process

  1. 1. The Digital Creative Process.<br />Introduction<br />Website overview<br />Initiate<br />Create <br />Develop<br />Launch<br />Online ads overview<br />
  2. 2. Introduction<br />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.<br />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!<br />The online advertising process can be very similar to the website one and thus has the same breakdown of responsibilities as for websites. <br />
  3. 3. Web design and build process<br />
  4. 4. Web design & build process overview<br />Initiate<br />Create<br />Develop<br />Launch<br />e.g.Duration: 1-2 weeks<br />Work streams<br /><ul><li> Initiation / kick-off
  5. 5. Project initiation (internal and client)
  6. 6. SOW agreement
  7. 7. Set KPI’s
  8. 8. Fact finding
  9. 9. Survey
  10. 10. Information audit
  11. 11. Asset receipt
  12. 12. Project planning
  13. 13. Project plan
  14. 14. Media planning
  15. 15. Initial briefing</li></ul>Duration: 3-4 weeks<br />Work streams<br /><ul><li> Further requirements meets & creative inspiration
  16. 16. Creative brief
  17. 17. Information architecture
  18. 18. Sitemaps / wireframes
  19. 19. Update SOW & sign off
  20. 20. Design concepts
  21. 21. Home + section
  22. 22. Documentation
  23. 23. Functional spec
  24. 24. Technical spec
  25. 25. Testing plan</li></ul>Duration: 6-8 weeks <br />Work streams<br /><ul><li> Design realisation
  26. 26. Design templates
  27. 27. Interface dev
  28. 28. XHTML / CSS
  29. 29. QA rounds
  30. 30. Site build
  31. 31. Functional development
  32. 32. Databases etc
  33. 33. Testing
  34. 34. Interface testing and design proofing
  35. 35. Internal testing
  36. 36. UAT testing</li></ul>Duration: 1-2 weeks <br />Work streams<br /><ul><li> Deployment
  37. 37. Deploy to hosted environment
  38. 38. Final QA testing
  39. 39. Domain switch
  40. 40. Live </li></ul>Key outputs<br /><ul><li> PID / SOW / KPI’s
  41. 41. Media plan
  42. 42. Contract & budget
  43. 43. Project plan</li></ul>Key outputs<br /><ul><li> Creative brief
  44. 44. IA / Updated SOW
  45. 45. Design concepts
  46. 46. Specifications </li></ul>Key outputs<br /><ul><li>Design templates
  47. 47. Dev iterations for testing
  48. 48. Website into UAT </li></ul>Key outputs<br /><ul><li> Deployed, signed off & live</li></li></ul><li>Initiate – stage 1<br />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.<br />
  49. 49. Initiate – stage 1 output examples<br />Initiation – Betty Crocker client initiation presentation<br />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.<br />
  50. 50. Initiate – stage 1 output examples<br />Scope of Work document<br />.<br /><ul><li> Vital to be agreed before moving into the Create stage.
  51. 51. 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.
  52. 52. All scope changes should be managed via a change control process.
  53. 53. Testing / QA plans to be created from the SOW & strictly followed in the QA parts of the project.
  54. 54. Larger projects will have functional & technical specifications produced based on the SOW but which are far more detailed and supersede the SOW.</li></li></ul><li>Initiate – stage 1 output examples<br />Master project plan<br />.<br />
  55. 55. Initiate - Key points<br /><ul><li> 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.
  56. 56. Conduct a structured internal initiation before the client initiation.
  57. 57. 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.
  58. 58. The main point of contact at your Agency team must be in a project management / producer role and NOT the designer or developer.
  59. 59. Set weekly / fortnightly internal and client meetings at the outset.
  60. 60. 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.
  61. 61. 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
  62. 62. 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.</li></li></ul><li>Create – stage 2<br />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.<br />
  63. 63. Create – stage 2 output examples<br />Information architecture - sitemap<br />.<br />
  64. 64. Create – stage 2 output examples<br />Information architecture – Home Page wireframe<br />.<br />
  65. 65. Create – stage 2 output examples<br />Design iterations – 1st iteration in concept phase.<br />.<br />
  66. 66. Create – stage 2 output examples<br />Design iterations – Final concept work.<br />.<br />
  67. 67. Create - Key points<br /><ul><li> Ideally, do not begin this stage until the Initiate stage has been closed.
  68. 68. Have as many of the team involved in workshops.
  69. 69. 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.
  70. 70. 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.
  71. 71. 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.
  72. 72. 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.</li></li></ul><li>Develop – stage 3<br />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.<br />
  73. 73. Develop – stage 3 output examples<br />Design realisation – example page design jpeg templates.<br />.<br />
  74. 74. Develop – stage 3 output examples<br />Quality Assurance and Testing – testing issue tracker<br />.<br />
  75. 75. Develop - Key points<br /><ul><li> 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.
  76. 76. Make sure that they use issue tracking software such as the Gemini Issue Tracker on the previous slide.
  77. 77. 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.
  78. 78. 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.
  79. 79. 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.
  80. 80. 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.</li></li></ul><li>Develop - Key points (2)<br /><ul><li> 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.
  81. 81. 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.
  82. 82. 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.
  83. 83. 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.</li></li></ul><li>Launch – stage 4<br />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.<br />
  84. 84. Launch - Key points <br /><ul><li> Ensue that the staging and live environments are set up at the outset of the project and not left until the last minute.
  85. 85. 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.
  86. 86. 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.
  87. 87. 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.
  88. 88. 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.</li></li></ul><li>Online advertising process<br />
  89. 89. Online advertising process overview<br />Initiate<br />Create<br />Develop<br />Launch<br />e.g.Duration: 1 week<br />Work streams<br /><ul><li> Initiation / kick-off
  90. 90. Project initiation (internal and client)
  91. 91. Contract / budget agreement
  92. 92. Requirements meets
  93. 93. Specification / SOW
  94. 94. Project planning
  95. 95. Project plan
  96. 96. Media planning
  97. 97. Initial briefing</li></ul>Duration: 2-3 weeks<br />Work streams<br /><ul><li> Creative brief
  98. 98. Ideas and content
  99. 99. Storyboard / scamps
  100. 100. Content plan
  101. 101. Copywriting
  102. 102. Design concepts
  103. 103. Asset delivery
  104. 104. Concept iterations
  105. 105. Interface design
  106. 106. Design template
  107. 107. Further asset creation incl. Video, photography etc.</li></ul>Duration: 2-3 weeks <br />Work streams<br /><ul><li>Interface dev
  108. 108. Flash development
  109. 109. Amends for formats
  110. 110. Testing
  111. 111. Interface testing and design proofing
  112. 112. Internal testing
  113. 113. Development amends
  114. 114. UAT testing</li></ul>Duration: 1-2 weeks <br />Work streams<br /><ul><li> Deployment
  115. 115. Deploy to ad serving or website
  116. 116. Final QA testing
  117. 117. Live </li></ul>Deliverables<br /><ul><li> Spec / SOW
  118. 118. Media plan
  119. 119. Contract & budget
  120. 120. Project plan</li></ul>Deliverables<br /><ul><li> Creative brief
  121. 121. Scamps & content
  122. 122. Design concepts
  123. 123. Template</li></ul>Deliverables<br /><ul><li> Flash ads created
  124. 124. Passed QA
  125. 125. Ready for UAT</li></ul>Deliverables<br /><ul><li> Passed UAT
  126. 126. Passed for live
  127. 127. Ads launched</li></li></ul><li>Online advertising - Key points <br /><ul><li> 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.
  128. 128. 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.
  129. 129. Try and get creative assets before costing as well. Always remember to ask for the source Photoshop (PSD) file.
  130. 130. What’s the clients goal? To drive sales? Inform on new features? Brand awareness? These affect placement and creative.
  131. 131. Like the websites and other digital media, the client should write the initial creative brief.
  132. 132. 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.
  133. 133. 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.
  134. 134. Note that on some majorly interactive sites that static banners might well work better than animated ones.</li></li></ul><li>Thanks.<br />Bruce Waskett<br />Director - Feels like mine<br />bruce@feelslikemine.com<br />http://www.feelslikemine.com<br />http://www.storybridgedigital.com<br />

×