(Thanks to Larry Huynh & Jordan Higgins for some of this great content)

Building a Website

What We’ll Cover

• Core Principles• Examples• Step-By-Step Guide

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

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

Examples

• Home Page

• Landing Page / Tell a friend

• Event Map

• Donation Page

• Issue Page

Home Page

Landing Page

The Next Ask/Tell a Friend

Event Map

Donation Page

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

Issue Page

Step-By-Step Guide

1. Internal Organization2. Goals3. Information Architecture (IA)4. Wireframe5. Content6. Design7. Quality Assurance (QA)8. Track & Engage

1. Internal Organization

New Media

Field

Exec. Dir.

Political

Fundraising

Communications

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

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

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

3. Information Architecture (IA)

HOME ABOUT ISSUES EVENTSVOLUNTEER DONATE

PAGE 1

PAGE 2

ISSUE 1

ISSUE 2

ISSUE 3

ISSUE 4

ISSUE 5

SIGNUPFORM

THANK YOU

PAGE

TELL A FRIEND

THANK YOU

PAGE

TELL A FRIEND

SIGNUPFORM

THANK YOU

PAGE

SEARCH

TELL A FRIENDTHANK

YOU PAGE (link back to home page) THANK

YOU PAGE (link back to home page)

THANK YOU PAGE (link back to home page)

PAGE 3

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 structure2. Look and feel

4. Wireframe Example

4. Wireframe Example

Final Design

5. Content

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

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

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

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

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

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

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

Contact Info

New Organizing Institute(202) 558-5585info@neworganizing.comwww.neworganizing.comwww.twitter.com/neworganizing