There are plenty of decisions to make for your website. Once you’ve decided how to build your website and design it so it's visually appealing, you also need to consider how to structure your website.
A clear structure will intuitively suit your website visitors’ needs, and encourage visitors to explore more of the website. If your menu and pages are messy, visitors will exit as soon as they are frustrated.
We want your website to be welcoming and crystal clear for your visitors, because your nonprofit should put its best foot forward!
Let’s talk about the following elements of your website’s structure:
What is a "Tree Structure"?
Before we move on to the structural details, the first step in creating your website is to understand what a tree structure is. There are other types of website structure, but we recommend this one. Tree structure is simple to create and modify, and has a positive user experience that in the end will make your website rank higher on search engines.
So, what is a tree structure? Most websites have a home page with a menu, which has sections and subsections.
The tree structure is the sitemap for your website that shows how pages are organized. You should build your website structure according to your website’s goals.
You can sketch your tree structure first, without any thought about the website design. This would help you focus on how information is organized on your website.
If your website is only intended for one goal, such as attracting new members to join your organization’s membership, your tree structure can look like this:
If your website has multiple goals and would receive different types of visitors, you should plan your menu so that each visitor can quickly find what they are looking for.
Let’s take a look at how the American Red Cross website is structured:
This is a great example of a website preparing for multiple types of visitors. At the top, you can see that information is divided into different possible actions: Donate, Give Blood, Volunteer, and Get Help.
This way of organizing the categories is very helpful for visitors, because it only takes one click for them to find information. Notice how the "Donate" link is one of the first links at the top left corner of the page. If a visitor wants to find out how to volunteer, they only have to click on one link.
There is another important menu category called About Us. Every organization needs this section because it is where visitors can find information about the organization’s mission, staff, projects, news, and other resources. Here are all the pages found under About Us on the American Red Cross website:
Subsections such as Our Work, Who We Are, News & Events, and Careers help organize the pages.
Did you see that the page titles are all under 3 words? This is the perfect segue to some tips about building your tree structure!
Keep It Simple
When reading the page titles in the menu, the visitor should be able to guess what information is available. If you have a couple pages that describe your membership levels and payment details, you should call that menu option Join. You should avoid long menu options, such as "Become a Member Today."
Your main menu should have no more than 6 options. The American Red Cross example (see above) has 2 menu levels:
- The main menu you see without clicking on anything
- A secondary menu that is visible after selecting one of the options.
Don’t add any more menus, because simplicity will work wonders for your website!
Highlight Your Website’s Goals
If the primary goal of your website is to collect donations to support your organization, highlight it. The donation page should be immediately visible when visitors arrive at your home page. Feeding America’s website features the Donate button prominently in a different color:
The top of the page is an important area to think about, because visitors will see it first. The website header should have:
Logo and name of your organization
If it is not clear what your organization does from the logo and name, you should add a tagline or a short description
At a glance, this section of your website should immediately inform your visitors what your organization does.
If you have a section of your website for members only, you should add the "Member Log In" or "Members Only" button at the top right corner of the website page.
Call to Action
Your organization might have a specific action that you want your website visitors to take. These actions should be in the header in the form of a button.
Subscribe to Newsletter: If your organization communicates primarily through an email newsletter, make it easy for your website visitors to subscribe to your newsletter. This button should be at the top of the website.
Donate: If you are asking people to visit your website to donate, this button is extremely important to have in the header! It has to stand out on the website so that donors can input their information quickly and easily.
The area at the very bottom of your website is called the "footer". Even if visitors click on different pages, the footer will remain the same.
The footer will usually have information such as:
Legal: general conditions of use, licenses, nonprofit 501(c)3 status
Organization: Mailing address, contact information, job postings
Partners: Feel free to add logos and links to your partner organization’s websites
Social Media: You can encourage website visitors to follow your organization on social media. Insert social media icons and links
Here is Feeding America’s footer, which includes a lot of helpful links:
Example of Website Structures
You now know more about how to create your nonprofit’s website structure. Feel free to shift the placement of information between the header and footer, depending on your organization’s priorities and needs.
Here are some more examples of nonprofit organizations who have structured their websites clearly and intuitively:
Source: Habitat for Humanity
Source: Teach for America
Still need help building the structure of your nonprofit’s website? AssoConnect has a website tool to create the right website for your organization.
Check out AssoConnect, the all-in-one software for nonprofits, and start your 30-day free trial!