1. Building a Website
(Thanks to Larry Huynh & Jordan Higgins for some of this great content)

2. What We’ll Cover
• Core Principles
• Examples
• Step-By-Step Guide

3. Core Principles: Overarching
• Your site is a reflection on you and your organization
and you only get one chance for a first impression
• An easily-navigable website is fundamentally
important to your work
• Should be part of your overall communications and
strategy plan
• Should complement your offline program

4. Core Principles: Functional
• Email signup form
• Organized navigation & content
• Pictures & photos
• Sharability
• Bio/About/Issues section
• Call to action buttons (e.g., Donate, Volunteer)
• Promote social network sites

5. Examples
• Home Page
• Landing Page / Tell a friend
• Event Map
• Donation Page
• Issue Page

6. Home Page

7. Landing Page

8. The Next Ask/Tell a Friend

9. Event Map

10. Donation Page
The form is on
one page. It’s
not a multiple
step process.

11. Issue Page

12. Step-By-Step Guide
1. Internal Organization
2. Goals
3. Information Architecture (IA)
4. Wireframe
5. Content
6. Design
7. Quality Assurance (QA)
8. Track & Engage

13. 1. Internal Organization
New Media
Communications Field
Fundraising Exec. Dir.
Political

14. 1. Organization
• New Media / Comms normally leads the project
• Don’t build your website in isolation
• Involve different depts from the beginning
• Successful new media requires new structures –
web design often highlights organizational
opportunities for growth

15. 2. Goals
• Define organizational priorities
• Define the purpose and requirements for the site
• Define your audience
• Set a timeframe (with goals) for building the site

16. 3. Information Architecture (IA)
• “Table of contents” for your website
• Logical grouping of content
• Don’t need a design to come up with IA
• Prioritize what your supporters will be looking for, not
what you think is exciting

17. 3. Information Architecture (IA)
HOME ABOUT ISSUES VOLUNTEER EVENTS DONATE
PAGE 1 ISSUE 1 SIGNUP SEARCH THANK
FORM YOU
PAGE 2 ISSUE 2 PAGE
SIGNUP
THANK FORM
PAGE 3 ISSUE 3 TELL A
YOU
FRIEND
PAGE
ISSUE 4 THANK
YOU THANK
TELL A
ISSUE 5 PAGE YOU PAGE
FRIEND (link back to
TELL A home page)
THANK FRIEND
YOU PAGE
(link back to
home page) THANK
YOU PAGE
(link back to
home page)

18. 4. Wireframe
• Blueprint of how your pages will be laid out
• Allows your team to focus on the placement of
items on each page
• Separates the design process into two steps:
1. Functional page structure
2. Look and feel

19. 4. Wireframe Example

20. 4. Wireframe Example

21. Final Design

22. 5. Content
• Sections
– Bio / About
– Issues
– Volunteer / Get involved
– Events
– News
– Donate
– Tell a friend

23. 5. Content
• Email signup
– Short: email address and zip code
– Long: full address and txt msg / volunteer opt-in
• Content calendar
– Helps with planning / strategy
– Should be in sync with email calendar

24. 5. Content
• Tell your story using engaging content and pictures
• Don’t post more content/words just for the sake of
having more content
• Make sure the content/message is consistent across
website, social networks, and email campaigns

25. 6. Design
• Visually tell your story
• Make sure your calls to action are prominent
– Donate, event signup, volunteer, email sign-up
• Promote your social networking presence(s)
• Should have a consistent design (look and feel)
across all of your mediums
– Website, flyers, rally signs, sign-up sheets

26. 7. Quality Assurance (QA)
• QA the site before you launch
(Mac/PC, Firefox, Internet Explorer, Safari)
– Check the content/formatting on every page
– Click on all links
– Test all forms
– Get appropriate sign-off

27. 8. Track and Engage
• Keep posting content that is interesting and
relevant to your supporters
• Monitor the site traffic and track the progress using
web analytic tools
– Google Analytics
– Crazy Egg
– Clicky
– Woopra

28. 8. Track and Engage
• Different metrics you can track:
– Visits
– Unique Visitors
– Page Views
– Click Paths
– Entry & Exit Pages
– Time spent on your site
– Search words
– AdWords

29. Contact Info
New Organizing Institute
(202) 558-5585
info@neworganizing.com
www.neworganizing.com
www.twitter.com/neworganizing