guidestarblog_header.png

Nonprofit Web Design: 6 User-Experience Best Practices

In a world dominated by search engines and online encyclopedias, chances are high that your website will be the first point of contact between your nonprofit and a potential donor.

That’s why it’s crucial for your website to make a good first impression with the online community, and the best way to do that is by making it more user-friendly (for visitors both tech-savvy and otherwise).

There are several ways to go about this, but the key practices your nonprofit should prioritize include:

  1. Use a simple website builder.
  2. Have a strong visual identity.
  3. Optimize your web design for mobile devices.
  4. Prioritize your online donation forms.
  5. Build loyalty with donor-centric content.
  6. Make user engagement a priority.

By implementing each of these user-friendly strategies, your nonprofit is guaranteed to not only grab an online visitor’s attention, but build the foundation for a lasting relationship.

Let’s start with the basics: building a simple website.

DTD_GuideStar_Nonprofit-Web-Design-6-User-Experience-Best-Practices_Header1.jpg

1. Use a Simple Website Builder

The key to making your website more accessible and easy to navigate begins with how you construct it in the first place.

Luckily, there are a selection of nonprofit website builders to choose from that vary between easy maintenance and nonprofit integration. The most common of these are:

  • WordPress
  • Wix
  • Squarespace
  • Weebly
  • Tumblr
  • GoDaddy

The beauty of these flexible platforms is that you don’t have to be an expert at coding or even page building and layout to be able to knock out a fully integrated website.

Generally, these common website builders have templates that your organization can use. The advantage of using a template is that you won’t have to build your website from scratch and you’ll be able to easily customize various elements to make the theme your own.

Then again, if web design really isn’t your forte or you’d like more advanced capabilities, you can always go the safer route and partner with an experienced website consultant to handle all of those tricky technical details.

Regardless of which path you choose, one key step is to always customize a clean yet unique domain name free of any extraneous URL characters cluttering it.

For example, if your nonprofit’s name was “Tree-Huggers Unite,” then your domain name should read something like:

  • www.treehuggersunite.com

As opposed to:

  • http://wordpress.com/treehuggersunite/10/3GAD98234PFV#

Note the difference?

Rest assured though that once you’ve set up a simple and straightforward web domain, your site will be much easier to find and the rest of your user-friendly tacticas will fall into place.

Takeaway: Choosing the right website builder will set the foundation for the rest of your web design. Your nonprofit must decide if you’ll create the website on your own or seek the help of a consultant.

Nonprofit Web Design: 6 User-Experience Best Practices

2. Have a Strong Visual Identity

With the rise of social media, one thing is for certain: we’ve officially crossed over into the age of visual communication.

This means that even though the number one activity for internet users is reading, it’s imperative that you design your website with visual readability in mind.

The best way to go about this is to format as much text-based information on your website as possible into crisp images that are easily skimmable.

We recommend breaking this down in the following ways:

  • Showcase impactful photography.
  • Utilize charts and infographics.
  • Keep a consistent color scheme and branding.

Let’s dive right in!

Showcase Impactful Photography

A good way to start is by posting expressive photos with high emotional appeal. These can range from pictures of your nonprofit team or a candid slideshow from your last big fundraiser. Either way, you don’t need to be a Photoshop wiz to create high-quality photos that will attract web users.

For example, I Had Cancer’s website relies on strong lighting and silhouettes to set a moving scene:

Nonprofit Web Design: 6 User-Experience Best Practices

Your organization can use images to convey your mission and show donors the impact you make on the communities and people you serve.

Utilize Charts and Infographics

Another way to retain a website visitor’s attention is by conveying key information about your nonprofit and online donation pages through eye-catching charts and infographics.

Instead of dragging and dropping blocks of text on your website, dazzle your online visitors with interactive charts and dashboards, fundraising thermometers, and other gamification tools to articulate your nonprofit’s goals, fundraising progress, and more in an appealing visual format.

Interactive elements keep donors engaged and interested in learning more about your cause. Plus, the longer users browse your website, the more likely they’re going to support your cause, whether that’s through sharing your page with peers, attending your next event, or contributing.

One nonprofit website that takes advantage of online interactivity is We Love Trees’ playful arbor day celebration quiz, where web visitors can discover who their celebrity tree is:

Nonprofit Web Design: 6 User-Experience Best Practices

Keep a Consistent Color Scheme and Branding

While making all of these nifty design changes, you can also take advantage of your website’s new visual format by revamping your online branding.

This can be accomplished in a number of ways such as:

  1. Positioning your logo on the top corner of your page.
  2. Maintaining consistent color choices that are easy on your web visitor’s eyes.
  3. Changing font size or style for easier readability.
  4. Being conscious of the color of your hyperlinked text.
  5. Using visuals with a consistent style and feel.

Take the time to limit the amount of distractions on your website by implementing simple headers and footers and removing any unnecessary text, photos, or ads.

For instance, The Malala Fund does an excellent job of implementing vivid and consistent colors and branding:

Nonprofit Web Design: 6 User-Experience Best Practices

It may not seem as important as relaying all of your nonprofit’s information, but having a balanced color scheme on a screen-based platform can deter your visitors from making any snap judgements about the quality of your website, or worse, your nonprofit.

Takeaway: By displaying your website with impactful images, infographics, and a unified brand and color scheme you will be well on your way to developing a strong visual identity.

Nonprofit Web Design: 6 User-Experience Best Practices

3. Optimize Your Web Design for Mobile Devices

It’s essential for your nonprofit to always consider your mobile-friendly supporters by staying aware of how your web design may change when viewed on a smaller screen.

This key step is still surprisingly overlooked by many nonprofits as their online readership suffers due to clunky web design on phones or tablets.

To prevent these avoidable mistakes, keep your on-the-go donors interested with these pivotal web design strategies optimized for phones:

  1. Stick to a vertical layout and drop-down menu.
  2. Limit the number of items on each webpage.
  3. Test your mobile-friendly website on your phone.

Let’s begin with step one: your layout.

Vertical Layout and Drop-Down Menu

Think about it; when you’re scrolling through the internet on your smartphone, do you prefer to turn your device sideways or keep it facing up?

For most mobile users, it’s easier to view content on a vertical screen, therefore your web design should follow suit.

This way, your on-the-go supporters can breeze through your website in a way that feels natural instead of having to tilt, pinch, and zoom all over the place to get the best view.

Another design element that goes hand-in-hand with vertical layouts is the drop-down menu screen. This feature makes a world of difference in how a mobile user can easily access multiple resources on your website with the click of a button.

Speaking of buttons, don’t forget to display them prominently on your web pages—especially for online giving tools—as well as make them easy to push on a touch screen.

Altogether, these design alternatives will help your website make the fluid transition to a mobile format.

Limit the Number of Items on Each Web Page

No one likes it when a web page is overcrowded with stuff. From squeezed-in ads to unnecessary images and text, it only makes it harder for us to find what we’re looking for and easier to wind up on the wrong page.

The solution to this problem is so easy and yet rarely utilized. Simply limit the number of items on each webpage. The key to mobile design is simplicity.

This strategy not only makes your content more ideal for skimming (which is how most people absorb online information), but also gives a refreshing, clean look to your web design overall.

Test Your Mobile-Friendly Website on Your Phone

This point cannot be emphasized enough. How else will you know how your web design plays out on a smaller screen without testing it yourself? Bear in mind that different phones also come in different sizes and so it’s important to check your web design on multiple mobile layouts.

For more ideas on how to get the most out of your web design—both on computers and mobile devices—check out these master nonprofit websites from Double the Donation for examples on how to execute both in style.

Takeaway: Mobile design is something organizations can’t overlook. With more and more people using their phones to browse the internet, it’s paramount that nonprofits make the user experience enjoyable for everyone.

Nonprofit Web Design: 6 User-Experience Best Practices

4. Prioritize Your Online Donation Forms

While your website is a place for donors to learn more about your mission, ultimately its purpose is to lead donors to ways they can support your cause. One of the most crucial ways is through online fundraising.

As a result, your nonprofit needs to invest time in making your online donation process user-friendly. When donors have an enjoyable experience, they’re more likely to give again.

So what does this involve?

Just like you would brand your website to maintain a consistent appearance, you need to take the same approach with your donation forms.

Organizations use fundraising tools that seamlessly integrate with their websites and have custom features specific for nonprofits (like recurring gifts). In case you don’t already have fundraising software, Fundly has a list of this year’s top tools to help you get started.

In addition to branding your donation forms, organizations can improve the donation process by:

  • Limiting the number of fields donors have to complete.
  • Including present donations amounts in your forms.
  • Creating a mobile-friendly donation form.

Keep in mind that your donors are looking for convenient ways to give, so creating a process that takes just a few steps is the best way to ensure that donors complete your donation process.

Finally, once you’ve optimized your donation forms, it’s important to make them easy to find on your nonprofit’s website. Place “Donate Now” buttons in prominent places throughout your website.

Takeaway: Creating a user-friendly donation page should be a priority as you improve your nonprofit website.

Nonprofit Web Design: 6 User-Experience Best Practices

5. Build Loyalty with Donor-Centric Content

One of the best ways to make your nonprofit donors feel appreciated is by publicly thanking them. What better way to do that than on your website?

By generating donor-centric content, you not only acknowledge your supporters but allow them to share in your nonprofit’s many milestones and achievements.

To play up donor recognition on your website, start by thanking them with key phrases like:

  • “Without the help of our donors we never would have gotten this far!”
  • “Our supporters really came together to make this happen!”

By scattering these succinct phrases across your website, your nonprofit will succeed in making your donors feel heard while encouraging them to return to your website on a regular basis.

In addition to using donor-centric language throughout your website, you can also showcase donors who have supported your cause as another way to acknowledge their contributions. Create a separate page on your website where you highlight donors or a series on your nonprofit’s blog.

Don’t forget that online readers are always looking for scannable content, so stick to simple language, condensed copy, and spaced-out sentences when writing on the web.

Finally, remember to keep an open channel of communication between your nonprofit and your donors by occasionally soliciting feedback from your online community. This can be done through online forms or surveys that can help address any concerns and keep your web audience happy.

It’s no secret that the fate of any nonprofit lies in the hands of its donors and volunteers. By openly recognizing these contributors on your website, you’ll foster a loyal virtual community in no time.

Takeaway: Showing your appreciation doesn’t have to be limited to acknowledgement letters. Use your website as an opportunity to let donors know that their contributions matter.

Nonprofit Web Design: 6 User-Experience Best Practices

6. Make User Engagement a Priority

Last but not least, nonprofits must always take into account not only what your site visitors can see but what they can interact with as well. After all, that’s the beauty of web design: you can connect with your donors faster and more efficiently than ever before.

Jump-start the virtual conversation by showcasing the following engagement opportunities on your home page:

By welcoming these digital interactions on your website, your nonprofit will quickly be viewed as more approachable and connected with your online donors.

Takeaway: Your website should be a place where donors feel comfortable engaging with your nonprofit. Make it easy for users to get more information and find additional ways they can support your mission.

Closing Thoughts

First impressions are tough as it is, but they can be even more challenging when you and your target audience are separated by a screen.

That’s why the key to starting off on the right track lies in a user-friendly web design. Because at the end of the day, catering to your supporters both on and off the web is what matters most.

Nonprofit Web Design: 6 User-Experience Best PracticesAdam Weinger is the president of Double the Donation, the leading provider of tools to nonprofits to help them raise more money from corporate matching gift and volunteer grant programs. Connect with Adam via email or on LinkedIn.

Topics: Nonprofit Websites Mobile-Friendly Websites Donor-Centric Content