A Guide to Nonprofit Web Design: Get the most out of your website design project

A Guide to Nonprofit Web Design

There’s much to consider regarding nonprofit marketing, but it isn’t always about generating new revenue or selling tickets. You may want to build brand awareness, increase donations, tell your story, or inspire others to take action; having a powerful, effective, high-performing website will help you achieve your goals and mission. My team and I have successfully worked with micro-nonprofits, large museums, foundations, philanthropies, and more. Here’s our advice to you as you consider or prepare to design your first nonprofit website or redesign your current one. There’s something in here for all nonprofit leaders, and my goal is to help you get the most out of your investment.

Interested in growing impact while reducing costs? Propr is here to help with Creative and Advisory Services designed to maximize your marketing ROI.

AI Summary:

Designing a website for a nonprofit involves crucial steps to align it with the organization’s mission and goals. The process begins with auditing the current website, identifying successful elements, and updating or discarding outdated content. Understanding the target audience, including demographics, is essential for optimization.

Establishing a strategy is vital, focusing on key performance indicators (KPIs) to measure success. This involves tracking tools like Google Analytics to gain insights into website performance. Input from the target audience through user testing programs helps ensure the website meets their needs.

The design phase incorporates the organization’s colors and visuals, creating a cohesive and functional website representing the nonprofit’s unique identity. Mobile-friendliness is emphasized, given the increasing use of mobile devices for website engagement. Overall, a well-designed website enhances a nonprofit’s online presence and impacts its impact.

A Guide to Nonprofit Web Design Quick Links

  1. Audit your Current Nonprofit Website
  2. Establish your Nonprofit Website Design Strategy
  3. Designing your Nonprofit Website
  4. Professional Photography for Your Nonprofit Website
  5. Consider the Website’s Accessibility
  6. Easy to Manage Backend
  7. Action Step: Get My Help
  8. FAQ

Audit your Current Nonprofit Website

Whether you are starting from scratch or using your current website as inspiration, pull out those high-performing gems that you can replicate in future versions of your website. For example, if you get great engagement on videos hosted on your site, consider keeping that content front and center on your redesigned website. You can reuse most of the copy, blogs, and other articles on your current website for the new one. Auditing your existing website can also help you uncover outdated or irrelevant information that might need to be refreshed before you include it on your new website. This process can help you discover things you may want to change or keep around when designing your new website.

Determining your target audience is critical to building a website that converts and meets your goals. You can find this information by reviewing the data on your existing website to pull out insights on your current visitors, which can include demographic information such as gender, age, and location. This information is critical to guarantee that your website is optimized for your audience. Knowing who you’re targeting as you embark on your redesign project is also essential.

What you should consider when auditing your nonprofit website

The last thing you want to do is hurt your website’s ranking and performance through a redesign. Here’s our recommended list of things to assess before you start your project to ensure you don’t lose any current value and, in fact, you improve on it.

  • Top performing keywords
  • Top-ranked pages
  • Most trafficked pages
  • Best performing content
  • Pages with the highest bounce rate
  • Pages with the lowest bounce rate
  • Underperforming and high-performing forms
  • Current tech stack

Establish your Nonprofit Website Design Strategy

There are several things to establish when building your nonprofit website design strategy. Key performance indicators (KPIs) are crucial to gauge your website’s success and measure ROI. These benchmarks measure your website’s performance to determine if you’re meeting your goals. For example, one of your objectives may be increasing online donations by a certain percentage year-over-year or improving ticket sales. Starting with your current benchmark and establishing a baseline number helps you understand whether you are achieving your goal or need to adjust your website to stay on track. Use website tracking tools such as Google Analytics to assess and evaluate your website performance, user habits, content and page performance, and more. Prioritize enhancements and optimize based on this data.

Developing a strategy for your website’s design should also involve input from the very people for whom you’re building your website. One way to determine what your website’s visitors want is to ask them directly through a user testing program. This method involves asking your target audience to interact with your redesigned website while in production to provide constructive thoughts and feedback. User testing usually involves selecting a sample of people who agree to be the testers in exchange for a reward for their time. Consider soliciting the help of your donors and aid recipients to craft a website that’s built for them and their needs.

Lastly, don’t work in a silo. Engage with other key stakeholders within your organization to understand their goals and objectives so you are supporting the entire organization’s mission, not just marketing. This communication and collaboration is often overlooked, but I cannot encourage it more.

Nonprofit Website Strategy Checklist

Use this nonprofit website design strategy checklist to ensure you get the most out of your investment.

  1. What is the organizational vision?
  2. What are your goals and objectives for marketing and fundraising development?
  3. What is your clearly articulated mission?
  4. What are your actionable and practical core values?
  5. What is your ideal customer profile?
  6. Can you quantify all strategic decisions through your mission, values, goals, objectives, and what matters most to your ideal customer?
  7. What does success with this project look like?
  8. What are your major pain points as a marketing leader, and can they be solved with this new website?
  9. What do you wish was automated?
  10. What are people calling and emailing for the most? How can the new website reduce this pain?

Designing your Nonprofit Website

Here’s where the fun begins! In today’s digital age, your website is the primary touchpoint for your nonprofit. However, your website must look more than just pretty; it must perform for your visitors and help you earn the right reputation for your nonprofit. Your new website’s design and interactive nature should reflect your brand standards, conveying the brand’s personality and offering an experience that aligns with all aspects of your brand. Messaging must be simple and direct, yet in your unique tone of voice. Design elements must be thoughtful and purposeful and limit any design aspects that do not offer a clear purpose for you and your visitors’ goals. Create thoughtful navigational interfaces, a menu that is simple and not over seven options (anything over seven begins to overload your visitors, and chances are they’ll bounce from your website without accomplishing their goals; seven is the max, 3 to 5 menu items are ideal) and interactive elements that combine into one cohesive, functional website showcasing everything your nonprofit offers.

Another critical element of a website redesign for nonprofits is ensuring your website is mobile-friendly. In fact, many of our nonprofit clients see only a small percentage of traffic from non-mobile devices. People on the go want to purchase tickets quickly, reserve a spot, find directions, and explore parking options and local mass transit options right from their phones. So, website speed and performance on mobile devices aren’t optional; it is mandatory.

Nonprofit Website Design Quick Tips

  • Resist the urge to create a banner slider or carousel. Trust me, no one sees any of them beyond the first, and they are distracting and clunky.
  • Include in your footer all FAQ stuff, like address, contact info, hours, parking info, top page links, certifications, etc.
  • As Antoine de Saint-Exupery mused, the design is not complete until nothing is left to remove. Less is always more, friends.
  • Establish typography and button hierarchies to make your site more user-friendly and consistent.
  • All pages you want indexed must have at least 300 words, clear headlines, and titles and be laid out to make the most sense to your visitors. Never try to stuff SEO-based content in the footer; it isn’t 2001.
  • Expect to make revisions to the design once it is built into code; we always make assumptions in the design process that we realize are less than ideal in a live environment.
  • Design the user experience and all interactive elements to be dummy-proof.
  • Use accessibility best practices to ensure all forms, alt-tags, buttons, and menus are done properly.

Get our nonprofit expertise

Professional Photography for Your Nonprofit Website 

Once your design is laid out, remember essential details such as professional photography. The human species are visual creatures. Therefore, professional photography plays a critical role in getting one’s attention. This is a great way to show the fantastic things your organization does for the world and the community.

Photography allows you to tell your Nonprofits story through the power of visuals, so be sure your images include individuals in them, whether you are showcasing your volunteers or staff, showing customers enjoying your services, or at an event; these are all great ways to showcase your Nonprofit in a professional light.

When photography is not in your budget, we recommend tastefully selecting stock imagery and lightly customizing it to match your nonprofit brand aesthetic and editorial style. Searching through countless stock photography pages can be a soul-crushing, energy-vampire-like exercise, so tighten your search criteria as best as possible to be more efficient.

Things to avoid when selecting stock imagery

  • Awkward hands: avoid people pointing at stuff or holding their hands weirdly.
  • Stagged gatherings: of course, stock imagery is staged, but avoid the most obviously staged shots, like when one person looks at the camera while the rest “do work.”
  • Cliches: quite simply, don’t.
  • Not embracing diversity: always try to select images that reflect your community.
  • Overused or common imagery: agency people notice this often, and we LOL, brands using the same images for different things. Avoid this by customizing your stock or digging deeper to find uncommon options.
  • Irrelevance: make sure the imagery and photos actually align with your brand and the content.
  • File size 1: resize the photos so they don’t kill your site speed. Try to keep images around 100k or less, and save as a JPG unless its an SVG.
  • File size 2: pixelated imagers or tiny images, again, just don’t
  • Not using your brand guidelines to select appropriate images.

Interested in growing impact while reducing costs? Propr is here to help with Creative and Advisory Services designed to maximize your marketing ROI.

Consider the Website’s Accessibility

While you have plenty of freedom when designing your nonprofit’s website, accessibility is non-negotiable. Your website must accommodate users with disabilities, including hearing, vision, or cognitive challenges.

Pay close attention to your website’s color scheme to maintain the proper color contrast for individuals with trouble identifying colors, especially when it comes to the colors you choose for your text; if the color of the text is difficult to read, be sure to run it through a Color Contrast Checker to ensure it passes, and everyone can read the text. You’ll also want to avoid audio-only content, including captions and images with embedded photo descriptions for screen readers. These are just a few of the essential things you’ll need to consider when creating a website that is accessible and inclusive for all.

Accessibility is not only good design, but it is also good legal insurance. Museums, schools, foundations, and corporations are getting sued because their websites do not meet ADA accessibility standards. Don’t make the same mistake by discounting or ignoring accessibility. Do it for your community first and for the legal team second.

Propr’s Website Accessibility Policy and helpful links

ADA Accessibility Nonprofit Website Tips

  • Never put text over images
  • Always test color contrasts
  • Always use ALT tags and meta descriptions
  • Consider plugins like AccessibBe to have even better control for those with disabilities.
  • Avoid all the gimmicks and unnecessary bells and whistles, and focus on your user’s goals and website performance first and foremost.
  • Structure your page in the code to include headlines and page titles that clearly state what the content on the page is all about (this is good for SEO, too)
  • Design an open and airy user interface design; white space improves readability and useability and shows your site visors you care about them.
  • Use text size, color, and other visual cues to create a clear hierarchy and identification for buttons, clickable elements, and interactive features.
  • When using video, include a text-based transcription and description.
  • When in doubt, always err on the side of being more accessible.
  • ADA.gov Guidance on website accessibility

Easy to Manage Backend

One of the many reasons Nonprofits are looking to update their website is due to a difficult-to-manage backend. Sometimes, the admin panel can cause difficulty for your staff and those trying to manage your website’s upkeep. Simple is better when it comes to designing your custom WordPress website, and the same goes for the backend of your website; it needs to be user-friendly and easy to manage. If changes need to be made over time, switching out or updating content or expanding the website with new pages, features, or functionality, such tasks should always be easy to handle and part of your development strategy and plan.

Tactic: Use Advanced Custom Fields to create a unique online experience without cookie-cutter themes or bloated page builders. Using either has many risks, so consider the benefits and risks before using generic themes. The long-term costs may be greater than the short-term expense of going custom. In our experience, custom WordPress websites designed and built to support your nonprofit’s goals and objectives, aligned with your marketing operations, and your target audience needs always perform better, are faster, easier to manage, and have a much higher ROI and lifetime value.

Like, I have been saying for years, there is no good reason you shouldn’t be able to easily and efficiently manage your website, especially today.

Why You Must Avoid Page Builders

But you may have heard or thought that some of these page builders offer a benefit and increased flexibility. After designing websites for the past 25 years, I disagree. Page builders like Divi, Blocks, etc., appear to be a good solution but carry many risks. For example, most of the security issues with WordPress are due to flaws and security issues with page builders. Page builders are also extremely bloated and impact site speed and performance in a negative way. Page builders give you too much control over the site, often leading to broken pages, inconsistent layouts and interfaces, errors,m and more.

But when you take a customer-centric approach to the design and build of your website, future-proofing (we can’t technically future-proof anything, but we can commit to thinking about the future by considering eventual content, landing pages, etc.), you’ll be able to trump any benefit from page builders and have a more stable, secure, easier to manage, and better-performing website.

Get Propr’s Help

At Propr, we’re no stranger to designing and building high-performing nonprofit websites. We understand the unique challenges and opportunities of nonprofit marketing, and we’ve worked with many organizations to redesign their websites. Our team at Propr is ready to help you make an impact — and all starts with your goals and objectives and the strategy to get you there. Get our help.

Some of our nonprofit website client work:

Creating an effective nonprofit website requires careful consideration beyond revenue generation, focusing on goals like building brand awareness, increasing donations, and telling compelling stories. Propr is a team experienced in working with various nonprofits and offers advice for designing or redesigning a website.

Bobby Gillespie

Bobby-G-scaled

With 25 years of creative experience in leadership, planning, and executing performance-based branding and web design strategies, Propr and I help small and medium-sized companies and organizations grow revenue, attract new customers, manage and scale their brands, and improve marketing performance.

I’m also the author of Build Your Brand Like You Give a Shit.
Connect and follow me on LinkedIn.

Schedule a call to learn how we can help you transform your brand for consistent and better performance.

Nonprofit Website Design Tips & FAQ

Audit Your Current Nonprofit Website:

  • Identify high-performing elements to replicate.
  • Determine target audience demographics.
  • Assess top-performing keywords, pages, and content.
  • Evaluate bounce rates, form performance, and current tech stack.

Establish a Nonprofit Website Design Strategy:

  • Define key performance indicators (KPIs) for success.
  • Utilize tools like Google Analytics to assess website performance.
  • Prioritize enhancements based on data.
  • Involve the target audience through user testing.
  • Engage with key stakeholders to align with organizational goals.

Nonprofit Website Strategy Checklist:

  • Clarify organizational vision, mission, and core values.
  • Define marketing and fundraising goals.
  • Develop an ideal customer profile.
  • Quantify decisions through mission, values, and goals.
  • Identify success metrics and pain points.
  • Consider automation and reduction of inquiries.

Designing Your Nonprofit Website:

  • Create a visually appealing, interactive, and mobile-friendly design.
  • Reflect brand standards and convey brand personality.
  • Simplify navigational interfaces and menus.
  • Prioritize user experience and functionality.
  • Emphasize mobile-friendliness for broader accessibility.

Nonprofit Website Design Quick Tips:

  • Avoid banner sliders and carousels.
  • Include essential information in the footer.
  • Embrace minimalism for improved user experience.
  • Establish typography and button hierarchies.
  • Ensure pages are optimized for indexing and user understanding.
  • Expect design revisions post-coding.

Professional Photography for Your Nonprofit Website:

  • Use professional photography to tell the nonprofit’s story visually.
  • Showcase volunteers, staff, customers, and events.
  • When budget is a constraint, select and customize stock imagery tastefully.

Consider the Website’s Accessibility:

  • Prioritize accessibility for users with disabilities.
  • Pay attention to color contrast, text readability, and audio content.
  • Use ALT tags, meta descriptions, and plugins for better control.
  • Structure pages for SEO and create an open and airy user interface.

Easy to Manage Backend:

  • Ensure the backend is user-friendly and easy to manage.
  • Use Advanced Custom Fields for a unique online experience.
  • Avoid generic themes and page builders for better performance and security.

Why You Must Avoid Page Builders:

  • Page builders may offer flexibility but carry risks.
  • Security issues, bloated code, and negative impact on site speed are concerns.
  • Custom WordPress websites aligned with nonprofit goals offer better performance and ROI.

Get Propr’s Help:

  • Propr offers assistance in designing and developing high-performing nonprofit websites.
  • Understanding nonprofit challenges, Propr aligns strategies with goals and objectives.
  • Our nonprofit clients include Port Discovery Children’s Museum, Episcopal Impact Fund, Summit Community Foundation, Plant Trees for Me, Eastern Shore Land Conservancy, and The Reginald F Lewis Foundation.

About Propr

Propr Branding and Web Design Best of Maryland Awards

Propr is a boutique brand strategy and creative agency. We help companies and organizations grow through advisory services and high-performing brand strategy, graphic & identity design, messaging & custom WordPress website design & development. Performance and results drive our passion for service. Let’s do great things for your brand together.

Ready to transform your nonprofit brand for consistent and better performance? Contact us today!

Differentiate Your Positioning

By: Bobby G    03/2023

By: Bobby G

04/26/2023

Share On:
Propr TM logo

Propr, the growth advisory & creative services firm.
Performance & results drive our passion for service.
Let’s turn your vision into reality.

Schedule a call