Production process presentation - drupalcamp Toronto 2010

  • 2,146 views
Uploaded on

drupalcamp Toronto 2010 - presentation

drupalcamp Toronto 2010 - presentation

More in: Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,146
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
32
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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. Presentation Plan • A bit about me • Where I stole all this content from • Team & Basic Tools • Proposal • Planning • Visual Design • Production • End Game
  • 3. About Me (a little back story) • Run small web shops for 8 years • Been Drupaling for 3 years
  • 4. So why Not Start a little Web Shop? Thinking about it really made Sense...
  • 5. $$$ 60-80% goes to the boss
  • 6. Working a 4 day week sounds pretty good.
  • 7. Setting your own hours sounded more productive.
  • 8. Who wants to bother with pants in the morning?
  • 9. So yes I was completely crazy
  • 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. 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. 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. 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. What Happened when we applied this costing model to a Drupal Website?
  • 15. What Happened when we applied this costing model to a Drupal Website? -$$$ I lost my shirt!
  • 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. 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. 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. 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. 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. Team Roles (Not Drupal Roles)
  • 22. Team Roles (Not Drupal Roles) The Project Manager
  • 23. Team Roles (Not Drupal Roles) The Project The Manager Designer
  • 24. Team Roles (Not Drupal Roles) The Project The Manager Designer Production Team
  • 25. Team Roles (Not Drupal Roles) The Project The Manager Designer Production The Ignorant Team Masses
  • 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. The Basic Tools • Local Development Environment • Version Control Software • Project Management Software • Consider a CSS framework to save time
  • 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. 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. Version Control Software • Subversion • GIT
  • 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. Project Management Software Nice to Have Features • Easy for Clients • Integrated with your version control.
  • 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. A Project Lifecycle Proposal Planning Visual Design Production User Testing Launch
  • 35. A Project Lifecycle Proposal Planning $$$ of Changes Visual Design increases Production User Testing Launch
  • 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. 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. 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. 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. 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. 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. 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. Milestones & Tasks Audience Persona Proposal Existing Content Planning Audit Visual Design Content Plan Information Architecture
  • 44. Milestones & Tasks Covert Your Estimates Into Tickets & Milestones Excel Estimate Project Management System
  • 45. Audience Persona Imaginary “people” to help keep all your decisions focused on the intended audience
  • 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. 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. 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. 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. 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. Planning Wireframes Visual Design Creative Concepts Production User Testing
  • 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. Wireframes • Illustrator (We use this) • Photoshop • Omnigraph Pro • Fireworks • Indesign = Bad
  • 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. Wireframes Transcending CSS: The Fine Art of Web Design Grey Frames
  • 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. 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. 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. Technical Specs Visual Design Prototype Production User Testing Launch Launch Candidate User Testing
  • 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. 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. 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. User Testing (It’s easier to show then explain) http://www.peachpit.com/promotions/promotion.aspx?promo=137602
  • 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. 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. Launch • Do more user testing first • Don’t Launch on a Friday! • Expect a few bugs to creep up later.
  • 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. “The best laid plans of mice and men often go astray” -Robert Burns