Shut Up and Take My Money!

Before the holidays, the people of Postlight came up with a list of charities. I liked learning about all the different causes supported by the people who work here. Then on December 31, I realized I’d done a bad job of charitable giving in 2016 and made use of the list.

Typically my charitable giving is spurred by bad tweets—someone tweets something terrible, and I give money to the opposite cause. But all the tweets were so bad this year, and as a result I’d hardly given any money away by late December.

I’ll do something really smart, I stupidly thought. I’ll give money to each and every charity on our list! So I opened all the tabs, one per charity, from our charity list. This was the user experience of my big experiment:

Ah well.

Nonetheless, reader, I did it. Giving money to 33 or so sites gave me a quick snapshot of online charitable giving, and I’ll share it in the hope that it’s helpful.

Overall Design

I expected charitable sites to have a variety of design approaches, but for the most part charity websites…look like other charity websites. That is, most offered up what I’d refer to as “2010-plus” web design—big hero images in a carousel, using a CSS grid that works at a few different resolutions, menu bars instead of hamburger icons, or sort of half-assed hamburgers, and a lot of signals of WordPress, Drupal, or Joomla CMSes under the hood. Smaller charities had clunky design and rough patches—here’s the “window close” icon for one relatively tiny NYC charity, for example—just an “X”—

Which is not a criticism. Whatever works! The bigger the charity, the more standards-compliant, grid-driven, and responsive the website—and the more content that is under management. The larger charities were each typically halfway between a media website and a brochure-style informational website. A good example is Doctors Without Borders:

It’s not the most modern website but I think this is a good design style for a charity. It’s familiar. It scales down well for mobile viewing, so it works wherever people are reading. And the DONATE button is big and red (the donation form itself worked fine and was not super-memorable). I need my charity websites to be readable, not cutting-edge. DWB did good.

It’s really worth noting how Planned Parenthood’s site works. They have a responsive website that has a very different look for smaller, mobile resolutions. Here it is in Desktop—in a lot of ways it’s like the DWB website. The “DONATE” call to action is clear but could be a little noisier.

But check it out: Here is Planned Parenthood with a much smaller screen size—it’s a very different, more functional experience. The same tools are there but there is less emphasis on telling the Planned Parenthood story and more on giving users access to tools and services. Same website, different sizes.

This shift in layouts and focus makes a ton of sense. Mobile phones are a primary computer for many people. Young people and people with less money make heavy use of mobile phones and are also the most likely to need what Planned Parenthood provides.

So it’s an interesting contrast. When the site is in desktop mode, it’s a mix of content, calls to donate, and access to services. When it’s in mobile mode, it’s more focused on access to services.

Some websites are themselves charities. These entities often use a big, unmissable call to action at the top of the page. The Internet Archive is a good example:

Wikipedia also had a similar experience on offer—a big call to donate at the top of the page. Obtrusive, yes! But also unambiguous. And for someone with my use case—I want to give money—incredibly simple.

Security and Payment

I expected basic site security, by which I mean secure credit card transactions and “https://” hosting, and for the most part found exactly that. Most sites used https for secure connections and transactions. Chrome is pretty vigilant about not auto-filling your credit card information on regular, non-secure, web connections, so it was obvious when a site wasn’t secure. I only found two websites that didn’t use secure connections for credit cards. So that was good (and bad, for those two sites).

Donation Forms

My expectation when I visited these websites is that I would find it very easy to donate money. But often I couldn’t quickly find the “Donate” button. I found “Donate” buttons in some weird places:

In the top right navbar, but visually undifferentiated (i.e. no color);
Over to the right of the page, in the middle of news updates and mailing list signups;
At the bottom of the page, below the “fold”;
And so forth.

So what was easy to find?

A huge clear call to action in the middle of the home page. Like: “Make a difference in 20 lives right now!” + a “DONATE” button.
A donation form that I could fill out right on the home page.
A big overwhelming call to donate on top of the page.
Donation buttons/links on the top right of the page, where for whatever reasons my brain expects to find them, visually distinct from and bolder from the rest of the navigation.

A lot of the smaller charities are mostly just there for donations and basic information, so they tended to be pretty good. Bigger charities have lots of competing goals for their sites and so they seemed to wrestle with letting “Donate” own the page.

I was surprised no one tried different animations with their donation buttons. The world of online advertising has taught us the value of subtle flashing, gentle throbbing, mouse interactions, and so forth. Animation doesn’t have to be horrible. It would only take one or two lines of code to animate the “Donate” button and grab the eyes of passersby. (Although I’d want to make sure I could test different animation patterns).

Actual Payment

As to actual payment: Most donation forms are outsourced to third-party transaction processors. I personally found most of the out-of-box experiences to be pretty bad.

The forms don’t look good. They’re just undifferentiated, boring web design.
The charity doesn’t get to express itself much on the donation page. They put their logo on top, etc. You might as well be buying power tools or a necktie as changing the world.
Some of the providers ask you to cover a “transaction fee.” “Transaction fees” are highly variable and ranged from a couple bucks to more than $15. This felt sketchy. It probably is sketchy.
One form tried to opt me in to receiving a tote bag, but thank God I noticed in time. I don’t need any more tote bags.
I don’t really want paper mail. Let me rephrase that: I really don’t want paper mail. But from tote bags to “billing/shipping address” differences, the charity world wants to send me things. Ulgh.

For the most part, the payment processors seem to have given up. Here are some boxes. Put your card info in them. It’s secure. Okay. Done.

But that was still better than the roll-your-own solutions. There were some bad anti-patterns that I saw on sites that built their own credit card forms:

Submit buttons were hard to find. My god, give me a big button that says “Donate!” or “Make Donation Now!” at the bottom of the form. Don’t make me look for some gray box.
My expectation was to fill out a single form on one page. But there were some too-clever dynamic forms that would expand and change as I filled out the form. This didn’t feel useful. It felt confusing and overwhelming and unstable. I don’t want dynamism in entering my credit card info.
My expectation was to give a one-time gift. Many of the sites had “Make this a monthly donation” as an option. One or two even had that option pre-selected. “Make this a monthly donation” is the “YES! Keep me informed about great deals from brands I love” of the do-gooder world. It’s great for the charities but it requires a 12-times commitment from me. Also: I never saw any options to make a quarterly or annual donation. I never saw an option that said, “send me an email when it’s time to renew my donation.”

I liked the experiences from:

Stripe (which pops up a very simple payment form, then gets out of the way);
PayPal (which is familiar and trustworthy if ugly and thus low-friction);
And from Kindful.com, which offers other services for charities.

I also really liked ProPublica’s form, which was easy, fast, and efficient. I clicked once to get here. My Chrome browser just filled in the whole form and I clicked “Donate Now.” It has the GuideStar seal of approval, and a picture of a journalist working (ProPublica supports journalists). It took me seconds to give them my money.

Compare that to this form from another media charity. This form works perfectly well and seems very “pure,” but was pretty forbidding to fill out. The “Donate” button is a little dispiriting, which is not what you want in a “Donate” button. And it took a while and I felt anxious.

A Few Last Thoughts

It took a few hours to give away a good sum of money. I had to enter my credit card a number of times, and my special credit card code many more. I maxed out my AmEx transaction limit and had to get it re-established in the middle.

Overall, as a fickle person who likes websites, I found myself yearning for simpler experiences and more engagement, more interesting ways of giving.

I have yet to see a charity site where I felt that people had done everything that is humanly possible on the Internet to get me to pay attention and give money. I don’t mean shouting at me — I just mean truly using the medium.

There has been some amazing print and brand advertising for charities. Often it is simple. For example, David Ogilvy wrote a 1968 memo that was left on the seats of the Metro North railway leaving New York City, as an appeal for the United Negro College Fund. It asked people on the train to just look out the window and contemplate that they were part of a larger society.

The Ice Bucket Challenge was one very good use of digital media, but it ultimately relied on virality and celebrity. Whereas the Ogilvy letter was designed to stay with you, to increase your sense of personal responsibility and connection to the human lives that were right outside your train window.

I don’t see a lot of that thinking in web design for charities. At least from this set of charities. I know that organizations like the UN have experimented with making games that show what life is like for people who need help. I am sure I should look further, and let me know of experiences I’ve missed in the comments.

But for right now: I believe the Web can create rich, contemplative experiences that drive engagement, and it’s a shame that those experiences aren’t part of non-for-profit sites. Plus it’s expensive to build digital products—yet, that David Ogilvy letter from 1968 is still referenced today, it performed incredibly well, and all it took was a printer or photocopier.

Across the relatively small set of charity websites I didn’t find any shocking surprises. Unsecured credit credit card forms aside. So I guess the regular advice all holds for charities: Keep your site secure. Make your “Donate button” obvious and maybe even unavoidable. Be less respectful about asking for money, go for it! Hustle! Assiduously study the donation forms of successful sites! Maybe work out a user flow where a “monthly” donation wouldn’t feel like a gotcha. And if you can spare a moment, think about different kinds of digital experiences that you could offer online that would give people the chance to immerse themselves into your world, and the cause, because that will motivate donations even more than the presence of a big red button.

Paul Ford is a co-founder of Postlight.