Marisa Porter, Author at Wanna Pixel

Giving Page 101: The Anatomy of An Effective Donation Page

Marisa Porter - October 20, 2017

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 kinds 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 , or check out this article by our friends at Wild Apricot about 6 Steps To Create a Donation Website for your Nonprofit.

Give us a shout if you’d like to chat about how your nonprofit can better utilize its donation page. We’re here and we’d love to help!

Tips for Creating a Nonprofit Website Part I: Choosing Your Primary Audience

Marisa Porter - September 11, 2017

1: Choose one primary audience of your homepage.

This might be the most important point in all of our websites for the nonprofits series.

Choose one audience, and focus your energy on it.

Simplify your home page’s message. Remember, you only have 3 seconds.

At first, this seems impossible to our clients. But if you understand the importance of targeting your demographic, it makes the approach much easier. Because if you chase three demographics, you will lose them all. Choosing one actually makes it easier to connect with all of them, strange as this seems. Choose one, and all good things you need will follow.

What is the primary audience for most nonprofits? Donors. There are exceptions to this of course, like the organization we work with that wants to reach visitors to their hot springs, which are at the center of their cause. Or the organization that is government-funded and cares more about raising awareness among recipients of their food programs online so they can maximize the impact of their mission.

What is the desired action of your primary audience?

The obvious answer, “to click on a donate button,” is the right answer for most nonprofits. But this may not be the right answer for you. If you’re the kind of nonprofit that relies heavily on selling a social good product (like Sevenly or Trades of Hope both do), you may want your donors to buy a product or service. Maybe you want your audience to primarily focus on signing petitions or hosting awareness events (though this is usually secondary or hand-in-hand with donating, like in the case of IJM.org). Or maybe your primary need is for volunteers, but again, most nonprofits who need volunteers also need donations to fund the efforts of those volunteers (but not always).

Or maybe it’s not your donors at all. Maybe, like above, it’s actually those who are impacted by your cause—the humans you’re empowering and helping. Maybe your online purpose is to engage them to take advantage of certain goods or services, like our client who provides meal programs to school children and needs schools to enroll.
The most effective nonprofit websites choose one purpose for their homepages. This is not to say that other key people cannot use your website. It’s just that it is built with a primary audience in mind. We have many tips for tailoring your homepage to your target audience, but the key is to get that main purpose nailed down and to not waver from it. Other constituents of your organizations will follow along if you can hook your primary target. This is because your cause is heading in the right direction and you’re mobilizing people by intentionally choosing a focus. Once you do this, people who, for example, advocate for you in government positions will be more likely to jump on board. This is an example of how you can reach more than one target market by only focusing on one.

Amazing, isn’t it?

This is a principle that applies to all of life, but especially here.

So how do you grab your donors or other target audience members by their heartstrings?

By knowing who they are. Which brings us to to point number two.

2: Know Your Audience

Even if you’ve already chosen your target audience, you have to know a little bit about them so you can tailor your communications (which includes your website) to those humans.

We’re so used to throwing words around in marketing like “demographic,” “user,” “audience,” and “profile,” that sometimes we forget we’re talking about humans.

Humans who have stories and histories themselves. Humans with interests or who have been personally affected by the cause you champion.

If your audience is your donors

Knowing your donors is hard and takes focus, research, and communication. But before you get to all that (we’ll cover it as we go along), remember why you created your nonprofit in the first place. You were passionate about the cause, and just like in business marketing, your target audience usually is a lot like you. They are going to be people who connect with your passion. Maybe you love kids and sports, so you started your nonprofit to engage inner-city kids in after school sports programs. Your target audience might be others who love kids and might even include people who love sports. Maybe it’s an arts program. Go after artists. Make sure your homepage appeals to the sorts of people who will want to donate to your program. Even people who love to give usually have certain areas in which they really love to give—the environment, sexual abuse aftercare and prevention, music programs, etc. The list of possible donors is as long as the list of nonprofits. Make sure you’re speaking their language, showing them what they’re capable of by partnering with you.

(A word about age groups. Maybe you know your audience is all major donors or they’re baby boomers, but remember that while you retain your current donations using things like mailings, you’re going to want to target millennials and younger online if you want your organization to endure. If your current donors are all over 50, you want to begin to broaden your focus. Your website’s homepage is a good place to start.)

If your audience is your beneficiaries

Similar to the idea above, your beneficiaries may be who you had in mind when you started the organization (or joined it).

How are their lives personally affected by the challenges they have faced? If they have dealt with abuse, how can you use the precious real estate of your homepage to say, We know. We’ve been there. We can help you be an overcomer? If you want to connect with refugee families and connect them with helpful resources, how can your homepage paint the story that a refugee family has lived and offer hope, giving them a cue that you have the resources to help them?

3: Tell their story, not yours

This point is especially for organizations who are choosing to target their beneficiaries with their website homepage. Speak to, not at, the people you’re trying to help. Acknowledge the strength they have to get through the particular challenges life has dealt them, and speak a language of dignity and respect. Make sure your imagery and verbiage honors the human spirit and will to survive and thrive. Avoid making them feel like a victim in need of saving. Make sure they know you admire their courage and are willing to learn from them and want to partner with them on their journey.

4: Partner with your humans, not the other way around

This point is especially for those organizations who are choosing to target their donors with the homepage of their website.

Know that today’s givers already are aware of more causes and reasons to give than their parents ever were growing up. They are aware, engaged, and concerned. They already are over-burdened with the world’s problems—refugee crises, wars, human trafficking, the environment, arts and music being cut from schools, homelessness, hunger, children with no one to look after them. Being a millennial myself, I can be overwhelmed with depression just beginning to type this list. For this reason, I stopped short. I didn’t want to go on. This is why the website we’re going to help you create isn’t going to be one that shouts the cause into already cause-exhausted hearts. Instead, it is going to be one that proclaims what you’re doing about the world’s problems to your donors.

Try borrowing from Point 3 and tell the story of the amazing humans you are helping through your cause.

Trust me, your audience will want to help. They already do. They are looking for the right organization to join ranks with.

Will it be yours?

A Look Behind the Design for the Denver Analytics Forum Event Website

Marisa Porter - August 22, 2017

We at Wapix are so honored to have designed and built the website for the event we are hosting in partnership with Tech4Good Denver: Google Analytics for Nonprofits.

The first-build version was built around the idea of the upward rise Google hopes you’ll see in your analytics. It was a bit stark and used bright orange and a blue that was just a few shades away from system blue.

The second iteration, the one pictured here and on the live site, focused on an on-trend handwriting typeface, Bourton Handbase, a delightful family of fonts that included comforting elements like hatch lines, chalk shapes, and a script that is not too hand-written and not too cursive. The script font has even weights throughout, saving it from being a too-fancy invitation font, maintaining a sort of simplistic primitive charm, as if written with a stick. Its lack of variation conjures up images of a plainclothes craftsman with excellent drawing skills using simple tools, rather than Old World prestige.

The typography we chose, with its comforting and inviting elements, was intended to encourage attendees to view the event not as a tech-oriented classroom but as a warm gathering of people with similar passions. It also gives a nod to simple and elemental principles in art, hoping to mimic how something as complex as Google Analytics will be broken down into simple elements.

The colors were natural byproducts of the imagery and typography chosen. A retro chocolate brown, which I’ve always loved paired with a bright, sunshiny yellow. These two colors together remind me of the bright yellow stitching on a craftsman’s dark overalls.

Perhaps one of my favorite elements is the favicon—a little bright yellow dot with chocolate brown arms representing the upward trend of traffic visits we hope you’ll experience after this forum.

Strength and elegance, beauty and solid craft. This is the balance we all aim for in our communities and lives, our designs and our digital presences.

Google Analytics Forum for Nonprofits.

How To Use CiviCRM’s Mosaico Extension To Create Responsive Emails

Marisa Porter - August 10, 2017

At Wanna Pixel, Inc., we have been excited about Mosaico, a drag and drop email builder native to CiviCRM, for quite awhile. Most designers and nonprofit staff alike have struggled to use the CiviCRM mailing feature to create responsive email campaigns. Three years ago, I wrote an article about the responsive template I created for CiviCRM users, hoping to help ease this struggle.

Is #mosaico by @civicrm @teamcompucorp @vedaconsulting the email-builder for #civicrm? via @wannapixelClick To Tweet

Before Mosaico, there were two options for email building when using CiviCRM.

use responsive html templates and spend hours editing them whenever you wanted to make a change
Integrate with MailChimp and lose some data and token access

CiviCRM, Veda Consulting, and CompuCorp worked together to create a beautiful extension for CiviCRM’s mailing feature which integrates with Mosaico, a Drag-N-Drop tool created by VoidLabs.

Our big question was: Will our creative and development team be able to use, recommend and train our nonprofit clients to create satisfactorily beautiful emails without having to integrate with a third party email builder such as MailChimp, or painstakingly editing raw HTML templates?

With a native #email builder like @mosaicoeditor for #civicrm, you have access to all the tokens. Click To Tweet

In this tutorial, I’ll use a Wapix welcome email to demonstrate creating a responsive email with Mosaico.

Install Mosaico by following the steps described here, or by downloading directly from Github and installing it at your CiviCRM website. (We downloaded version 2.0 beta it from github. There was a commit shortly after on September 4th).

As you normally would, navigate to Mailings > Mosaico Templates.

For the tutorial, select New from base template.

The dialogue will ask you to give a new name to your template. Give it whatever name you want. Something like “My Awesome Nonprofit’s Name,” or “Monthly Newsletter,” or “Experiment,” or, “The Fox and the Hound.” Whatever.

Here’s the fun part. You get to drag and drop elements.

The very top element is a header. It’s a good choice for your organization logo.

There is a little blue upload icon if you hover over or click on the placeholder image. Click on this icon and navigate to your logo file. Make sure this is an optimized png file.

I didn’t upload one that is exactly 258×150. The logo was constrained to the width of the placeholder, but the height is not constrained, which is a good thing.

Once you have your logo uploaded, you can change the background color. I don’t like the way my logo looks against the medium gray background, so I’m going to change it to light gray.

Click on Style.

There is a little blue toggler that switches the style tool from the single block to global. The 3 blocks represent global styles and will change all the blocks to the style you choose. It is already set to global. I recommend leaving it as global for things like background colors and text styles, so your email doesn’t look like a patchwork quilt.

The result of changing the color.

Switch back to Blocks.

For this tutorial, I am going to select an image block, because I like that it is full width.

Follow the same process to change the placeholder to your image as you did to upload your header.

There are some pretty cool options with the images, which you can see above. You can choose to “Show Gutter” or not. I choose “not,” because I think full-width images in emails look much more modern and they are my preference.

You can also link the image and set the alt text for accessibility.

There is also a way to show the preheader or not. I’m not sure why this option is right here, but it is nice to know that it exists. I usually leave the preheader on.

I dragged the content block “Title,” above the image and a content block for “Plain Text,” just below it. I edited the style for both.

I made the title our brand color blue, and I changed it to bold.

I changed the plain text to a font size of 18 but left the color.

Now let’s add your first call to action!

I added a “Button.” I clicked on the text to edit it directly in the editor. Then, I clicked on Styles. I made my button background color match our Wapix brand blue, and I changed the border radius to 1. (I’m not a fan of border radiuses in general, so I like 0 or 1.)

In the next step, I added a link to the button.

I also added the same link to some of the text in the text block above. I clicked on Style to change the global link settings, so that they are the brand color blue. Remember to check to see if you are in global settings.

Our email is almost done. Let’s add a footer from the block sections.

I dragged the footer over, which contains a social block. Adding your links to the social block is demonstrated below. I also turned off “Google Plus,” because we don’t use it much.

With the design all done, it’s time to add tokens to our email! This is where Mosaico has a huge advantage over using a third party email, such as MailChimp. CiviCRM has hundreds of tokens we can use to make our email campaigns more user–friendly and database–friendly.

I changed the text block on the left from “address and contacts,” to instead include a CiviCRM token.

To do this in your email, insert your cursor inside the little text block and select Tokens. When the token box comes up, enter “domain” in the search box. This will bring up all your domain tokens. Select the first one, domain address.

Now you have the domain address inserted in the footer.

Let’s add at least one more token to our email.

In my first title block, the one that says welcome, I inserted my cursor in front of the word welcome.

Search for “name” in the popup box this time. Select contact first name.

Check the mobile view of your email by clicking on the little phone in the gray toolbar. (You have to have your screen resolution set to 1621 or higher. I think this is too bad, but I’m sure it’s something Mosaico will improve in the future.)

Pretty impressive mobile view!

Click Save.

Go to the CiviCRM menu and select Mail > New Mailing. It is the top button, which says “New Mailing,” and not the bottom button which reads “New Mailing (traditional).”

Fill in the mailing name (which is the name that you alone will see), the from address, and the recipients.

In the subject, follow the same steps of inserting your cursor where you want your next token. Select contact first name again.

Select your design from the saved templates below.

When you select your template, it will bring you to the same editor you were in before. If you want to make changes here, you can. Keep in mind none of the changes you make here will overwrite your template, but will simply make the changes in this email campaign. (If there is one thing I could change about Mosaico, it would be to have the option to save the changes over the template if you want, as an option. However, it’s always a worry that someone will accidentally overwrite the template when they shouldn’t, so perhaps it’s a good thing that this option is not available).

If you want to edit the template permanently, it is best to save your mailing, exit, and select the template under Mailing > Mosaico Templates. Then save the template and come back to your email. This will prevent you from thinking you’ve made important general changes only to see that they have not been saved to the template. Edit in the mailing only when the change applies only to that mailing.

When you are done, click Close, to return to your general email settings.

Scroll down and choose Save Draft, Send Immediately, or Send On.

If you saved your email as a draft to send later, you can find it under Mailings > Draft and Unscheduled.

Congratulations! You’ve created your first Mosaico email.

Summary

So how does Mosaico compare to MailChimp?

In database use:

Of course, there’s no comparison here. Mosaico is an easy win, because it’s integrated fully with CiviCRM and not a third party tool. All of CiviCRM’s wonderful tokens are available to use, which is going to make your email campaigns more user-friendly and much easier to set up. Here are a few reasons Mosaic is superior to a third party tool.

Tokens are much easier to use.
Your email content will be saved in your CiviCRM database.

Native email–builder like #mosaico is better for your database. #civicrm via @wannapixelClick To Tweet

In design:

I have to admit, I’m impressed. The developers have done an incredible job in creating this beautiful Drag and Drop extension for CiviCRM’s email tool.

And here’s a conclusion I didn’t think I’d be coming to before I opened Mosaico.

I prefer the Drag and Drop interface to MailChimp’s. MailChimp is my favorite independent email campaign creation tool, so this is saying a lot.

Here are a few reasons why I prefer Mosaico.

When you are in a design block in Mosaico, it is extremely easy and intuitive to toggle between global and local style settings. By contrast, in MailChimp, there is a lot of saving and exiting and navigating to your global styles. Then when you do navigate to global styles, it is divided up among things like page, content, body, etc. I’ve always found it a bit confusing and never can quite figure out where some of my styles are coming from. Mosaico makes this extremely simple, always keeping you inside of one panel.
In Mosaico, you can edit all headings, links, and content in the WYSIWYG editor. In MailChimp, it always opens up a separate window to edit, adding one extra click and a slight delay as well.
I found editing the background and inner table of the email easier in Mosaico. Sometimes in MailChimp, I end up with more layers and wrappers than I mean to.
In short, Mosaico is simple, containing everything you need and nothing you do not need.

In a nutshell, for everyone longing for a way to create native, responsive emails for CiviCRM, Mosaico is the resounding answer.

Want to know more?

We spend our days implementing, supporting, hosting, customizing, and training CiviCRM. So feel free to reach out about your needs. Also, I’ve included a list of other helpful articles below.

How To Use Font Awesome In Your Designs

Marisa Porter - July 26, 2017

Sometime after I started using Font Awesome on my websites, I was overjoyed to learn how to use them in designs. It’s pretty cool and very easy. (See my tutorial on how to use font awesome on your site).

Step 1: Go to this page

http://fontawesome.io/

And click download.

When the box pops up, click “no thanks just download Font Awesome 4.”

Step 2: Install the font. To do this, navigate the zip file you just downloaded to fonts > fontawesome-webfont.ttf for a PC. Or fontawesome-webfont.eot for Mac.

Step 3: Now for the best part. Simply go to http://fontawesome.io/cheatsheet/, and copy the icon (not the text) of the icon you want. You can search for it by using Control+F, or just scan them with your eyeballs.

Step 4: In your design, create a text box. I’ll use a Photoshop file.

Step 5: Change the font to FontAwesome.

Step 6: Select the text just as you would any other text, then click Control+V to paste the font awesome information in.

Tada! You now have an envelope (or whatever icon you selected) instead of a letter.

Isn’t Font Awesome cool? I love nothing more in the world of design than scalable elements, unless it is white space or beautiful color themes. Or typography. Typography is the best. Maybe because it is a bunch of scalable elements that carry centuries of meaning.

How To Use Font Awesome On Your Site