Top 3 Actions To Improve Your Website Conversions. Part 1: Optimizing Your Donation Button

“Details make perfection, and perfection is not a detail.” – Leonardo da Vinci

The long journey to website perfection, we are going to give you some important details to focus on. But, as da Vinci once said, “perfection is not a detail.” So, too, are details not the small things we often consider them to be. These details, though perhaps seemingly insignificant, can actually have large impacts on your conversion rates. When combined, they become powerful tools to grab potential donors’ attention and secure their donations. With that in mind, we ask for your attention across this three-blog series, which will lay out the most important details you may not have considered.

All the suggestions in this blog series are based on testing we have conducted with various stations. Obviously changes vary by station. In some cases, a single change can raise conversion rates by 50%, but for another station it may only be 10%. But these are proven practices we rely on every day that are backed with previous testing data.

The first detail is to have an obvious donate button.

Sure, you have a donate button — but is it obvious? Does it pop out among all the other content you have on your website? Public Media is in the content business, so there is no doubt the button must compete against a good deal of other items on your site screaming, “Look at me!” What makes an obvious donate button? Typically, three items must come together: color, size and placement. Let’s break those down.

Color

Do not color your donate button in a similar color as your menu bar or typical brand colors — you risk it becoming lost. The exception would be a bright accent color to your brand that is not widely used on the website. Overall, select a bright, bold color. Primarily, we suggest red or green — based on our testing, there does not seem to be any difference between the two with regards to conversion.

Good Color:

Color - Good Donate Button - Cropped.png

Better Color:

Color - Better Donate Button - Cropped.png

Best Color:

Color - Best Donate Button - Cropped.png

Size

A tiny donate button does not create revenue. There is no need to be shy about asking for donations! You are a nonprofit. Be proud of it! Remind people you only exist because of their support. Your donate button should be one of the largest items on your page. Absolutely larger than any other items in your menu. This includes font size – don’t utilize a nice, large button, but then have a small or thin font. Use a BOLD font with “DONATE” in all caps. Again, there is no need to be shy about asking for support from your community.

Good Size:

Size - Good Donate Button - Cropped.png

Better Size:

Size - Better Donate Button - Cropped.png

Best Size:

A site header with a large “Donate” link with large white text against a red background and heart icon.

Placement

Please do not place your donate button within your menu. Your donate button should be stand-alone, driving the most attention possible, not just melded into the rest of your menu. Your donate button is your life blood — do not consider it in the same category as everything else you offer. Until fairly recently, many stations actually had folks go to a support dropdown to find the donation option. Thankfully those days seem to be mostly over, but if this does still represent your situation, you should take action immediately. There is some disagreement over the ideal placement of the button itself. Most would consider the upper right of the web page the “ideal location.” In years past, we executed a test with the donate button on the upper right vs. upper left and discovered significant improvements utilizing the upper left. Our belief at the time was that much of the older Public Media demographic utilized a “zoom” function on their web browser and essentially pushed the donate button off the page. While a fascinating result, at this time, I would say the ideal location is the upper right for two reasons: 1) web technology has evolved — current browsers are much less likely to push the content off the page when “zoom” is enabled and  2) the upper right has become almost a standard — when potential donors come to a page for a nonprofit they expect that donate button to be in the upper right. Placement of the button in another location can break that expectation, cause them to waste time searching and ultimately lose you the donation.

Good Placement:

Placement - Good Donate Button - Cropped.png

Better Placement:

Placement - Better Donate Button - Cropped.png

Best Placement:

Placement - Best Donate Button - Cropped.png

Language

While not as vital as the other three items, I do want to mention language. The most common copy on a donate button is simply “Donate,” however, we know folks sometimes like to experiment. In previous testing we compared “Donate” against “Join” and “Support,” both with the station name and without — so both “Join WXYZ” and simply “Join.” “Donate” sans station name repeatedly beat all other options in multiple tests, sometimes by significant margins. In retrospect, this may not be surprising; dropping the station name makes for a shorter, easier to read button; “donate” is a solid, easily understood ask for money. “Support” is vague; the donor can assume a monetary donation, but it isn’t 100% clear. “Join” implies a commitment that may make some folks uncomfortable. It also may have a similar issue with regards to clearly being a monetary donation.

Good Language:

A screenshot of navigation links with “Support” link text.

Better Language:

Language - Better Donate Button1 - Cropped.png

Best Language:

Language - Best Donate Button1 - Cropped.png

A special note for mobile 

Do not, under any circumstances, trust in your donate button being under your “hamburger menu.” The hamburger menu is the button that looks like a hamburger that often appears on the upper left when visiting the mobile version of a site. Typically, it collapses a site’s entire menu into a single columned drop-down menu. It is extremely important you DO NOT let your donate button or menu item fall into this blackhole on mobile devices. You MUST have a donate button external to this menu on mobile or your conversion rate on mobile devices will be extremely low as only the most dedicated donors will expend the time and effort to find the option. Additionally, all the notes above regarding color, design and language are only MORE important on mobile. A tiny button that is difficult to click on a mobile device will not drive revenue to your organization. Many of our partner stations now see mobile traffic breaking 50% of their total traffic (some are even up in the 75-80% range). Therefore, this special note regarding mobile is becoming more important with each passing day!

Good Mobile:

Mobile - Good Donate Button1 - Cropped.png

Better Mobile:

Mobile - Better Donate Button - Cropped.jpg

 

Best Mobile:

A mobile site header with a hamburger icon and “donate” button text.

I hope, based on the length of this entry, you can see that creating an optimal donate button has many facets, but is of vital importance to the conversion rate of your website.

In our next entry we will examine the destination of the donate button itself. Until then, take a moment to examine your donation button and remember without donations, you do not exist — treat your donate button accordingly.

Frank Auer