Choose to Improve

In this post, I will attempt to outline the basic principles governing how to build a nonprofit website. The principles fall into the following four categories:

1. Organizational principles, which drive the page order and type;
2. Design principles, which address navigability, simplicity, conventionality, and responsiveness;
3. Content principles, which address donor-centricity, the incorporation of emotion and engagement, and search engine optimization basics; and
4. Monitoring and maintenance principles, which involve employing free tools to garner information about how visitors are interacting with our sites and using that information to continuously improve their organization, design, and content.

Let’s look at each of these categories in turn.

1. organizational principles

In this section, we will review how the composition of our audiences and their information needs should drive the organization of our sites and we will explore the audience matrix as a tool for documenting audiences and needs.  We will also review what experts have concluded regarding pages that tend to be common across most nonprofits.

A. Audience matrix

The question of how to organize a site must start with understanding who our audiences are and what they need from our site.  As one commentator has noted, “[t]he website should be presented from the visitor’s point of view. What does he or she care about? Why is he or she there in the first place? It’s probably not to read an overview of ‘we do this’ and ‘we do that.’” (Paley, S. Increase Online Donations in 4 Steps). Our role is to make it quick and easy for them to find what they need and to entice them to take action (e.g., make a donation, sign up for our newsletter) before they leave our site. So a simple first step is to create a matrix listing audiences, what they want, the top-level and subpages where they will find what they want (i.e., the likely paths each will take), and the action we want them to take before they leave, as shown below.

WEBSITE AUDIENCE MATRIX
Audiences	What They Want	Where Can They Quickly Find What They Want (& What Action Do We Want Them to Take on the Page?)
		Top-Level Page (s)	Subpage(s)
Board Members	Access Board Agenda materials	Board Login (Download materials)
	Access Committee files	Board Login	Committee files (Download Files)
	Info. to share with prospective board members & donors	Resources (Download & share materials)
Current & Prospective Donors	Understand mission	Home, About (Join Email List)
	Understand where money goes	Donate, About (990) (Join Email List, Donate)
	Easy Way to Donate	Donate (Donate, Share donate page with their peers)
	Register for Event	News & Events	Specific Event (Sign up for event; share event info)
Grant Decision-Makers	Understand mission	Home, About
	Understand capacity of organization	About
	Understand match of work with funder’s areas of focus	Our Work	Project Page, Policy Page
Partners	Understand mission	Home, About (Join Email List, Share info. with their network)
	Understand policy/advocacy positions	Our Work	Policy Issue (Join Email List; share information with their network)
	Understand current work	Projects, Resources (e.g., fact sheets, slide presentations)	Project Page (Join Email List, share information with their network)
	To talk with someone	Contact (Email us; find phone number)
Press	Understand policy	Our Work	Policy Issue (Join Email List)
	Info on news and events	News/Events	Current News (Join Email List)
			Archived News
	Info on current work	Our Work, Resources (e.g., fact sheets, slide presentations)	Project Page, Policy Issue
	Talk with someone	Contact (Email us; find phone number)
Volunteers	Info on mission	Home, About (Join Email List; Share info. with peers)
	Info on volunteer opportunities	Volunteer	Project Pages (Join Email List; Share info. with peers)
	Info on past successful volunteer efforts	Volunteer	Project Pages (Join Email List; Share info. with peers)
	Talk with someone	Contact (Email us; find phone number)

B. Recommended pages

The literature suggests that there are seven common page-types for nonprofit organizations: (1) Home; (2) About; (3) Donate; (4) Events; (5) News/Blog; (6) Resources; and (7) Contact Us.  Let’s look at each, in turn.

(1) Homepage

The homepage should contain content, including strong images and/or video, focused on(1)  the organization’s mission (and/or its tagline), (2) its unique selling proposition and (3) a few calls to action.  The mission is derived from the strategic plan and addresses what the organization does and why. (See this post for how to develop a mission statement).  The unique selling proposition explains the organization’s successes and what sets it apart from like organizations. (See this post for how to develop the unique selling proposition). Finally, a call to action is the critical next step that we want our visitors to take, which is outlined in the website audience matrix, above.  See the examples, below, from the Missing Children Society of Canada (https://mcsa.ca) and One.Org (https://www.one.org/us/), which illustrate the foregoing principles.  

(2) About

For many organizations, "About" is the most visited webpage.  It is where we tell the story of the organization and the people who have made it successful. At least one expert has suggested that it is essential: “I don’t want to look at your “Resonate” page and wonder if that’s where I find out who you are, what you do, and why I should read your site …. Every site needs an About Page. Don’t be clever. Call it About.” (Sonia Simone, Are You Making These 7 Mistakes with Your About Page?) The About page is where we talk about the organization but only in the context of how it serves our audience and their interests.  Tell the organization’s story in a fun and interesting way and tie in benefits for its audience of working with the organization. Discuss the problems the organization solves and how it solves them. Include photographs of the board and staff members along with the organization’s Employer Identification Number and a description of the nonprofit type, e.g., 501(c)(3), 501(c)(4). I also like to include a copy of the current strategic plan, along with a simple fact sheet on the organization that visitors can easily download.  (For information on how to develop such a fact sheet for your organization, see this post).

(3) donate

A successful donation page typically includes eight major components:

1. The organization’s mission, since not every visitor may come to the donation page from the home page, where the mission is front and center;
2. The organization’s branding, i.e., the look, feel and tone that the organization has stablished;
3. A story about someone the organization has helped along with an image of him or her;
4. A breakdown of where a donation goes;
5. A personal message from the president or someone on the board;
6. An ask for a reasonable donation amount that can make a difference;
7. A donation form that collects, at a minimum, donation amount, first name, last name, email, address and phone number and is linked to your contact database;
8. A request that a donor share the page and the means for easy sharing.  A “sharethis” button is an easy means of sharing a page.

(4) events

The events page lists upcoming events, typically by way of a calendar showing dates and times.  A successful page also includes the benefits of participation in events.

(5) News/Blog

The News/Blog page might feature the organization’s blog and is where important updates are posted.  It lets current and potential supporters know how the organization is engaging with the community it serves.

(6) resources

This page is the place for hosting publications, presentations, and other materials that the organization wishes to make available to the public.

(7) contact us

The contact us page includes the organization’s basic contact information (mailing address, phone number, email address).  It should contain a form that visitors can use to get in touch, testimonials, and social media profiles.

2. design principles

Beyond organization and inclusion of specific pages, the literature suggests a number of design principles.  They may be summarized as follows:

A. navigability

One commentator has suggested that “[i]deally a visitor should be able to arrive on your site and not have to think extensively about where they should click next – moving from point A to point B should be as pain-free as possible.” (Devaney, E. 8 Guidelines for Exceptional Web Design, Usability, and Use Experience).  Another notes that “[t]he main menu should tell your visitors exactly what they are going to get at a glance.” (Dick, J. Organizing Website Content). Tips for optimizing navigability include:

1. Use the website audience matrix, discussed above, to structure top-level pages and subpages, since this structure anticipates the topics that the organization’s audiences need;
2. Include primary navigation at or near the top of the page and secondary navigation in the page footer;
3. Include a search box of at least 27 characters near the top of your site;
4. Keep the navigation simple, using drop-down menus, as necessary, to accommodate topics related, but secondary, to the primary topics; and
5. Keep the navigation labels and location the same on every page.

b. simplicity

Simplicity addresses layout, the use of colors, typefaces, graphics, imagery, and text. Let’s address each of these in turn.

(1) layout

The literature suggests that we should “put information where the most eyes are.” (Patel, N. 8 Ways to Improve the Usability of Your Website). Users spend 80 percent of their time looking at information above the page fold and 69 percent of their time viewing the left side of the page. To maximizing viewing, then, it is best to use what is known as an “F-Layout,” shown in the image below.  Notice that the “sign-up” button is in the top, right-hand corner.  We should consider placing a “donate now” button in a bold color adjacent to it along with our social network icons. As for optimal resolution, the literature suggests a length of 1000-1600 pixels and a width of 770 pixels. With some exceptions, it is best to try to use the same basic layout for each page.

(2) color

The rules regarding color suggest using a maximum of five different colors in a website’s design.  There is also support for the idea that the chosen color scheme should match the emotion that we’re trying to evoke in the population that you’re serving.  The diagram below provides an overview of emotions evoked by colors across different cultures. Review these examples of websites that one author has bookmarked as having exemplary color schemes. (The 22 Features Every Top Nonprofit Website Has).

(3) typefaces

The recommendations about typefaces suggest that four or fewer type colors be used and that no more than three sizes be used.  Uncomplicated fonts that contrast well with the background are best because they enhance readability and transpose well across mobile, tablet and desktop platforms.  Examples of uncomplicated fonts include Arial, Helvetica, Times New Roman and Verdana.

(4) imagery

Rich engaging visuals can help to stir up emotions and incite reaction to our calls to action. We should also remember, however, that images are a much quicker read than text, given that people tend to process images 50,000 times faster than words.

(5) text

The typical visitor reads, on average, only 28% of text on a given page; so, economizing on text and offering content that is succinct are essential. (Patel. N. 8 Ways to Improve the Usability of Your Website). This can be achieved by using imagery to convey and supplement the meaning of text and by using headers, bullets and short paragraphs to organize material and enhance its readability. Text lines should be kept to 45 to 75 characters in width. The overarching goal should be to have enough compelling messaging above the fold that the viewer will be “captured” in five or fewer seconds. (Nonprofit Website Checklist).

(6) conventionality

There are some features that have become more or less universal in web design, such that users can be thrown off balance by a site that doesn’t follow them.  They include the following:

1. Main navigation is at top or left side of the page;
2. Logo is at top left or middle of page and clicking on it returns the reader to the homepage; and
3. Links change color/appearance when you hover over them

(7) responsiveness

Responsiveness refers to a layout automatically adapting to the size of the screen on which it is being viewed, whether that screen is a smartphone, tablet or desktop computer. WordPress is among the website creation tools noted for being capable of responsiveness.  Responsiveness is an important concern given that it is one element contributing to a site’s Google search ranking.  You can find out how mobile friendly your site is by using this Google tool.

3. content principles

 Content principles include donor-centricity, leading with emotion, engaging visitors and effective search engine optimization (SEO). Let's look at each of these principles, in turn.

a. donor-centricity

Just as the needs of donors should drive how our site is organized, those needs should also drive its content. One author has suggested that donors want three things when they come to a website:

1. To understand the organization’s mission, i.e., why it exists and why they should donate to it;
2. To know where their donations are going, i.e., a breakdown of how their money will be used; and
3. An easy way to donate, i.e., a simple donation page that includes a form and instant online payment (The 22 Features Every Top Nonprofit Website Has).

b. emotions first, facts second

Joan Garry suggests that:

There’s nothing that does a better job of inspiring and engaging than great storytelling. But why? It’s just how human brains are wired. People take actions based on emotion, and then justify those actions based on logic. In your messaging, think about what will push emotional buttons? What will trigger feelings like sympathy, outrage, loyalty, tribalism, caring, authority (pro or con), or humor? What language and visuals can you employ?

Studies clearly show that people are much more likely to donate when presented with a personal story rather than big group statistics. People identify with other people, not with abstractions. Make your stories individual, specific, and personal. Tell them well. Make them interesting, not wonky.

As an example of this idea in action, she sites the Million Mom March, noting that:

We saw this effect play out in a large way with gun control advocacy organization Million Mom March, our client, who was struggling with fundraising. So we created a “Tapestry of Woven Words” – a forum where people could express their thoughts and feelings. A high percentage of postings came from people who had lost a family member to gun violence.

On the same page we created the “Registry of Protected Children.” As people read the heartrending personal stories on the tapestry, they were given an opportunity to make a donation in the name of a specific child.

Did this increase online donations? Without question. In fact, this proved to be the most successful and viral fundraising tactic on the site. (Paley, S. Increase Online Donations in 4 Steps)

c. engagement, engagement, engagement

In the example above, the story was intended to incite donations. While giving is, perhaps, the most important call to action (CTA), there are many other ways to engage website visitors. They include (1) signing up for our email list, (2) attending an event, (3) signing a petition, (4) following you on social media, (5) volunteering, and (5) sharing content with others. Every page should have a CTA that is relevant to the content on that page.  Joan Garry notes that:

One of the oldest tricks salespeople know is that if you can get somebody to take an action, ANY action, you are much more likely to get them to take a second, bigger action.

This insight can be very useful for nonprofit websites. Getting site visitors to take simple actions like signing a petition, taking a poll, or subscribing to an email list is much simpler than getting them to make a donation, a much bigger commitment.

But once somebody has taken the smaller step they have taken the first step onto your “ladder of engagement.” It’s a lot easier to get somebody to take the second step than the first. So don’t go right for the big ask. If you want to increase online donations, date before getting married. (Paley, S. Increase Online Donations in 4 Steps).

As an example of a group putting this principle into action on their website, she sites vsGoliath.org. To boost engagement, use large buttons for CTAs, which will optimize their use by mobile visitors.  Also consider the use of popup windows that display a message after a visitor has been on a page for a certain amount of time, when a visitor nears the end of an article, or when he or she moves the mouse over a certain area. There are a variety of tools for creating popups here.

D. effective search engine optimization (seo)

Great content goes nowhere without search engine optimization (SEO). The phrase can strike fear into the uninitiated because it sounds complicated.  In some respects it is; but, understanding a few principles can take us a long way. Search engine optimization refers to things we must do after creating content to get search engines like Google and Bing to identify and rank our content highly; i.e., on the first page of results for people who are searching for the subject matter featured on our sites.  Generally, this means doing several things beyond creating content, including the following:

(1) identify keywords

Keywords are the words that people commonly use when they search for the type of content that our site contains.  For this blog, some of my keywords/phrases include “nonprofit fundraising,” “nonprofit websites,” “nonprofit leadership,” and “strategic planning.” I’ve created this keyword list by using Google’s free AdWords Keyword Planner to see the words people search for in Google when they are looking for the kind of content that’s featured on my blog.

(2) feature those keywords in our metadata and page content

The AdWords Keyword Planner will show the various iterations of searches for particular topics and the average monthly number of searches. Our job as content creators is to use the words with higher numbers of average monthly searches in our metadata and page content. Metadata is another one of those scary words. It basically refers to how we describe the content that exists on a given page of our site. Most website creation products on the market give us the flexibility to provide metadata, usually listed in a drop-down menu as “page description” or “page properties” when we create a new page of website content. It is particularly easy to do in WordPress, where a free “plug-in” called “Yoast SEO,” will make it very easy for us to nail SEO, giving us a template for adding keywords to a page title, page URL and page description. When we think about the fact that search engines are crawling through websites looking for keywords, it makes sense that the more we use those keywords in our page content, the higher our search ranking will be. Once we have identified appropriate keywords, therefore, it is a good SEO practice to include them in the headings, subheadings and body of content on a page. We should also add keywords to images via their “ALT text.” Typically, we can access “ALT text” by right-clicking on an image and selecting “properties.” Another important reason for adding ALT text to images is that it allows readers who are visually impaired to understand what’s on the page if they are relying on a service that is reading the page content to them. This is a very cursory discussion of SEO, but I believe the points covered here are sufficient for a small organization seeking to do the basic things necessary to build a foundation for effective SEO.  For more information, I suggest consulting A Beginner’s Guide to SEO.

4. measuring and monitoring principles

As I have noted in many previous posts, “choosing to improve” means tracking results and making changes to how we are operating based on those results.  This rationale extends to managing a website and Google Analytics is a free tool that is invaluable in helping us to understand how visitors are interacting with our websites: Google’s Analytics is free and incredibly powerful. Adding it to your site can tell you how visitors interact with your website, with useful information such as the total time a visitor spends on your site, the time a user spends on each page and in what order those pages were visited, and what internal links were clicked. You can also learn some things about your visitors, such as their geographic location, what type of device (mobile or desktop) they’re using, and even what browser and operating system they’re on. (7 Elements Every Nonprofit Website Must Have in 2017). Another important section is “Behavior,” which shows the keywords for which people searched in finding our site. Learn how to get started with Google Analytics here.

If you have found the above to be helpful, please share it with your colleagues.  If you haven’t yet had a chance to join my list, please use the link at right to do so today.

---

RESOURCES:

A Beginners Guide to SEO (Available at: https://moz.com/beginners-guide-to-seo)

7 Elements Every Nonprofit Website Must Have in 2017 (Available at: https://dotorgstrategy.com/articles/7-elements-every-nonprofit-website-must-2017/).

6 Steps to Create a Donation Website for Your Nonprofit (March 6, 2017) (Available at: https://www.wildapricot.com/blogs/newsblog/2017/03/06/how-to-create-a-donation-website)

The 22 Features Every Top Nonprofit Website Has (No Date) (Available at: https://www.wildapricot.com/blogs/newsblog/2017/06/08/best-top-nonprofit-website-features).

Creative Science Labs. Nonprofit Website Checklist (Feb. 24, 2017) (Available at: https://medium.com/@creativescience/nonprofit-website-checklist-bfd0092e4ee0)

Devaney, E. 8 Guidelines for Exceptional Web Design, Usability and User Experience (No Date) (Available at:  https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-Guidelines-for-Exceptional-Website-Design-and-Usability.aspx

Dick, J. Organizing Website Content (No Date). (Available at: https://venturi-web-design.com/planning-a-website-organizing-your-content-a-short-guide-for-beginners/)

Gauba, R. 8 Core Design Principles of the Best Nonprofit Websites (Aug. 25, 2016) (Available at: https://npengage.com/nonprofit-marketing/best-nonprofit-websites/).

HubSpot. 10 Quick SEO Tips to  Attract More Supporters to Your Nonprofit’s Website (No Date) (Available at: http://cdn2.hubspot.net/hub/53/file-353100254-pdf/Attachments/10_Quick_SEO_Tips_for_Your_Nonprofit.pdf?t=1410618379441

Lee, K. 25 Nonprofit Website Musts (March 1, 2015) (Available at: http://www.nonprofitpro.com/article/25-nonprofit-website-musts/).

Nonprofit Website Design: The Beginning Designer’s Checklist (Nov. 16, 2016) (Available at: https://www.atpay.com/nonprofit-website-design-checklist/)

Paley, Scott. Increase Online Donations in Four Steps (March 24, 2016) (Available at: https://www.joangarry.com/increase-online-donations/?utm_source=JG+Newsletter&utm_campaign=df4cd8b8a7-increase-online-donations-20160324&utm_medium=email&utm_term=0_40a7094ef4-df4cd8b8a7-103713365) Patel, N.

8 Ways to Improve the Usability of Your Website. (Aug. 8, 2014) (Available at: https://www.quicksprout.com/2014/08/08/8-ways-to-improve-the-usability-of-your-website/?utm_source=email&utm_medium=email&utm_campaign=email).

Simone, S. Are You Making These 7 Mistakes with Your “About” Page? (Feb. 16, 2012) (Available at: https://www.copyblogger.com/how-to-write-an-about-page/).

The Ultimate Nonprofit Website Redesign Guide: 30 Steps to Guide Your Nonprofit Website Redesign (No Date) (Available at: https://cdn2.hubspot.net/hubfs/433841/Content_Offers/EveryAction%20Ultimate%20Nonprofit%20Redesign%20Guide.pdf).