Nonprofit Website Design Projects: The Comprehensive Guide

February 6, 2019
Explore our guide to nonprofit website design.

Contact Team DNL today to discuss your nonprofit website design project.

You already know that a strong web presence is an essential asset for any organization today, including nonprofits, but the internet is a crowded place. An admirable mission alone isn’t enough to catch potential online donors’ attention, so organizations must make sure their websites provide a positive experience for visitors, and are easy to navigate.

Here at DNL OmniMedia, we specialize in helping nonprofits make the most of their technology. That includes custom nonprofit website design projects! Sometimes the process of partnering with an outside firm for help can be intimidating, particularly for growing nonprofits that haven’t yet worked with a technology consultant in any capacity.

To quell any concerns, let’s walk through a few different areas your team might be curious about if you’re considering upgrading your website:

  1. Overview of Nonprofit Website Development
  2. The Team DNL Nonprofit Website Design Process
  3. Tips to Ensure Your Nonprofit Website Design Project is a Success
  4. Best Nonprofit Website Design Examples to Inspire You

Continue reading to learn how you can create a website that lands on our top nonprofit websites list. And, if you have more specific questions about web design, don’t hesitate to reach out to learn more about our process. Let’s dive in:

This section contains an overview of nonprofit website development.

Overview of Nonprofit Website Development

Unfortunately, many nonprofits neglect developing their web presences and optimizing their website until after they’ve already outgrown their starter sites. Because some organizations are working with scarce operating budgets, this makes sense!

However, there are clear arguments for why investing in an effective website is important for growing organizations. To start, a website fills many crucial functions, including:

  • Communicating your mission, history, and campaign information to donors
  • Motivating online visitors to donate with smart design, quality content, and easy-to-use tools
  • Accepting and processing online donations
  • Recording and reporting crucial engagement data, like transaction information and email subscriptions
  • Creating a positive impression of your nonprofit’s brand for both new and return visitors

On top of all of these functions, we can’t ignore the increased reliance on nonprofit websites brought about by the challenges of 2020. Suddenly, virtual engagement isn’t just a primary driver of engagement— it’s the only way to connect with supporters. When it comes to interacting online, your website is your nonprofit’s home base!

If your own website wasn’t optimized heading into 2020, we’d guess that you may have faced some challenges pivoting all of your interactions to the internet. Right now is the perfect time to make sure your site is optimized for the road ahead— something that will help during times of social distancing and beyond.

What should a nonprofit website include?

What should a nonprofit website include?

There are a few essential elements needed for a nonprofit website to effectively communicate your mission, process donations, motivate visitors, and more. While the needs of your specific nonprofit may vary from that of others, the following elements are generally essential for all organizations and causes:

  • About Us Page: This page should include a clear presentation of your nonprofit’s mission and the efforts you conduct to further it. It can also include a history of your organization, testimonials from those impacted by your work, and engaging images and videos from your years of work.
  • Donation Opportunities: For most organizations, this refers to an online donation form. Ideally, your form should be mobile-optimized and streamlined with a limited number of required fields to make giving as straightforward as possible. Additionally, you should embed this form directly on your site to create a trustworthy giving experience. Then, you should include calls-to-action (CTAs) across the site that point to this giving page.
  • Ways to Get Involved: Include clear instructions for how to get involved with your nonprofit beyond learning on your website, with the goal of making ongoing engagement as easy as possible This could mean donating, starting a peer-to-peer fundraiser, volunteering, completing advocacy work, or simply signing up for your email list.
  • Educational Resources: Consider providing resources to site visitors who are interested in learning more about your cause, such as links to studies and interviews with experts speaking on the topic. This can help forge a connection between your supporters and your cause in general, which has two-fold benefits: they’ll be more invested in your organization and may even conduct their own advocacy beyond your doors.
  • Blog: Keep in mind that a regularly-updated blog is more effective than one that’s updated just once or twice a year. Some ideas to fuel your content are posts about fundraising efforts so far, upcoming opportunities, spotlights on superstar volunteers and donors, and impact stories.

However, creating an impactful website (and landing a spot on our list of top nonprofit websites) isn’t as simple as assembling these key elements and calling it a day. Your website is often the first point of online engagement between a supporter and your organization, so you should actively ensure that you build a motivating site that’s representative of both your cause and nonprofit alike.

Let’s walk through the basics of creating a nonprofit website before taking a deep-dive into Team DNL’s process.

How do you create a nonprofit website?

How do you create a nonprofit website?

In general, there are 6 basic steps in any nonprofit website design project:

  1. Outline the parameters of your site. This includes your goals for the project, your budgetary constraints, and, if required, the timeline you have to complete the project. However, we want to note that it is always best to allow for the scope of your project to drive the timeline if you are able. If you’re working with a consultant, you’d bring them into the process after confirming these details with your internal team.
  2. Choose a content management system (CMS) and purchase your domain name. If you’re already working with robust nonprofit technology solutions, you may already have a tool in your arsenal that can host websites. You’ll want to choose a CMS that can integrate seamlessly with your CRM and other tools for ease of data transfer. A technology consultant can help make appropriate recommendations that would benefit your nonprofit’s requirements.
  3. Design your website’s theme and basic pages. Your website’s visual theme should be consistent throughout the pages, to create a cohesive experience for site visitors. It should also align with your nonprofit’s branding on other marketing materials.
  4. Add content to your website’s pages. This includes filling out your “About Us” content, outlining engagement opportunities, and building your first blog posts.
  5. Test your website for user experience. You’ll want to make sure that your site is accessible for all users and follows the Web Content Accessibility Guidelines (WCAG). Further, you’ll want to ensure each page of your site is mobile-friendly and can be viewed on all devices.
  6. Launch your website. Once you launch your site, add links to it in your other marketing materials such as your social networks, email newsletter, and even direct mailings. This ensures your website is an active, integrated member of your overall nonprofit digital strategy.

These projects will look drastically different for each nonprofit completing them. While some nonprofits may be building a new site from the ground-up, others may simply need a refresh of their current digital presence.

In a similar vein, each consulting firm will have its own approach to nonprofit website design projects. So, let’s take a deep-dive into Team DNL’s process to give your team an idea of what you might expect when working with tech and design experts.

Explore the DNL OmniMedia nonprofit website design process.

The Team DNL Nonprofit Website Design Process

As you work with a web design consultant to design the perfect solution for your organization, you’ll find that every firm has its own particular take or version of the process. At DNL OmniMedia, we focus on taking time to fully understand the client’s needs and the scope of their goals. We’ve written elsewhere on the importance of developing comprehensive technology plans when making major software or hardware upgrades, and the web design process is no different.

In order to illustrate the basic nonprofit web design process, we’ll walk through the steps that we follow with our own nonprofit clients.

There are six basic stages and steps of nonprofit website design.

The process is broken down into 6 core stages, each containing several steps within them. The whole process might seem a bit overwhelming at first, but don’t worry. It’s always better to take your time preparing a comprehensive plan before getting started than it is to jump headfirst into an intensive process that could risk derailing your entire website without proper guidance and pacing.

After all, a nonprofit’s web presence is one of its most valuable assets. Your organization’s website serves as a hub for information on your mission and various campaigns. It should be able to process donations, convert visitors into donors, and give a powerful first impression of your organization.

So, let’s walk through how we help nonprofits create high-performing websites that do all of the above and more.

This is the first stage in our nonprofit website design process.

Stage 1: Discovery and Scope

The discovery and scope stage of the nonprofit web design process is probably the most important. It creates a framework for the entirety of the project by establishing goals, parameters, and other guidelines. There are a number of important steps within this stage:

There are several nonprofit web design steps within the discovery and scope stage of the project.

1. The Kick-Off Meeting. During the kick-off meeting, we meet to discuss your mission and what makes your organization unique. What is your average donor like? What is the current state of your website? Most importantly, why do you want to redesign it?

2. Establishing and Documenting Goals. What does your organization’s new site need to accomplish? Typical goals include creating a more intuitive user experience to boost donor engagement, or integrating with important software to streamline campaign and data management. This step also involves creating a responsible party list, which assigns members of your nonprofit’s team with specific tasks they’ll need to complete, like providing new brand assets. Goals and responsibilities must be clearly documented.

3. Determining the Hosting Environment. This step basically involves choosing how your new website will be hosted and managed online. For instance, WordPress is one of the most popular website builder and content management platforms available. We can recommend particular platforms depending on your nonprofit’s web design needs and goals.

4. Gathering New Brand Assets. A nonprofit website relaunch typically involves updating its visual branding more generally. We’ll gather and compile your new brand assets, like logos, fonts, and colors, to reference during the design process.

5. Discussing Your Desired Functionality. What particular functions do you already know you want your new website to provide? These might include automatic data reporting to your CRM, or the ability for visitors to create their own peer-to-peer fundraising pages.

6. Identifying Possible Integrations. Using your desired functions and the overarching goals we’ve already established, we’ll identify some possible ways to integrate your website with other software. Integrations with CRM platforms and fundraising software, like TeamRaiser, for example, are common.

7. Discussing Structure and Content Strategy. Next, we begin to visualize your new site. How are pages structured? How will visitors navigate between sections? At this point, you’ll choose the main pages and categories that will be used to organize the whole website once it’s completed.

8. Creating an Implementation Plan. Now, taking all of the parameters we’ve discussed and documented into consideration, we’ll develop a comprehensive implementation plan. This will establish timelines and benchmark goals for the rest of the web design project.

This is the second stage in our nonprofit website design process.

Stage 2: Creating Wireframes

To begin, you might have a question:

What is a web design wireframe?

A website’s wireframe is essentially the blueprint for how that site will be visually arranged and structured. It helps web designers and clients visualize how different elements, including blocks of texts, navigational tools, and other interface elements, will fit together on each of the website’s main pages.

However, in web design, a wireframe is meant to illustrate the structure, functionality, and general layouts, not the detailed appearance of the final site. Stylistic color, typography, and graphics are generally not included in a wireframe. Instead, styles are represented in a separate branding guide.

The main purpose at this stage is to develop template layouts for each type of page that will be on the site and create a framework for how each main page will link to the others. At DNL OmniMedia, we usually provide between 5 and 10 wireframe page templates for our clients’ web design projects. These pages typically include:

  • Homepage
  • Main blog index
  • Individual blog post
  • Internal content page(s)
  • Contact page
  • Donation form

For example, here’s a template nonprofit web design wireframe for a new homepage:

This sample wireframe shows you how a nonprofit web designer might begin to structure your new website.

During this stage of your nonprofit web design project, your new website will begin to take a concrete form, and the underlying content strategy will begin to come into focus. All of the guidelines and goals you worked together to identify during the first stage should be incorporated into the wireframe.

After developing wireframes for your nonprofit’s new site, a consultant should offer it for one or two rounds of review from your team. Once you’re happy with the wireframes, it’s time to move onto the design stage!

This is the third stage in our nonprofit website design process.

Stage 3: Visual Design

The visual design stage of your nonprofit web design project will essentially consist of your consultant or web designer filling in the previously-completed wireframe with your organization’s visual elements and new brand assets.

At Team DNL, we follow this visual design process:

  1. Wireframes are approved.
  2. We design the page templates based on the approved wireframes, the client’s branding, and other necessary functional elements.
  3. The client previews their new homepage and one secondary page to ensure we’re on the right track with capturing their visual identity.
  4. Once approved, we continue completing the designs with the rest of the wireframe templates.
  5. The client then reviews the full set of branded templates and provides feedback as needed.

Once a full design has been approved and compiled, your nonprofit web design team will be ready to move on to actually developing the new site and any special functions your organization needs.

This is the fourth stage in our nonprofit website design process.

Stage 4: Site Development

Next, using the wireframes and fleshed-out visual designs, we get down to the nuts and bolts of website development.

We handle both the front-end and back-end development of your site. This encompasses both donor-facing functions, like donation forms, blog posts, and email subscriptions, and internal functions, like custom integrations with other software you use.

For example, we worked with The National Partnership for Women and Families on a custom Luminate Online consulting project. They needed a way to improve their website and integrate the Luminate Online and CMS platforms.

Our nonprofit web design project with the National Partnership for Women and Families highlights the custom development stage.

We developed a new website with a highly functional and more intuitive structure for the National Partnership’s visitors. Most importantly, the improved website provides online donors with smarter, Luminate Online-integrated tools, like search functions and mobile-optimized donation forms. Click the image above for a more in-depth case study of this project.

It’s during the development stage of your web design project that your website will begin to really take shape. The custom integrations that you discussed back at the start of the project will start to be implemented. The implementation plan that we work to develop during the first stages of the project will provide projected timelines and benchmarks. Your nonprofit’s new website will be ready to launch in no time!

This is the fifth stage in our nonprofit website design process.

Stage 5: Content and Launch Prep

There are a few components to this stage of the web design process:

There are a few steps within the nonprofit website design pre-launch stage.

  • Content implementation
  • Link scanning
  • Training and documentation

Content implementation: Once your organization’s new site has been developed and assembled according to the structure designed in the wireframes, it’s time to fill in each template page with the actual content that it needs to display.

This might involve entering new text into each page and uploading new image files, or it might involve migrating content from your existing website to your new one. Nonprofit web design projects often involve a combination of creating new content prior to launch and migrating valuable content from a previous site.

Link scanning: Once your new website has been filled in with your nonprofit’s content, we run a link scan to identify and resolve any serious redirection issues prior to launch.

Having a large number of links that direct users to content that no longer exists or that automatically redirect several times from your old site to your new one can have serious effects on performance. These kinds of issues will damage your visibility on search engines and provide a poor user experience for donors trying to navigate on your nonprofit’s site.

Training and documentation: This last component of the pre-launch stage of your project is particularly important. At Team DNL we make sure to compile a comprehensive website training guide to help our clients fully understand and manage their custom-built websites once they go live.

Whenever you work with a technology consultant on a custom development project, make sure they provide you with training and documentation on new functions.

This is the sixth stage in our nonprofit website design process.

Stage 6: Testing and Launch

As your web design project comes closer to completion, it’s vitally important that your design team takes the time to run a few tests.

Specifically, launching a new website without ensuring that visitors on different web browsers will be able to view it can be a serious issue. At DNL OmniMedia, we internally test the new website in all of the leading web browsers, including Chrome, Firefox, Safari, and others in both desktop-based and mobile-based versions.

Any bugs identified during the tests are fixed, and then we schedule an official launch date. Finally, your organization’s brand new website goes live as planned.

Contact Team DNL today to discuss your nonprofit website design project.

Use these tips to ensure your nonprofit website design project is a success.

Tips to Ensure Your Nonprofit Design Project Is A Success

What To Do Before Hiring a Nonprofit Web Designer

Before engaging a nonprofit web designer or tech consultant, there are a few steps your organization should take to streamline the project from the start. There are three main areas to be aware of before getting started reaching out to prospective consultants:

Make sure your team is familiar with your existing tools before starting a new nonprofit web design project.Re-familiarize your team with the tools you’re already using.

Nonprofit organizations today have a wide variety of tech tools at their disposal, and chances are you might not even be familiar with all the platforms and software in your toolkit. Plus, not every member of your team will have the same level of familiarity with each tool, and some members might not even be aware that you have some of them.

Your core team of staff who will be directly involved in your nonprofit website design or overhaul project needs to be familiar with your entire tech toolkit.

This saves time for both your team and your web design consultant across the course of the project for a few reasons. You’ll avoid asking for new functionalities and features that you already had access to, and it prevents your organization from spending money on new tools that you might not need. It also saves time for your consultant once they assess your current toolkit and begin building a strategy for upgrading your website.

Carefully budget for your nonprofit web design project before reaching out to a consultant.Make sure to budget accordingly.

Large-scale nonprofit tech projects are not a small investment; they usually require a fairly significant budget in order to return long-term value for your organization.

Underestimating the cost of a tech project can become a huge headache for your organization, so being prepared and understanding the scale of the investment you want to make is essential. High-quality, custom web development is a sizable investment.

Piecemeal solutions to tech issues can sometimes be effective, but they rarely offer the kind of continued value that a comprehensive strategy developed by a nonprofit tech expert does. Plus, one-time purchases and add-ons can quickly add up. If your organization wants a new website with plenty of integrated features to improve both the donor experience and your internal logistics, a customized strategy from a nonprofit consultant is probably your best bet.

Ask your team a few essential questions before hiring a nonprofit web designer.Consider any questions you should ask internally first.

Along with understanding your current toolkit and budgeting appropriately, it’s important that your team aligns on any other elements that will be addressed during the course of your web design project.

For example, before redesigning your website, ask your team these questions:

  • Will our branding be changing during this project, or will our visual assets like our logo, colors, and fonts stay the same when we re-launch the website?
  • What is the scope of the infrastructure we already rely on? Are there tools we have but never use, and are there any other features or integrations we wish we had but don’t?
  • Are there any chronic pain points in how we currently operate and use our website? Can we define them and pinpoint some causes before getting started with a redesign?

Taking the time to identify these elements early will streamline the whole process for your organization. For instance, having your organization’s new brand assets developed and ready to go before engaging a web design consultant will save immense amounts of time.

Nonprofit Website Design Best Practices for Your Project

Finally, let’s walk through a few best practices to keep in mind as you begin planning your organization’s next web design project. These strategies aren’t about the design process itself, but rather the process of initiating and managing a large tech project.

Following these best practices throughout the length of your project will simplify the experience for everyone:

Review these nonprofit website design best practices with your team.

1. Make sure your team understands the scope of the web tools you already use.

We touched on this point in the previous section, but it bears repeating. The nonprofit technology market is fairly diverse; there are tons of tools available for practically any tech need your organization might have.

Here at DNL OmniMedia, we’ve found that many nonprofit teams that we work with aren’t initially on the same page about their current toolkits when we begin collaborating on a web design project. Understanding all the tools that your team uses to manage and operate your website goes a long way to streamline strategy development.

We recommend that nonprofits first conduct a technology audit and begin developing a tech roadmap before launching a web design project. This ensures everyone is on the same page about the state of your current tech assets and your prioritized goals going forward. Explore our guide to developing a nonprofit technology plan for more information on getting started, or reach out to Team DNL directly to discuss the parameters of your project.

2. Identify steps in your project that might take longer than expected.

Ideally, your nonprofit web design project will closely follow the implementation timeline that you develop with your tech consultant at the beginning of the project. However, it’s not at all uncommon for some steps to longer than initially planned.

Identifying those points in the process ahead of time can help mitigate any confusion or frustration that might occur as a result of a delay. Typical examples include content organization or creation. If your organization has an extensive backlog of blog posts, or if you know it might take some time to get the wording on your new homepage just right, plan ahead for those steps to take a little longer than normal.

3. Gather any new brand assets early on in the process.

We also touched on this point in a previous section, but it’s another common issue that we encounter with nonprofit clients looking to redesign their websites.

If you know that your organization’s visual branding will be changing over the course of the project, make sure to have working versions of your new brand assets ready to use as soon as possible. This includes logos, branded headers, and specific font or color choices.

4. Always follow content creation and management of best practices.

Content marketing and blogging have quickly become important ways for nonprofit organizations to expand their online audiences and reach new donors. However, many organizations don’t follow best practices for content management that can save them significant time and energy during web design projects.

High-quality blog posts can be very valuable for your website, so it’s always worth saving the best of them. This means that properly tagging and organizing your blog posts can go a long way to streamline migrations to a new website. This is particularly important if your nonprofit’s blog posts represent the bulk of the content on its site.

Let these top nonprofit website design projects inspire your team.

Best Nonprofit Website Design Examples to Inspire You

Lastly, but certainly not least, let’s review a few website design projects that Team DNL has worked on over the years. This can give you a look into the work we do, as well as some inspiration for your next project!

Check out an overview of the projects below, or head over to this list of top nonprofit websites for an in-depth look at each project.

iThrive games has stand-out nonprofit website design.

iThrive Games

iThrive Games is a nonprofit devoted to developing educational resources for teens. They offer a variety of services and resources, including simulations, studio classes, research journals, and of course, games! They needed a website that could bring all of those resources together while representing their mission: helping students better navigate today’s changing world.

Team DNL used a few key tactics to build iThrive Games’ ideal website:

Best nonprofit sites like iThrive Games feature prominent navigation links.

  • Clear and unobtrusive navigation, so visitors can easily access the resources they seek
  • Strong photo elements to anchor the site in iThrive’s mission
  • Engaging blog posts with graphic design to appeal to their constituents

These elements work together to boost engagement with iThrive’s website. Check it out for yourself here.

Tree House Humane Society has stand-out nonprofit website design.

Tree House Humane Society

Tree House Humane Society provides lifesaving care to stray cats. When the challenges of 2020 hit, Tree House needed a website that could fill the gap left by the sudden cancellation of in-person engagement.

Our team implemented a few key tactics to do so:

Tree House Humane Society is a top nonprofit website for its clear, bold design and integrated tools.

  • Embedded scheduling tools so visitors could view appointment availability without leaving the adoptions page
  • Robust Ways to Give page with donation tools, sponsorship options, tribute and planned giving information, and Amazon wishlist information
  • A dedicated virtual event page for their Cat’beret, multi-day fundraising event

These features make it easy for supporters of Tree House to engage with the nonprofit, even when they’re not able to visit the organization in person. Review Tree House Humane Society’s website to see for yourself.

The Lupus Research Alliance has stand-out nonprofit website design.

The Lupus Research Alliance

The Lupus Research Alliance is the world’s leading funder of lupus research. Its website serves as an essential resource for its community, connecting patients, donors, researchers, and other interested parties under one umbrella.

There are a few particularly stand-out elements on the Lupus Research Alliance’s website:

View the top-notch nonprofit website design for The Lupus Research Alliance.

  • Consistent branding throughout the site that conveys visual authority to site visitors
  • An engaging media section that include news and video stories of people living with lupus
  • Bold infographics and other design elements to catch the attention of visitors

All of these elements combine to create a striking, confident website that positions the Lupus Research Alliance as experts in their field. Explore the site for yourself here.

A nonprofit website design project can be an extremely important investment for organizations ready to undertake it! Of course, working with an expert guide is always the best choice for ensuring a comprehensive strategy that provides long-term value.

If you’ve never worked with a nonprofit technology or web design consultant before, it’s worth doing some research to get a sense of what to expect prior to getting started.

Do you have any questions about nonprofit web design that weren’t answered in this guide? Reach out to DNL OmniMedia for more information and to discuss your nonprofit’s needs. We can advise you on the right next steps for your organization. Be sure to continue your research with a few additional resources, too:

Contact DNL OmniMedia today to begin your next nonprofit website design project.

Back to the top