Production process presentation - drupalcamp Toronto 2010


Published on

drupalcamp Toronto 2010 - presentation

Published in: Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Production process presentation - drupalcamp Toronto 2010

  1. 1. How to plan and project manage a small to medium sized Drupal website. All the links in this presentation are posted at Please post any suggestions such as software you like to use, or useful online resources I’ve missed in the comments on this page Presented by Aidan Foster FOSTER INTERACTIVE Web Development + Design Linked In:
  2. 2. Presentation Plan • A bit about me • Where I stole all this content from • Team & Basic Tools • Proposal • Planning • Visual Design • Production • End Game
  3. 3. About Me (a little back story) • Run small web shops for 8 years • Been Drupaling for 3 years
  4. 4. So why Not Start a little Web Shop? Thinking about it really made Sense...
  5. 5. $$$ 60-80% goes to the boss
  6. 6. Working a 4 day week sounds pretty good.
  7. 7. Setting your own hours sounded more productive.
  8. 8. Who wants to bother with pants in the morning?
  9. 9. So yes I was completely crazy
  10. 10. “Jump in and Swim” School of Project Management Fast Forward 5 years and I was: • Really bored with doing condo websites in flash (we did a lot of them) • On to my new company (Foster Interactive) without my previous business partner • Shopping around for a CMS to learn and picked Drupal... (Phew - We almost picked Joolma)
  11. 11. Foster Interactive (The New Company - 2007) • We are production focused • Often our clients are small corporations & Ad Agencies • We work with freelancers (mostly for creative)
  12. 12. Typical Proposal in 2007 It would have the following: • A little blurb about how brilliant we were • A site map • A short blurb about each page • A Fixed Price Range • Legal Disclaimers
  13. 13. Typical Proposal in 2007 Price would be calculated by doing something like Website Template = 12 hrs Pages (3 hrs each) x 15 pages = 45 hrs Revisions @ 10% = 5.7hrs 62.7 hrs @80/hr = $5016 +/- 15%
  14. 14. What Happened when we applied this costing model to a Drupal Website?
  15. 15. What Happened when we applied this costing model to a Drupal Website? -$$$ I lost my shirt!
  16. 16. Why did that cost model fail? It was based on non-cms website production realities Late Changes in the Project were time expensive Late Project Changes were happening all the time!
  17. 17. Late Project Changes in Flash/Table Sliced HTML World = Cost to add Cost to add a page at start of (or change) Project a page at end of Project (Basically every page is custom)
  18. 18. Late Project Changes in Drupal World = Content you’ve Content you planned for didn’t plan (Incredibly Hard as your now re- (Incredibly Easy as it’s a CMS!) theming or installing modules)
  19. 19. Basic Idea in Planning Make all the decisions you can in the simplest media possible as early as possible. • First > Make all the decisions on paper • Second > Simple drawings (Wireframes) • Third > Complex Drawings (Creative) • Last > With Code Note: *Agile is the Exact opposite of this method
  20. 20. Where these ideas came from (If any of this presentation clicks with you read these books) Why How What The E-myth Revisited Web ReDesign 2.0: Don’t Make Me Think / Workflow that Works Rocket Surgery Made Easy
  21. 21. Team Roles (Not Drupal Roles)
  22. 22. Team Roles (Not Drupal Roles) The Project Manager
  23. 23. Team Roles (Not Drupal Roles) The Project The Manager Designer
  24. 24. Team Roles (Not Drupal Roles) The Project The Manager Designer Production Team
  25. 25. Team Roles (Not Drupal Roles) The Project The Manager Designer Production The Ignorant Team Masses
  26. 26. Team Roles Can all Be (Not Drupal Roles) One Person The Project The Manager Designer Production The Ignorant Team Masses Must not be the same person
  27. 27. The Basic Tools • Local Development Environment • Version Control Software • Project Management Software • Consider a CSS framework to save time
  28. 28. Local Development Environment • Xampp • Mamp (Mac Only) • WAMP (Windows Only) • Zend Server CE • Acquia Drupal Stack (For Drupal it’s awesome, not so great if you’re working on non-drupal sites!) • OSX / Linux Native Webserver
  29. 29. Version Control Software • Different People Work on the Project at the same time • Time Travel back to before you add all those bugs into the software • Different Versions of the same project
  30. 30. Version Control Software • Subversion • GIT
  31. 31. Project Management Software (Bug Trackers) What it needs to do: • Manage multiple projects at once • Isn’t a pain in the ass to use • Records time on tasks • Allows you to forget to enter your time and then fix it later
  32. 32. Project Management Software Nice to Have Features • Easy for Clients • Integrated with your version control.
  33. 33. Project Management Software Commercial Options • Active Collab (Server Install - $700 + $250 for add-ons) • Base camp (Free for 1 project, $25-$50 /month) • Fogbuzz ($50 / user / month) Open Source Options • Project Pier (Active Collab was forked from this) • Trac(Needs 3rd party add-ons for time tracking - Only handles 1 Project ) • Open Atrium (Missing time recording requirement)
  34. 34. A Project Lifecycle Proposal Planning Visual Design Production User Testing Launch
  35. 35. A Project Lifecycle Proposal Planning $$$ of Changes Visual Design increases Production User Testing Launch
  36. 36. Proposal Before Starting • Pre-screen your prospect to determine they’re PITA factor • Mention some ballpark costs • Give them homework - 3 sites they like for design and 3 they like for content.
  37. 37. Proposal expensive to create Have a ball park value for your time writing proposals 1hr of proposal writing and sales meetings / $1000 of potential work
  38. 38. Proposal Tips • Write in English not Drupaleese • Outline some expectation of the site’s content (sitemap) • Detail out how fancy features will work (I like including links to samples on other people’s websites) • Use pictures (A screen grab of a WYSIWYG editor is much shorter to explain) • Outline some tech details (EG Not hosting on godaddy!)
  39. 39. Proposal Terms to Cover • Collect a retainer and bill progressively as the project goes on • Specify who owns the intellectual property when the project is done • Early Termination Clauses (No you don’t get a refund on the progressive billing!) • If the client delays for X months this triggers the next progressive billing.
  40. 40. Proposal Estimating Costs • Look at your last most similar project’s time log in the project management software • Use a crazy excel file to sort it out.
  41. 41. Proposal What if an accurate Estimate is Impossible to get? • Completely ignore my production process and learn Agile development • OR put a huge range of costs and make the first milestone in the project to work out the specs.
  42. 42. Proposal Why do all this work? When the client changes their mind later OR User testing shows a problem = Reasonable increase to cost of project
  43. 43. Milestones & Tasks Audience Persona Proposal Existing Content Planning Audit Visual Design Content Plan Information Architecture
  44. 44. Milestones & Tasks Covert Your Estimates Into Tickets & Milestones Excel Estimate Project Management System
  45. 45. Audience Persona Imaginary “people” to help keep all your decisions focused on the intended audience
  46. 46. Audience Persona The Gold Bug (A Persona for a mining sector client) Description: 55
see: Low
  47. 47. Existing Content Audit Legacy Website Brochure’s Content Content Importance Action (Keep or Page Title Current Location Text Description Current Media (1 low, 5 high) Delete, re-write) Photo gallery, Vision Statement 4 Paragraphs 1 Delete vision-statement Spotlight, Quick Facts http:// Board of 5 Bios Head shots 5 Re-write Directors m/board-of- directors Resource Table Brochure Large Table of Data n/a 5 Keep
  48. 48. Content Plan # Title Description Content Required Single large image area with multiple slides. Site Tagline – Persistent on title Focus on introducing the company story. bar 1.0 Home 3-4 Matching “call to action blocks: “Social Slides Responsibility”, “Exploration”, “Production”, 1 - CEO Intro/Story “Financial” 2 - Producing Gold 3 - Exploration Potential Search Function the team. Video Introduces 4 - Financial Strength Video Introduction News & Events blocks. • Overview of OYM as a Social is headshots in 2 groups with links to Below Media Links. Callout: 4 Blocks ”, “Exploration”, company of leading experts detailed bios. Organized by Key “Production”, “Financial 2.0 Team in their respective field Management, then Director’s Bios. • The team is proven via results Video Blog stream appears here to highlight • Management are significant people that are tagged in the content. (Key Management) Bio & Headshot? shareholders Video Bio Team > Video Self-introduction • Management’s personal • David’s role as Executive David Seton: Feed of video content where they appear in success and the company’s Chair & CEO 2.10 Chairman & the site. • success are linked Brief history of David and his Chief Executive Considering using a modal box hover-over achievements in the field of Officer to make it more streamlined… Possibly - The Team and Exploration Mining loading in different videos in a specific panel - Each Key Manager Video? • What David brings to the of the layout. Company
  49. 49. Information Architecture 0 Key Page ID Index Page Title A B A 1 2 3 4 5 6 7 8 9 Advanced About This Consumer Resource Privacy Ba Site Map Contact Us Feedback My Site Search Site Forum Links Policy R 4.1 6.1 6.2 8.1 Search Submit A My Site Review List Results Review Logged In 6.1.1 Reviews
  50. 50. Information Architecture Features 4 panels (w/ links): Home Page A. Brief Mission B. Product C. Services D. News (2 abstracts) Primary Navigation (Menu button & content page) Products Partners Contact Privacy / Terms Company Services (voice / general) (Affiliations) (HR) of Use Telephone Cabling Support & About Us News Nortel Systems Telephone Sets Installation Installation Training 2nd level Navigation (drop down menus & content pages) Power, VOIP Systems Headsets, Music / Hold Content Pages Article #1 Article #2 Future Articles
  51. 51. Planning Wireframes Visual Design Creative Concepts Production User Testing
  52. 52. Wireframes • Start imagining the UI and how it functions • This are visual Checklist of a page’s content. (It allows you to think though all the little buttons that are needed) • Focus on the interface not the design. • Design to precise pixel scale. • If you’re using a CSS framework make sure to stick to it’s Grid
  53. 53. Wireframes • Illustrator (We use this) • Photoshop • Omnigraph Pro • Fireworks • Indesign = Bad
  54. 54. Wireframes Technology for Long- Site Map | Contact Us | Feedback Search Term Care Banner Advanced Search Home | About This Site | Consumer Forum | Resource Links | MySite | Barriers Report HHS Logo Login Page Title Email Site Introduction - Lorem ipsum dolor sit amet, Find out how to consectetaur adipisicing elit, sed do eiusmod tempor personalize this site Password incididunt ut labore et dolore magna aliqua. Ut enim ad using MySiteName. Login minimveniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. > Fall Management Duis aute irure dolor in reprehenderit in voluptate > Wander Management velitesse cillum dolore eu fugiat nulla pariatur. Excepteur > Nurse Call Systems sint occaecat cupidatat non proident, sunt in culpa qui > Incontinence officia deserunt mollit anim id estlaborum Et harumd Technologies und lookum like Greek to me, dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioqueciviuda. > Family Contact > Leisure Enhancement > Medication Distribution > Mobility Devices > Transfer Devices > List all Products - Privacy Policy - The records in Technology for LTC are provided for information purposes only. Neither the U.S. Department of Health and Human Services, the Assistant Secretary for Planning and Evaluation, Polisher Research Institute, nor (contractor) has examined, reviewed or tested any product, device or information contained in Technology for LTC. The Department and (contractor) make no endorsement, representation or warranty express or implied as to any product, device or information set forth in Technology for LTC."
  55. 55. Wireframes Transcending CSS: The Fine Art of Web Design Grey Frames
  56. 56. Creative Concepts Implement the Wireframe as Creative • More Pages Illustrated = Better • Show the states for buttons, hover events, and other interactive elements. • Plan for a few revisions • Prefer Presenting 2 options to Client
  57. 57. Wireframes Creative Concepts Never Send a PDF of Creative or Wireframes to a client! Print outs are not good either Post it up on a website as that’s how it’s going to end up!
  58. 58. Wireframes Creative Concepts Our Wireframe Demo System (We’re still looking for a good name) Drupal 6 Based - Runs off of Books Easy to post concepts up for clients
  59. 59. Technical Specs Visual Design Prototype Production User Testing Launch Launch Candidate User Testing
  60. 60. Technical Specs • File naming & Path conventions • Page Title & Meta Tag Conventions • Doc Type (Suggest either using HTML 5 or XHTML) • Naming conventions for CCK fields • Content Types & Relations
  61. 61. Prototype • Partially Functional Website including: • Home Page • Easy to build Pages • 1/2 of important/complex functions • Probably works in only one browser • No Admin End Customization
  62. 62. Prototype Test It! • The tester must not know anything about the project • They are asked to “think out-loud” as they run though the site • They are given tasks to try out • Flawed testing is better then none.
  63. 63. User Testing (It’s easier to show then explain)
  64. 64. Release Candidate When Changes Happen • Add all changes as tickets in your PM software • Use a “Authorization Request for changes” to request additional funds
  65. 65. Release Candidate Make Sure the Admin Area is Easy • Use some simple views to put all the content in 1 screen that’s not the “Drupal Content” screen • You’ll save time with client’s support calls
  66. 66. Launch • Do more user testing first • Don’t Launch on a Friday! • Expect a few bugs to creep up later.
  67. 67. End Game Your last Project Your Next Project Predict What Will Happen Predict What (Your Estimate) Will Happen Figure Out what causes the difference Record What ??? Did Happen (Hopefully (Your Time Log) this is better) Add “recyclables” to your toolbox
  68. 68. “The best laid plans of mice and men often go astray” -Robert Burns