Have you ever visited a website whose design is just so effortless that you barely had to think about what to click and where to find the information you’re looking for? What about a website that was just so clear and intuitive that using it was a real pleasure?
That’s more common than you think.
Since working with dozens of nonprofit organizations, we’ve noticed that many of them make easy-to-fix mistakes in the way they design their websites.
This is not surprising. Building a clear, user-friendly, effective, and compelling nonprofit website isn’t an easy task.
There’s much to think about: paying attention to the layout and visual design, considering the user experience, SEO, Google’s search journeys, mobile optimization, and so much more.
So, to help you out, we’ve created this simple nonprofit website architecture — a practical map for building high-converting nonprofit websites.
This visual framework is designed to demonstrate how to structure your nonprofit website and see where content, resources, and calls to action should be placed for best attraction, connection, and conversion.
Sitemaps can be incredibly helpful when first building or redesigning a website. By having a website drawn out first, one can more easily see it from the eyes of the average visitor, as well as identify key issues with clarity and usability.
A sitemap is simply a listing of pages on a given website arranged in a way that clearly shows the relationships between each page and the others.
Naturally, not every website can be or needs to be the same. Every nonprofit organization is different, with its own unique circumstances, audience, and available resources. For example, a direct-service nonprofit organization might need a different site layout than a program-driven one or a research-focused one.
However, the sitemap we provided above can serve as a general outline to start with — based on best practices in the world of nonprofit websites.
Before we dive into sitemap elements, let’s first quickly recap how we navigate websites:
Many nonprofit websites have similar primary navigation. Usually, primary navigation is located on the top right-hand side of the website. These pages might say something like “About Us”, “Our Programs”, “Get Involved”, or “Our Research.” These are the “main” pages and they serve as the foundation of a website’s structure. All subpages then link from these main pages.
The main pages are also called parent pages, and the subpages child pages. Grandchild pages then navigate from child pages.
Note: A website will also often contain orphan pages. An orphan page is a page that isn’t linked to any other page on the website. Sometimes, one might choose to intentionally create orphan pages (for example, an orphan page that says “you have successfully registered for volunteering”). However, be careful to not create them accidentally, as that might deter website visitors.
Secondary navigation is often found close to your primary navigation in the top right-hand side of the page and often appears as a CTA button that may say something like ‘Donate.’
If you currently have too many pages as top-level pages in your main navigation, you might consider placing a few of those in the secondary navigation. This will clean up your main navigation a bit, and allow you to organize your pages more strategically.
Sidebar navigation allows visitors to easily navigate to related content within the section of the site they’re currently viewing.
Pro tip: For best success, you’ll want your navigation to collapse in order to work well on a smaller screen, such as a phone screen.
1. Home Page
Here are the basics of an effective nonprofit site homepage: a compelling headline, an eye-catching beneficiary hero shot (or video clip), a clear mission statement, an easy to spot call-to-action (CTA) – ideally donation-related, along with a clean design and an intuitive user interface.
- Compelling Headline
- Hero Shot or Video
- Mission Statement
- 3 Testimonials
- 3 Impact Statements/Benefits
- 3 Pillar Blog Posts
- Newsletter Sign Up
Furthermore, most successful nonprofits also include testimonials (usually by beneficiaries), a newsletter sign up, pillar blog posts, as well as elements stating some of the program characteristics and/or impact the organization is having on the intended issues.
Pro tip 1: While many choose to start by designing their homepage, you might find it useful to design a homepage only after you decide what the rest of the website will contain. Then, select the highlights for the homepage.
Pro tip 2: Your website shouldn’t necessarily reflect your organizational structure. By copy-pasting your program names, organizational areas, and departments, you’re making your website easy to use for your employees, but not for all other website visitors. When creating your sitemap, be led by logic instead. Test out different structures with friends, family, and focus groups in order to see how someone unfamiliar with your work would use the website.
Compelling Website Headline
Compelling headlines are key. While the only way to really know whether your headline works for your nonprofit is to A/B test, here are some general guidelines:
- Keep the website headline between 6-12 words (ideally).
- Write the headline last, after you’ve written everything else.
- Stay authentic and avoid anything that sounds too ‘jargony’ and ‘salesy’. No ‘instant solution to poverty’.
- Either make your headline into a clear call-to-action (e.g. “Book your art gallery tour today”) or have your headline showcase your mission front and center.
- Your headline can also emphasize what you want visitors to remember the most, or your biggest value proposition (e.g. charity: water’s “100% of your donation funds clean and safe water.”)
- Use descriptive and specific adjectives. Avoid words like ‘amazing’ and ‘great’ that are overused and say nothing to your visitor.
- Use effective keywords in your headline that will catch the attention of your audience and help your website be more ‘searchable’. As with all keywords, be sure to work them in naturally.
- Help your headline by adding a sub-headline to boost clarity, and potentially adding an intro paragraph or bullet points to further explain and emphasize key points.
- You might want to try being creative, playing with mental imagery, or using humor. Do this only if you’re confident, and keep testing whether the headline is working for you.
Call To Actions are key to a performing website. If you want your nonprofit website to lead your visitors to ‘do’ something and not be purely informational, calls to action are the way.
Start by considering the user story. What do you want users to do once they land on your website? Do you want them to donate? Subscribe to your newsletter? Schedule an appointment?
Many nonprofits, and understandably so, choose to focus on donation-related CTAs on their homepage. If your goal is to raise funds online, make sure your donation button is very visible and that it stands out against the rest of the text/design.
However, a different CTA might be more appropriate for your particular nonprofit. For example, if your nonprofit is a museum, you might want visitors to purchase a ticket, or you might want to invite them to join a monthly giving program.
Whatever the CTA which best reflects your unique priorities, it should always be present on the home page.
Defining the problem the nonprofit is solving front and center is huge. While not an absolute necessity, including your mission on the homepage of your website, is certainly worth considering.
However, if your mission statement is very ‘you-centered’ or too focused on some ideal future state (vision), try reframing it and rewording it – that is, if you want to place it on your homepage.
Instead, focus on what problem you’re solving and how. Make that very clear and specific.
Pillar Blog Posts
A lot of organizations, both for-profit and nonprofit, make the mistake of simply showcasing their most recent blog posts on their homepage. However, a better choice would be to find the blog posts that were the most successful in terms of engagement, signups, donations (or other relevant performance indicators), and show those on the homepage instead.
Alternatively, you can use three blog posts that each target a different segment of your donors. And if you’re not segmenting your donors already, now is the time to start doing so! Each one of the selected blog posts will provide a more customized journey for your prospective donors.
Furthermore, as a standard best practice, each individual blog post should have CTAs in the body copy, and internal linking should be boosted by feeding in related content.
Pro tip 2: Instead of simply inviting your website visitors to sign up for a newsletter, consider offering something of value right at the start (e.g. a downloadable resource).
Pro tip 3: Compelling visuals are a powerful tool for catching the attention of your website visitors. A great nonprofit hero shot will ideally portray positive emotions and feature a single individual looking at the camera, usually smiling.
We’re living in a pandemic, there’s no avoiding it. Dedicate a page on your website to how your organization is responding to COVID-19. Here are some tips:
- Consider the different audiences your website is communicating to and adjust the messaging accordingly. For example, your board members will likely be receiving emails and calls from you instead of reading information on your website.
- Identify the most important things your website visitors need to know and develop one central message — or set of messages — that you can use and reuse.
- Guide your website visitors to relevant authorities and experts.
- Make sure you address some of the key questions your donors might have, particularly about how you’re using your donations now and ensuring the safety of your employees, volunteers, and beneficiaries.
- Share information about how you’ve adapted your operations to be able to continue furthering your mission (if you have been able to).
- Use language that brings everyone together. Avoid fear-mongering phrases.
- Have a person or a team dedicated to COVID-19 communications to ensure consistency.
- Offer helpful resources and support, to the best of your ability, to your website visitors in need.
2. About Page
Often severely underinvested in, “About Us” pages are essential for good nonprofit websites. Nonprofits are in the business of “stories”. In a way, their “product” is their mission and all the ways in which they’re accomplishing it.
- Our Story
- Our Mission/Vision
- Our Team
- Board of Directors
- Our Impact
- Contact Us
The “About Us” page is where you share your story, the how and why of how your organization came to be, how you see the world, what your values are, where you work, and who are the people that are helping you accomplish your mission.
The “About Us” page helps your website visitors connect to your organization, which is why it’s important to make it “human”.
Your visitors want to understand the culture of the organization they’re considering giving to. There might be numerous other organizations doing a similar kind of work, so it’s in the “About Us” page that you can showcase what makes you unique.
Demonstrating impact is key to success when it comes to nonprofits. Today’s donors value transparency and want to know that an organization they’re donating their time or money to is worthwhile and credible.
To showcase impact, share both data and stories. Data is important to build credibility, but stories help engage the readers and allow them to internalize the information.
A good “Our Impact” page can help drive donations, program participation, and other ways of involvement.
Pro tip 1: Differentiate between mission, vision, and values. A mission statement describes the overall purpose of an organization. The vision statement concerns the ideal state of the future, how the world would look like if the organization fulfilled its mission. Organizational values are core principles guiding the activities and behaviors of an organization. You can choose to dedicate a page to each one of these or share all of them in one.
Pro tip 2: Transparently sharing financials is important for nonprofits when it comes to building donor trust. Consider dedicating a whole page to financials or otherwise linking to your last annual report.
Pro tip 3: If you’re including a “Contact Us” page and form, make sure you’re on top of it. If your website visitors submit forms, they will expect answers and action. Don’t overwhelm visitors with dozens of different email addresses they can send their inquiry to. Keep it simple.
3. Our Work Page
If a prospect visits your “What We Do” (or “How We Work” or “Programs” page), they’re interested in your work and how exactly you’re going about accomplishing your mission.
This is the space where you need to give people the facts they need to make an informed decision about whether they want to support your work or not. This is the space where trust is built, which is why it’s crucial to get it right.
- Program/Activity 1
- Program/Activity 2
- Program/Activity 3
- Program/Activity 4
Don’t overwhelm your readers with mountains of information. Focus instead on sharing brief information about your programs, results to date, a few photos/videos, and testimonials.
Tell the story of how your nonprofit organization has solved problems for real beneficiaries by conducting the program activities. Talk about real situations and real outcomes (with permission of course!)
If you’re a research-focused nonprofit, you can use this page to organize your reports, by, for example, grouping your reports by topic. You can then include a heading for each topic group on the “Research” page with a one-sentence summary of each report and a link to that report’s subpage. If you have enough of it, break “research” into topic areas.
Pro tip 1: Use descriptive page titles when describing your programs. This will ensure that each page on your site is clear and easy o understand, which is needed if you want visitors who are unfamiliar with your organization to understand your work. You can use the full program names later on within the page’s content if you need to.
Pro tip 2: If you’re running more than a few programs, it likely means your nonprofit organization is driven by programs, so you might want to consider using “Program Areas” as the main page, which would then branch out into separate individual programs.
4. Get Involved Page
Take the time to outline the different options for involvement for your audience (all at varying levels of commitment). Examples include donating, volunteering, becoming a partner, becoming a fundraiser, spreading the word, donating in-kind, attending an event, and many other options unique to your nonprofit (e.g. becoming a foster parent, a patron of the arts, a peer educator, etc.)
- Attend an Event
- Become a Fundraiser
- Planned Giving
- Become a Partner
- Other 1
- Other 2
Ideally, you’d dedicate a page to each type of involvement. On each page, take time to explain the methods in detail and provide brief and easy instructions for your website visitors to take action.
Share testimonials by others who are involved in the same way (e.g. testimonials by volunteers on the “Volunteer With Us” page, and try to give your website visitors a sense of what it could look like if they joined in as well.
Pro tip: If you want to raise funds online, it’s not sufficient to just have the option “there”. In addition to that, you’ll want to have user-friendly, clear donation forms that are easy for donors to understand and use. For that, you’ll need a great online donation solution. When you use GiveForms, you get that and also gain access to a plethora of nonprofit-specific benefits:
- A customizable donation page optimized for mobile
- Embeddable donation forms directly on your website
- Donor dashboard to help you search, view, and export your donations
- Monthly recurring donations and social sharing options
5. Blog/News Page
Showing your website visitors that your nonprofit is active and engaged is vital to creating a sense of trust and rapport.
Create a blog to post your insights, stories, research, and interviews. Create a news section to share the latest wins, press releases, and announcements.
You might even want to consider posting an event calendar if you have quite a few events coming up. Keep your blog and news pages regularly updated.
Link to your social media profiles (and keep those updated too). If you’re very active with news and your blog, you might want to consider dedicating separate pages to these, otherwise, keep it all as one page.
Pro tip: If you’re not active on your blog, perhaps opt for not including a blog page on your website. In some cases, it’s better to not have a blog post than have one that was last posted 4 years ago.
Before You Go
Once you map your website, take some time to consider the following questions:
- Is the hierarchy of content intuitive for site visitors?
- Why are X, Y, and Z, the main level navigation items? Are they the best choice for organizing my content?
- Does the main page include direct access to where I want the users to navigate most frequently?
- Are there any sub-navigation items that need to receive a higher priority?
- Is any of the content redundant?
- Did I leave anything out that should be included?
Then, test, test, test.
Use the insights you gain from testing to adjust and tweak your site so that it works for YOU.
Whether this is your first time developing a site map or you’ve done it several times before, the process can certainly be a little overwhelming.
But it doesn’t have to be so!
Be sure to invest some time to think through and identify your key goals and objectives before you start building a website. Remember that your primary goal should always be to drive your specific target audience to act.
The secret to nonprofit website success isn’t in the slick design, the coolness of your animation, or even the hyper-professional photography (although these can certainly help).
It’s in the structure and substance of your website and how well it serves your audience and spreads your message.
And building a good sitemap is how it begins!
However, even with the best website, you’ll need a great online donation solution if you want to raise funds online. When you use GiveForms, you gain access to a plethora of nonprofit-specific benefits:
- A customizable donation page optimized for mobile
- Embeddable donation forms directly on your website
- Donor dashboard to help you search, view and export your donations
- Monthly recurring donations and social sharing options
- And more!