Sean Chisholm

Designing Your Nonprofit Website for Engagement

Ross Campbell

UX Developer

StayClassy is an online fundraising platform for nonprofits.

Since you’re already reading this blog post, that fact may seem relatively trivial.  It’s important to note, however, that we are a fundraising platform for more than one nonprofit. When we build new features and design new interactions, we’re very aware that what we build needs to work for many different organizations, both big and small.

That being said, there are some common techniques and best practices that we’ve come to favor because they happen to work exceptionally well for our diverse client-base. Today, I want to focus on one of these design patterns: providing immediate feedback.

This particular pattern is rather self-explanatory, but at the risk of stating the obvious… it’s all about giving immediate feedback to the people using our site. We use feedback loops to reinforce desired actions and to round out communication with our users.  In fact, this design element is integrated into everything from our donation checkout forms to our automated email communications,. Let’s start by taking a peek at how we use immediate feedback to enhance the checkout experience.

Provide immediate feedback to reinforce desired actions.

One example of “immediate feedback” design that we’ve implemented on StayClassy is the donation bar on our fundraiser checkout pages.  The bar shows the amount of money raised for a given fundraiser, a great way to remain transparent about funds raised and to encourage giving.

More importantly, however, as one selects a donation amount on the page, the goal bar dynamically adjusts to show the “impact” of your donation.  If you change your mind and choose a larger donation amount, the bar will nudge closer to the fundraising goal.

Technically speaking, this isn’t a complex effect to produce.  But from a personal interaction standpoint, there are huge gains to be had by responding immediately to a donor’s actions. It’s a playful behavior, but it also transforms an abstract dollar amount into a tangible level of progress. It moves the bar forward, and edges the fundraiser closer to completion.  By coupling this responsive goal bar with the picture and name of the individual fundraiser, it’s almost as though you can hear the fundraiser saying, “Thank you so much!  Your donation will get me ‘70%’ of the way to my goal.”

Check out charity:water’s pledge your birthday page, for another good example of how immediate feedback can be used to reinforce desired actions. When you fill in your info and pledge to fundraise on your birthday, a few things happen. After you put in your birthday the screen automatically displays the number of other people with that birthday that have already pledged their support. Then after you’re finished putting your information in and prompted to share on social media, the total tally of “Birthdays Pledged” goes up by one. All of this feedback subtly reinforces the fact that you are joining a community of other like-minded individuals. Similar effects might be added to volunteer signup forms, petition signups, or email list signups to improve conversions.

 Support instant feedback with supplementary communication

Feedback doesn’t just need to exist on a single page.  Our system has been constructed to send automated emails when certain interactions happen on our site (when donations are received, for instance).  As a charity, this gives you insight into the level of donations that you’re receiving.  As a donor you receive a receipt and thank you email after you complete your gift.

So why are reinforcing emails important? Well for one thing, interactions over the Internet are, to a large degree, impersonal and abstract. Although this is hard to completely overcome, using email communication to integrate personal touches into your web presence can help humanize and personalize the process. An action, like a donation, deserves thanks and should receive thanks. Using an email platform to schedule an automated (but personalized) message a few days after a donation is made is a great way to add another level of communication to reinforce and express gratitude for the gifts you receive.

The same types of triggered communications can also be applied to other interaction points on your website. To continue the charity:water example from before, once you signup to pledge your birthday, not only are you reinforced on the page, but you also get an auto-email thank you. Then when your birthday nears you get additional auto-emails to remind you and prompt you to take action on your pledge. The point is that actions on a website don’t happen in a vacuum and when you can reinforce them with personalized email messages you’ll improve retention and future conversions.

Actually, your follow up doesn’t even have to be automated or confined to the Internet. One of our recent blog posts highlighted the tremendously positive effect that personal phone calls can have on donor loyalty.  We take this for granted in the offline world, but the principle extends to our online world as well.  And your outreach doesn’t just need to end with “thank you” messages to donors.  A personally styled message asking for feedback, or providing news and updates to contact information, can go a long way to reinforcing supporters’ commitment to your organization.

Parting Thoughts

They key takeaway here is that using design elements to integrate instant feedback for your supporters can be enormously beneficial.  You can implement this feedback online, on your websites, blogs, and social media, or you can implement supplementary forms of communication like automated emails, personal messages, and even phone calls.

These feedback loops add an incredible sense of liveliness to any process or set of interactions.  For your organization, this means that donors and supporters will be able to participate at a much more engaged level.  Increased engagement is precisely what you want because it helps foster passion and excitement around you and your organization.  So take a few minutes to find areas on your website where you can incorporate instant feedback or supplementary communications.  Start small and incorporate a few feedback strategies into your current offerings.  Of course, feel free to implement the above examples or branch out with your own techniques.  And be sure to let us know of what you come up with!

Want to Raise More Money Online?

Image Credit: Flickr User Dominic’s Pics

Where social entrepreneurs go to learn and grow

Join over 20,000 leaders just like you who get their weekly dose of technology, innovation, fundraising ideas, and the latest industry trends.

Subscribe to the Classy Blog