Making the Most of Your Nonprofit’s Website: Understanding the Basics

A nonprofit’s website is one of its most valuable assets. If you’re heading into 2020 unsure of the state of your site, it might be time for a refresh! Your organization’s website should be fulfilling a few vital functions:

• Communicating your mission and work
• Sharing updates and information on your campaigns or projects
• Engaging supporters (and attracting new ones) with storytelling techniques
• Facilitating online donations, sign-ups, pledges, and more
• Serving as a central hub for your marketing campaigns

You can probably think of other, more specific functions that your website has served for your organization, too. It’s important to take a step back periodically and check in on this important outlet. What are your goals for your site? Is it performing well? How does it look? Does it make it easy for new supporters to learn about your work and then get involved?

At DNL OmniMedia, we help nonprofits refine and then implement new technology plans and strategies. Web design is a huge part of many of these projects. Effective web design and customization can be game-changers for nonprofits that put in strategic thought with an eye on the long term.

The start of the new year is the perfect time for reviewing your technology and making improvements of any size. Hopefully, your year-end fundraising efforts have gone off without a hitch, but the best (and busiest) campaigns tend to reveal gaps or outdated parts of your toolkit.

Let’s dive into the basics of reviewing your website and what it’s like to take on a full web design project. Here’s what we’ll cover:

• Frontend elements of your site
• Backend elements of your site
• The steps of a web design project

Even small improvements can translate into significant benefits for your website, whether in terms of donation acquisition, ease-of-use, or streamlining your team’s process. Plus, anyone can get a better sense of what they’re looking at and where to focus their efforts by understanding the basics of web design. Let’s get started.

Frontend Elements of Your Website

The ‘frontend’ of your organization’s website is the publicly-visible part that your donors and supporters interact with. If you go into your web browser and pull up your website, that’s the frontend. It contains elements like:

• All of the pages of your website
• Your donation page and tools
• Your blog, if you have one
• Your calendar and sign-up or registration forms

Optimizing the frontend of your website is essential for giving your supporters a positive user experience when interacting with it. If you’re developing a new digital strategy or multichannel campaign to support your next initiative (learn more here), your site’s frontend will need to look and work its best.

Strong user experience, or UX, can significantly boost online engagement, providing users with a more streamlined, intuitive experience. It’s all about removing unnecessary steps, anticipating your users’ needs, and making sure they can complete their tasks quickly and easily. Keep these tips in mind when reviewing the frontend elements of your site:

• Focus on strong but tidy visual design. The visual design of your website should be bold and accurately reflect your organization’s brand or identity. However, resist the temptation to put too many design elements, pictures, or videos on your site, especially on pages where a user might be looking for something very specific (like your donation page). Focused design with strong visual elements that illustrate your work and mission without overwhelming the user will always perform better than cluttered sites.
• Keep your navigation intuitive. Poorly organized navigation is a leading reason why users become frustrated with websites and exit before completing any actions. A navigation bar at the top or side of every page will do the trick, but don’t overload it with options. What are the most important pages a user might need? Your homepage, “about us” page, your newsfeed or blog, and your donation page are the bare essentials. 
• Include prominent CTAs. Calls-to-action, or CTAs, are the actual buttons or links that urge a user to complete a target action. For your organization’s website, that will most likely be making a donation. Include a prominent “Donate Now” button right on your navigation bar. You might even create more targeted CTA strategies on some pages to promote other goals, like recurring donations. According to these stats from Double the Donation, online giving from individuals continues to make up a larger and larger portion of nonprofit revenue. If someone comes to your site already wanting to give a gift, you should make it incredibly easy for them to go straight to your donation page.
• Don’t forget the mobile experience. Mobile web browsing now makes up over half of all web traffic. You probably do most of your web browsing on your smartphone, too. Always be sure to double (and triple!) check your website for mobile optimization. This means each part of your site, especially your core pages, should look and work great on smaller screens.

Remembering these elements and simplifying your website not only creates a stronger user experience for visitors, but it also ensures that your site is compliant with web accessibility guidelines. 

In terms of visual frontend elements, the contrast ratio between your site’s text and its background is key. Many web browsers allow users to change the colors on websites to make reading easier, so your site should be responsive and adapt appropriately. If you produce videos for your site, take the extra step of creating subtitles. Additionally, avoid fast-moving or blinking multimedia elements like scrolling images. We’ll touch on more accessibility concerns in the next section.

In terms of frontend elements that you may want to add in order to give users (specifically donors) a more engaging experience, we definitely recommend DIY peer-to-peer fundraising tools. 

Give your supporters the option to easily launch their own P2P campaign for a holiday or their birthday. This is an easy way to deepen your relationships with them, get in touch with their own networks of friends and family, and raise some extra year-round support. 

It’s easier than ever to implement these tools into your website, and the payoff is worth it. According to the 2019 Blackbaud Peer-to-Peer Fundraising Study, “the number of DIY programs 400% since last year, and participation as increased threefold.” This is a trend worth adopting! Create a dedicated “Launch Your Own Fundraiser” page to host the tools, and be sure to promote them to your most passionate supporters.

 

Backend Elements of Your Website

The ‘backend’ of your nonprofit’s website is just that, the back part of the donor-facing elements. It’s the actual nuts and bolts of your website. Whenever you log in to your organization’s content management system, or CMS, to make updates or post new blog articles, you’re interacting with the backend. 

Making structural updates to the backend of your site is much more tech-heavy (and will likely require the help of experts) than more surface-level improvements to the frontend.

One of the biggest improvements that most nonprofits can make to the backend of their websites involves integration. A software integration basically connects separate platforms so that data can freely flow between them. You might already have one or more integrated features on your site. Some common ones include:

• Automatically reporting donation data from your donation form to your database
• Saving new contacts from your newsletter signup to your database
• Saving and tracking all data generated through your DIY peer-to-peer fundraising tools, connecting the P2P tools, your website, and your database

Whenever you’re looking into new online donation tools or software, keep integrations in mind. They significantly streamline the process of collecting and reporting data, and cleaner, more comprehensive data lets you develop smarter strategies over the long run. 

Developing a custom integration between a donation tool and your website is a common type of web design project for nonprofits. They’re essentially about bridging the frontend and backend elements of your website in a way that will have deeper strategic benefits for your organization. If you’re considering making any kind of backend updates, though, there are a few best practices to keep in mind in order to simplify the process going forward:

• Keep full documentation of any custom projects you conduct. Whether you install a new tool yourself or undergo a complete site migration and relaunch with an expert, having a comprehensive record of those changes is invaluable for the future. If you work with a tech consultant to make upgrades, make sure they give your team full documentation and training as needed. This really applies to any tech project, from implementing a new CRM to upgrading your website.
• Collect your branded assets. Keep and regularly update a folder of your organization’s branded assets. This refers to your visual brand or the graphic design elements that your team uses to update your site or create new press releases. Having all of these files in one place can save a ton of time down the line if you undertake a larger design or relaunch project for your website. 
• Set standardized processes for posting new content. If you actively update your organization’s blog or newsfeed (and you should!), make sure that you have a set process for how that content gets created, named, and tagged. This is especially important if search engine optimization, or SEO, figures into your marketing strategies. When everything is named and sorted properly, it greatly reduces the risk that you’ll lose track of valuable or meaningful content when making updates in the future.

These best practices will make it easier for you to improve your website and keep it running smoothly, but remember to consider the backend elements that figure into accessibility compliance. Some of the most important ones include alt text for images, page titles, and clear markups with heading tags designating sections of your content. All of these elements can be worked into your team’s own standardized process for posting new content. 

In terms of more complex backend elements, like color contrast and text resizing responsivity, working with a web developer or using a CMS platform that includes these features will be your best bet to ensure compliance. 

For a deeper dive into both the front- and backend elements of web accessibility, we recommend this guide from the Web Accessibility Initiative.

Optimizing the backend structure and processes of your nonprofit’s website can have major benefits in both the short- and long-terms. However, custom development and migration projects can also be fairly high-stakes. It’s unfortunately easy to break a website, and a downed donation page is definitely something you should avoid. 

Of course, the stakes will depend on the nature and scope of your project, but working with your in-house tech experts or partnering with tech consultants is generally the safest bet. 

 

The Steps of a Web Design Project

If your organization decides that a large-scale web design project might be in the cards, having a good sense of what to expect will be helpful. You can check out our complete nonprofit web design guide, but here’s an overview of the typical steps in this type of project:

1. Discovery and Scope. During this stage, your web designer or consultant will kick off the project by establishing goals, reviewing your existing site, and developing an implementation plan.
2. Creating Wireframes. Next, the designer creates wireframes, which are essentially blank templates for your re-designed site, and your team reviews them.
3. Visual Design. During this stage, the designer fills in the wireframes with your content and branding and works with your team to finalize the design.
4. Site Construction. Next, we focus on the backend of the site to set up the actual functions, tools, and processes you’ll need. If you’re developing custom solutions or integrations, this is when those are developed and implemented.
5. Launch Prep. To prepare for launching your site, your designer migrates your existing content into the new site, checks that all the links are working properly, and compiles documentation for your team.
6. Testing and Launch. Finally, your new site is double-checked and pushed live!

These are the basic steps of a web design project, specifically a re-design project during which a brand new site is created and developed. 

However, additional steps may occur depending on your goals and the exact processes that your tech experts prefer to follow. Just remember, don’t rush it! Extensive web design projects require ample planning and execution time. For instance, a rushed or botched migration can have serious negative impacts on your ability to fundraise online.

 

Your nonprofit’s website is a crucial tool in its arsenal. For fundraising, engaging supporters, and reaching new audiences, your site is like the central anchor for most of your donor-facing strategies.

It’s always worth the time to check if there are improvements to be made to your site. Whether they’re more surface-level optimizations on the frontend or deeper upgrades on the backend, everything helps! With the right tools and processes, you’ll be raising more and engaging new supporters in no time.

from npENGAGE https://ift.tt/2t5bzid