Nonprofit Website Design Projects: The Comprehensive Guide

February 6, 2019

Ready to start your next nonprofit website design project? Let's get started.

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 the attention of potential online donors, so organizations must make sure their websites are fully functional, provide a positive experience for visitors, and simply look good.

Unfortunately, many nonprofits neglect developing their web presences and optimizing their websites until they’ve already outgrown their starter sites. Nonprofits operate on extremely tight budgets, and scarce resources must directly contribute to either their mission or to their fundraising abilities, so this makes sense.

However, nonprofit website design is an important investment for growing organizations. You might not realize all the crucial functions that a website should fulfill:

  • 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

If your nonprofit’s website is currently falling short in any of these areas, it might be time for an upgrade.

Here at DNL OmniMedia, we specialize in helping nonprofit organizations make the most of their technology, often through 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.

However, the website design process is fairly straightforward once you’re familiar with the most important steps. Let’s walk through a few different areas your team might be curious about if you’re considering upgrading your website:

Use the list above to jump to whichever section you need first, or start at the beginning for a more comprehensive overview. If you have more specific questions, don’t hesitate to reach out to learn more about our process. Let’s dive in:

Here's the team DNL process for nonprofit web design projects.

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 their own particular take or version of the process. At DNL OmniMedia, for instance, 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 here at DNL OmniMedia follow.

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 should serve 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. Explore some top nonprofit websites for an idea of what this looks like in practice.

Now, let’s walk through how we help nonprofits create high-performing websites like these:

The discovery and scope stage of nonprofit web design is important for setting project goals.

Nonprofit Website Design 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.

Creating wireframes with your nonprofit web designer is an important next step.

Nonprofit Website Design 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 visualize how different elements, including blocks of texts, navigational tools, and other interface elements will fit together on each of the main pages on the website.

However, in web design, a wireframe is meant to illustrate 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!

The visual design stage of nonprofit web design involves gathering new branded assets.

Nonprofit Website Design 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.

The next step in the nonprofit web design process is beginning to develop the website's core pages and functions.

Nonprofit Website Design 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 subscription, 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!

The pre-launch step of nonprofit web design usually involves migrating content from the old site to the new one.

Nonprofit Website Design 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.

As your nonprofit web design project draws to a close, it's time to launch!

Nonprofit Website Design 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.

Ready to start your next nonprofit website design project? Let's get started.

What are the steps your team should complete before reaching out to a nonprofit web designer?

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.

Follow a few nonprofit web design best practices for preparing for your project.

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.

If you’ve never worked with a nonprofit technology consultant before, it’s important to remember that a website redesign is a major undertaking that typically requires a significant investment of time and resources. 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 in 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. 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 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 when the time comes for a website overhaul.

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 a bulk of the content on its site.

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:

Are you ready to begin your nonprofit website design project? Contact DNL OmniMedia.

Back to the top