How to plan and project manage a
small to medium sized Drupal website.

              All the links in this presentation a...
Presentation Plan
•   A bit about me
•   Where I stole all this content from
•   Team & Basic Tools
•   Proposal
•   Plann...
About Me
    (a little back story)




•    Run small web shops for 8 years

•    Been Drupaling for 3 years
So why Not Start a
  little Web Shop?

Thinking about it really
    made Sense...
$$$ 60-80% goes to the boss
Working a 4 day week
 sounds pretty good.
Setting your own hours sounded
        more productive.
Who wants to bother with pants in
         the morning?
So yes I was completely
          crazy
“Jump in and Swim”
School of Project Management
              Fast Forward 5 years and I was:

             •   Really bor...
Foster Interactive
          (The New Company - 2007)




• We are production focused
• Often our clients are small corpor...
Typical Proposal in
             2007
It would have the following:

•
   A little blurb about how brilliant we were
•
   A...
Typical Proposal in
           2007
Price would be calculated by doing something like

Website Template = 12 hrs
Pages (3 ...
What Happened when we
applied this costing model
  to a Drupal Website?
What Happened when we
applied this costing model
  to a Drupal Website?


                   -$$$
             I lost my s...
Why did that cost
      model fail?

It was based on non-cms website production realities
  Late Changes in the Project we...
Late Project Changes in
         Flash/Table Sliced HTML World




                     =
   Cost to add                  ...
Late Project Changes in
                                   Drupal World




                                    =
 Content...
Basic Idea in Planning
Make all the decisions you can in the simplest
media possible as early as possible.

• First > Make...
Where these ideas came from
                (If any of this presentation clicks with you read these books)



       Why  ...
Team Roles
 (Not Drupal Roles)
Team Roles
               (Not Drupal Roles)




The Project
  Manager
Team Roles
               (Not Drupal Roles)




The Project                         The
  Manager                        ...
Team Roles
               (Not Drupal Roles)




The Project                         The
  Manager                        ...
Team Roles
               (Not Drupal Roles)




The Project                         The
  Manager                        ...
Team Roles
Can all Be      (Not Drupal Roles)
One Person


 The Project                           The
   Manager          ...
The Basic Tools


• Local Development Environment
• Version Control Software
• Project Management Software
• Consider a CS...
Local Development
     Environment
• Xampp
• Mamp (Mac Only)
• WAMP (Windows Only)
• Zend Server CE
• Acquia Drupal Stack
...
Version Control
         Software
• Different People Work on the Project at
  the same time
• Time Travel back to before y...
Version Control
        Software

• Subversion
• GIT
Project Management Software
         (Bug Trackers)
What it needs to do:

  • Manage multiple projects at once
  • Isn’t a...
Project Management Software

Nice to Have Features



  • Easy for Clients
  • Integrated with your version control.
Project Management Software
Commercial Options
  • Active Collab        (Server Install - $700 + $250 for add-ons)


  • B...
A Project Lifecycle
       Proposal


       Planning


     Visual Design


      Production

                     User T...
A Project Lifecycle
              Proposal


              Planning
  $$$ of
 Changes    Visual Design
increases

        ...
Proposal        Before Starting


• Pre-screen your prospect to determine
  they’re PITA factor
• Mention some ballpark co...
Proposal        expensive to create


Have a ball park value for your time writing proposals



1hr of proposal writing
  ...
Proposal               Tips

•   Write in English not Drupaleese
•   Outline some expectation of the site’s content
    (s...
Proposal         Terms to Cover

• Collect a retainer and bill progressively as
  the project goes on
• Specify who owns t...
Proposal        Estimating Costs



• Look at your last most similar project’s
  time log in the project management
  soft...
Proposal

What if an accurate Estimate
   is Impossible to get?
• Completely ignore my production process
   and learn Agi...
Proposal


Why do all this work?
 When the client changes their mind later
                   OR
    User testing shows a ...
Milestones & Tasks


                Audience Persona
  Proposal

                Existing Content
  Planning            A...
Milestones & Tasks




                      Covert Your
                       Estimates
                     Into Ticket...
Audience Persona




      Imaginary “people” to help keep all your
        decisions focused on the intended
            ...
Audience Persona

The Gold Bug (A Persona for a mining sector client)
                Description:
                55
year...
Existing Content
      Audit


                                                   Legacy Website
                         ...
Content Plan


#        Title             Description                                       Content Required

            ...
Information
Architecture                                          0
                                                      ...
Information
               Architecture


                                                                                ...
Planning         Wireframes


Visual Design   Creative Concepts


 Production
                   User Testing
Wireframes



 • Start imagining the UI and how it functions
 • This are visual Checklist of a page’s content.
   (It allo...
Wireframes




 • Illustrator (We use this)
 • Photoshop
 • Omnigraph Pro
 • Fireworks
 • Indesign = Bad
Wireframes

          Technology for Long-                                    Site Map | Contact Us | Feedback            ...
Wireframes




Transcending CSS: The
Fine Art of Web Design




                         Grey Frames
Creative Concepts


   Implement the Wireframe as Creative

   • More Pages Illustrated = Better
   • Show the states for ...
Wireframes                   Creative Concepts



    Never Send a PDF of Creative or
        Wireframes to a client!

   ...
Wireframes                  Creative Concepts



     Our Wireframe Demo System

  (We’re still looking for a good name)

...
Technical Specs


Visual Design      Prototype


 Production       User Testing


   Launch       Launch Candidate


     ...
Technical Specs



     • File naming & Path conventions
     • Page Title & Meta Tag Conventions
     • Doc Type   (Sugge...
Prototype


  • Partially Functional Website including:
   • Home Page
   • Easy to build Pages
   • 1/2 of important/comp...
Prototype        Test It!


 • The tester must not know anything about
   the project

 • They are asked to “think out-lou...
User Testing           (It’s easier to show then explain)




    http://www.peachpit.com/promotions/promotion.aspx?promo=...
Release Candidate   When Changes Happen




 • Add all changes as tickets in your PM software
 • Use a “Authorization Requ...
Release Candidate    Make Sure the Admin Area is Easy




     • Use some simple views to put all the content
       in 1 ...
Launch




• Do more user testing first
• Don’t Launch on a Friday!
• Expect a few bugs to creep up later.
End Game
Your last Project                        Your Next Project

 Predict What
  Will Happen                          ...
“The best laid plans of mice and men often go astray”
                                     -Robert Burns
Upcoming SlideShare
Loading in...5
×

Production process presentation - drupalcamp Toronto 2010

2,290

Published on

drupalcamp Toronto 2010 - presentation

Published in: Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,290
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
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 http://fosterinteractive.com/drupalcamp2010 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 afoster@fosterinteractive.com Web Development + Design Linked In: ca.linkedin.com/in/aidanfoster
  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
year
old,
American
small
business
owner.
He
has
a
 pessimistic
view
about
the
overall
stability
of
the
US
market
 and
thinks
Armageddon
will
happen.
He
is
motivated
by
the
 desire
to
protect
his
current
wealth,
and
gold
is
the
insurance
 against
the
debasement
of
all
currencies
at
the
hand
of
 irresponsible
government.
 Thinks
that
currencies
may
fail
so
he’s
looking
into
gold.
May
 have
bullion
and
are
looking
to
expand
their
portfolio.
 What
he
needs
to
see: Low
burn
rate
(Operating
cash
costs).
Cash
in
the
bank,
and
 low
cost
of
production.
 Desired
Action:
Purchase
Shares
  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) http://olympuspacific.com/ Photo gallery, Vision Statement 4 Paragraphs 1 Delete vision-statement Spotlight, Quick Facts http:// Board of olympuspacific.co 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 http://www.fatpurple.com/2010/03/04/web-site-wireframes-samples-examples/
  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." http://www.fatpurple.com/2010/03/04/web-site-wireframes-samples-examples/
  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) http://www.peachpit.com/promotions/promotion.aspx?promo=137602
  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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×