drupalcamp Toronto 2010 - presentation

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