Someone here at Wanna Pixel (may have been me) said that websites are like a big box of beautifully synchronized moving parts, and front-end design just a veneer on the outside. But since the veneer is the only part that people will ever see, it better be amazing.
Nobody will ever see the inside of your website “box,” no matter how magnificent. Your users, visitors, and donors will only see that piece that back-end developers often think of as pesky or unnecessary.
But your website pages are your only connection you will ever have with much of the real world. If you don’t meet someone and shake hands at a benefit dinner, then your front-end web pages are all you’ve got to show that someone how important your work is.
It’s your only chance to get people to interact with that complex interior of the box.
Donation pages are a wonderful example. You may have the most amazing data on your organization and what a dollar is capable of accomplishing, how effective you are at turning cold, hard cash into educational opportunities, food, and rescue missions. But if a donor who encounters your giving page doesn’t see that story while they are making the decision to give, they’re going to give elsewhere.
They’ll probably give to someone who is doing exactly the same thing as you are (and maybe not even as well), who is pouring the same amount of passion into their communications as they are into their mission.
Don’t miss out on the opportunity to connect with a donor for life by skimping on the design and content of your donation page. Because really, it’s not a veneer at all, but an integrated piece with a living digital organism. A poorly designed giving page will remain a lonely static page, not an interactive tool to connect donors to your mission.
So first, make sure you’re directing donors to your own branded donation page, not a third-party giving website. Your website traffic will plummet when visitors see you are sending them away from your site to give. Studies have shown that when users click “donate,” they haven’t actually decided to give yet. They are still researching and discovering more about your mission. Your donation page is your last chance to tell your story and bring your ask to a close.
For this blog post, we wanted to show you the anatomy of an effective donation page by looking at one solid example. Once you understand the anatomy, you can alter the design to suit your branding and story.
After analyzing numerous donation pages, the Oxfam giving page got the gold for design and ease of use, and is the one we use for this case study.
Oxfam’s donation page hits on every major point I think a donation page should.
One: They re-tell their story.
They don’t just put their story above the donation buttons, although that is one option. They actually integrate parts of their story with the donation buttons themselves. “Your click has meaning,” this design choice tells the potential donor. “It provides shelter or education. It can even change a family’s family tree by helping them start a business!” With this kind of giving, you can practically see the results. This is what you want your donors to know—that their donation makes a difference. That it changes something.
Two: They suggest giving amounts.
Don’t let analysis paralysis stop your donors from deciding on how much to give. Present them with options. Invite that mouse to decide for them.
- “On average, donations are 43% larger on a branded online giving page that includes suggested donation amounts.” (Fundraising123)
- They keep the options to three. This is the best number. When you give people multiple options, you make the choice between those options, not between which organizations to give to (Nathan Porter, CEO, Wapix.co). But too many options will throw the potential donors back into paralysis again.
- The numbers are a font size of 4.2em (approximately 42px), while the line-height of the copy below the number (and the copy on the page) is 150%. The copy size itself is 16px. I think it could ideally be 18px or above, but it’s still strong. I put these geeky details here because a little bit of expert typography treatment goes a long way in taking the design of your giving page (or any page) from amateur and choked to something that will speak to your users and invite them to interact with your page. But balancing all the elements on a page together to create a beautiful design is a combination of math and art, and you’ll want to find a good designer to help you out with it (not to mention a team who is equally capable of implementing the design).
Three: Oxfam nails the point above but makes it exponentially more effective by tying specific results to specific giving amounts.
We encourage every nonprofit to do this. The most personal example I can remember of this is when I ran the IJM campus chapter at Messiah College. We decided to do a Loose Change to Loosen Chains fundraiser for IJM. We picked the amount of $2,000 because IJM (International Justice Mission) stated somewhere on their website that this was the calculated amount of funds needed to provide the resources to run the rescue operation for one person in slavery. Let me tell you, the campus did not stop short at $600 or $1,200 or even $1,900. We had to make it all the way to $2,000. There was a lot of rejoicing when the goal was hit. We rescued at least one child. This kind of deep gut reaction is what you want when people are presented with your giving page. It’s not just emotional—it’s empowering. Money can feel material and hollow. Make it real. Donating can feel superficial and impersonal. Make it feel powerful (because it is), and your donors will be that much more likely to give.
Four: They encourage recurring giving.
The page has a prominently placed single/monthly toggle button. That monthly button is just aching to be clicked. Donors who come to your page with the intention of giving one small gift will see the impact of their gift again and will often choose to give monthly.
- “Donors are 31% more likely to initiate a recurring gift on a branded page versus unbranded page.” (Fundraising123)
- Recurring giving makes it much easier for you as an organization to budget, makes administrative tasks relating to budgeting easier, and makes the donor’s tax reporting easier.
- Recurring giving ties your donor’s heartstrings to your organization for the long-term. Ask me, I’ve been giving to IJM for almost 10 years, and it would feel like a major chapter in my life closed if I were to stop. The same with Compassion, International. (By the way, when writing this article, I checked to make sure my monthly gift for IJM was still recurring. My card details had changed a while back, lapsing my monthly payment, so I started it up again.)
Five: The design is absolutely stellar.
The colors are fresh. The typography of the numbers is unique and completely brand-specific. The spacing between elements is on par with design best practices. The page is not cluttered or overwhelming. And there are subtle little rollovers enticing the potential donor to just click already.
They are not afraid to use color. Green is symbolic of growth and new life. Make sure you don’t shy away from color in your design, and remember that each color has a meaning. You want to evoke hope, empathy, growth, and life with your donation page’s color. Depressing grays or corporate blues and blacks are probably not going to help pull at your donor’s heartstrings or give them the impression that you’re in touch with your constituents (or the people and communities you are empowering). This bold use of color is consistent with what we’ve seen in other successful giving pages (see How Did Charity Water’s Site Help Them Raise $30M?)
Bonus: if you have social proof, credentials, or certificates, display them.
They are right below the giving buttons for the Oxfam donation page. It’s good practice to present an option to give, present social proof or credentials, then present another option to give, before or after more of your story. That’s exactly what Oxfam does.
The one thing I’d like to see is if a donor clicks monthly giving, they should be informed that they can create an account to manage their monthly giving. This should be early on in the process.
They did pretty well on the mobile version. I wish the boxes were full width, but maybe they wanted the donors to see all the options on one screen. Still, it looks a bit more awkward than full width boxes would have.
Six: They keep asking, and asking, and asking.
Jokes aside, as long as your story is woven into the page, multiple asks are a good thing. We see it on all the pages of the most successful organizations. IJM, Charity Water, and many others will keep presenting the opportunity to get involved after the initial donate button by giving the donors glimpses into their work and presenting multiple opportunities for donors to participate. These kind of non-monetary asks let donors know they are important for more than just their money. Also remember that any positive connection you have with a donor is a win, and a no today doesn’t mean a no forever.
You really can’t do much better than Oxfam has done. We applaud them for being an example of how to invite donors to participate with their mission. The one thing we want to add is that you should remember to thank your donors within 48 hours after giving!
The most freeing quote I’ve ever heard about marketing is this: A successful pitch is one in which your potential client walks away thinking, “That was a nice interaction.”
A successful ask is one in which your potential donor walks away thinking, “That was a warm and human experience. I’d like to encounter that organization again.”
Your donation page is one way you can make your donor’s experience human and warm.
If you haven’t already, go back and read Kelly’s article Giving Page 101: 7 Tips For Creating A Successful Year-End Donation Page.
- Giving Page 101: The Anatomy of An Effective Donation Page - October 20, 2017
- Tips for Creating a Nonprofit Website Part I: Choosing Your Primary Audience - September 11, 2017
- A Look Behind the Design for the Denver Analytics Forum Event Website - August 22, 2017