A little bit about me, I have been in the IT field for many years, I took my knack for technology and decided to do something with it. In 2007, I started using WordPress as a blogger, granted I was terrified of publishing, so officially I did not have any readers until 2008. I designed my first site, then designed another, and so on. For many years I designed sites for free. In 2015, I went on my first of now many mission trips to Haiti. It was on that trip that I decided I needed to do more with my talents. In 2016, HeartWired Digital Solutions was born. Since then I have worked with various nonprofits and small businesses that give back to their communities, both locally and globally. It is working with those clients, that brings me to today, where I will share with you some design tips on how to design a website for a nonprofit that is not only functional but also increased engagement and in turn donations.
Nonprofits, while the name is a bit deceiving, are run or should be run just like a business, this included their website.
One of the first thing a nonprofit should do is invest in a CMS, and what better one to invest in than WordPress. WordPress itself is a non profit whose sole purpose is to ensure that it remains freely available, maintained and open source developed so that everyone can use it.
Why WordPress? It’s free, granted hosting, themes and plugins can cost, but you can in fact develop a website free of charge, well besides a bit of time of course. It’s easy to learn, all someone needs to do is Google or YouTube search how to do something, the information is there and readily available. Same goes for its code, it is open source for all to use. Customization is easily available whether using an out of the box theme or custom design or development. There is a community, prime example, right here in Berlin and the thousands that will gather to share with one another here and at WordCamps and Meetups all over the globe. It is built to be social, readily shareable on various social media platforms through either the base framework or plugins. Speaking of plugins there are plugins for just about anything and everything.
Here are just a few plugins that my company has utilized in creating nonprofit websites. Granted there are plenty more to choose from, many of which are here as sponsors or vendors where you can learn first-hand during Wordcamp Europe, I know I will be making the most of my time here learning from all of them.
Tell their story, the past present and future of the nonprofit. Stories are what make each of us different in our own unique way, nonprofits are no different. Stories create emotional connections, which in turn create passion, which develops into volunteering or donating as people are drawn in and want to be involved. Promoting the nonprofits story, that should be front and center when someone visits their website, they want to not only know what you do but more importantly why should they care. By inviting them in to participate in a story where they can feel involved and become the hero of the story, what better way to drive engagement?
Content is king or queen, which in marketing sure that is true, but engagement in real relationships matters so much more. Stories open the door into a new world, a new world where the donor feels they can play a part. When they open their wallet, they are donning their own superhero cape in the story. The more opportunities they have to save the world, or just the nonprofits part of it, the more they will donate, and spread the message so that others will as well.
Theme choices are wide and various these days. There are some fantastic themes that are built specifically for charitable organizations with premade templates, call to actions, and more. While a designer or developer can create similar look and feel without donor specific themes many times picking one that is built for that kind of engagement can be best, or you can always design your own based on those examples. Theme choice also can be a matter of personal opinion and preference.
Color psychology suggests that various shades can have a wide range of effects, from boosting our moods to causing anxiety. The colors used in web design is no exception. Colors invoke emotions whether we realize it or not and we need to be cognizant of that when creating a nonprofit site as we want to use colors that invoke the appropriate emotions that will amplify the story we are sharing.
If you look at the various logos of companies for example, those colors generally were not created on a whim. There are colors used to specifically align with the message of the brand, the same can be said for nonprofits. The colors used in their logos, websites, print material usually has been researched diligently before ever being seen by the public. The same can be said for brands that want to be everything to everyone and utilize more diverse colors in their brands. The same thing can be said for the audience or the perceived audience for the brand, If they are targeting males versus females or vice versa both colors and even shades or tints of colors all have an affect on the appeal, engagement, and emotion of who sees the website design or brand.
Font choices also can have an impact on the visual perception of the design for the nonprofit. Fonts have even been associated with not only invoking emotions but also to the level or invoking taste perception. The use and coordination of the appropriate fonts can again influence emotion, perception and in turn trust with the consumers donation dollars.
Ever have a client tell you that their audience was XYZ only to find out after designing their site the real audience is ABC? This happens all too often, for example when I started blogging I first thought my blog was going to be a faith-based blog for men, then I found out most of my readers were women. The same thing can happen when you design a site based on what someone thinks is their donor base without actually verifying that to be the case.
Navigation – make it easy to use, use a top or left side menu with terms people understand. Also use only one to three-word titles in the menu, anything more just causes confusion. Same goes for drop down menus, best practice only go one level, make it too difficult to navigate and they will bounce of the site and donate elsewhere.
Give your donors a choice. Beyond the tear-jerking commercials and brilliant use of orange, one thing the ASPCA does brilliantly is they give their donors options. From a call to action button to donate with options to links to other ways such as matching gifts, fundraisers, major giving, actually mailing a donation to simply buying on Amazon like we all do already. Giving your donors options not only increases engagement, it also keeps them involved as they want to know more about those other ways, they can help versus just giving you their credit card number because they saw a commercial with Sara McLachlan music and sad puppies to get a free tshirt.
Some best practices include things like standard branding, use the logo on every page, same colors across the site for consistency. Don’t be afraid of the donation button. So many nonprofits wonder why they are low in donations yet they have the donation button either hidden on a back page somewhere or only displayed once. Make it easily accessible top, middle bottom and from any page. Also make the check out process easy, too many steps and just like an ecommerce website and people will give up and bounce. Also offer other ways that people can support such as a call to action to volunteer rather than donate. If people feel they have a choice in the way they can get involved, they are more apt to be empowered to become a champion for that particular nonprofit whether through donations or other means.
Some reasons why people don’t donate… you did not ask enough, your story was not compelling enough to make them feel as if they were making a difference. They don’t feel valued or appreciated, and most of all they were never asked in the first place which happens more often than one would think which goes back to the placement of the donation button I mentioned on the previous slide.
Optimize their design for them and the message they are telling and in turn selling. This includes things like colors, themes, seo, the way their message is shared and how you share and content .. Content content
Ways to increase conversions .. Tell a bit longer story, long form outplays short form. Make Optin fields optional.. People don’t like to be forced into giving their information yet unforced they will give it away freely. Reduce eye friction, don’t make the viewer search or bombard them with distractions, the simpler the better. Less is more .. That goes for the steps in the checkout process as well. Add your ask upfront with a strategic call to action.
Do .. Easy navigation, use pictures that amplify your message, optimize the site for speed, make your ask clear, keep it simple, keep it safe and secure and make sure it is mobile friendly.
Don’ts .. As mentioned don’t hide the donate button.. Also don’t self play audio or video .. Many times people are looking at the site in either places they don’t want others to hear or they simply don’t want to be blasted with audio. Don’t hide the story .. Make it front an center rather than saving it for the About Us page … don’t forget to ask.. Asking is okay begging is not.. Also make sure you don’t use imaged or video that are too big and slow down the site as you will lose visitors.
Make sure when creating a site you use analytic tools, you want to figure out who the audience really is and how they behave on the site in case the nonprofit needs to change their approach in design. Also be sure to utilize lead pages and funnels to follow up with visitors that perhaps were not ready to engage the first time.
Remember when designing for nonprofits, they are the nonprofit not you. Many times there is an assumption that nonprofit work is free work, granted some agencies and designers do offer work pro bono, but that does not mean you have to unless that is your business model. Make sure when discussing with the prospective nonprofit, just as with any client you set the expectations upfront, charge accordingly and most of all have a heart.
To wrap up, its sometimes best to use a simple website builder or theme with flexibility for building a donation website, personally I have used Divi, Elementor, Beaver Builder and Genesis but there are plenty of other options. Make sure to have a strong visual identity by proper utilizing logos, pictures, fonts, and colors. Optimize the site for mobile devices, make sure the donation forms make sense and are easy to use, WooCommerce offers some great options to build the donation platform. Use content that brings people back and also engages them to share the content with others, most of all make sure that user engagement is a priority. Lastly make sure to have fun, we have worked with numerous nonprofits and can say that seeing them be able to spread their message online in a way that changes community is many times all the reward we need or could ask for.
WCEU 2019 WordPress for nonprofits - HeartWired Digital Solutions
WordPress For Non-
Profits: Website best
A bit about me…
Been in IT for Years
Started using WordPress in 2007
Began my design agency in 2016
Design for Nonprofits
While they serve the common good, they also must be run much like a
business, this included their websites.
Nonprofits are best
supported by a nonprofit
• Invest in a CMS (i.e. WordPress)
• 42% of all nonprofit websites are on WordPress
• The WordPress trademark and the
WordPress.org domain is owned by the
WordPress foundation, a non-profit 501(c)(3)
organization, whose sole purpose is to ensure
that WordPress is freely available, maintained,
and developed. (Source: WPBeginner.com)
• It’s Free
• It’s easy to learn
• It’s open-source
• It’s customizable
• There is a
• Built to be social
• Plugins for almost
Recommended Plugins for starters
Tell Their Story
• Past, Present and Future of the
• Stories differentiate the nonprofit from
• Emotional connections increase
• Promote their story, invite visitors into
the story to participate.
• Content is King or Queen
all depending, engagement
• Stories sell and donors give
• The more you share the
more they will give.
Colors matter in
good, bad or
So many colors to choose
from but do they really
Psychology of colors can cost dollars
Up to 90% of first impressions of products can be based on color alone.
Colors matter So does gender appeal
audience as you
design makes all the
Many times your client ‘thinks’
they know their donors.
• Easily accessible menu
(Top bar or Left side)
• Short menu titles that
• Maximum of one level of
drop-downs so they
don’t get lost.
Give donors options
• Matching Gifts
• Major Giving
• Mail in donation
• Smile Amazon program
• Workplace Giving
• Ideas are endless
• Keep branding
standard across the
• Feature the
• Make the donation
• Other ways to
participate such as
Why they don’t donate
• Solicitation is infrequent
• They don’t see how it will
make a difference.
• They never feel wanted or
• They receive no direct
• They gave an
unacknowledged gift in the
• They were not asked to give.
• The timing wasn’t right.
• The organization’s mission
Optimizing the design
• Every nonprofit is
different and so are
• Colors matter
• SEO (Search Engine
• Mission ready
• Get Social
• Content …content …
A/B Testing – Increase Conversions
• Long Form vs. Short Form (Increase 155%)
• Making fields in Optin optional (Increase 275%)
• Reduction of Eye Friction (Increase 135%)
• Less Steps through the process (Increase 166%)
• Adding simple CTA button upfront (Increase
Reference: MecLabs: Research-based Lead Gen Swipe File
• Easy to use Navigation
• Use Pictures
• Speed Matters
• Clear CTA
• Keep it Simple
• Secure it!
• Hide the Donate button
• Self Play Audio or Video
• Bury your story
• Forget to ask … again
• Be scared to ask
• Use big picture files
Analytics and more
• Google Analytics
• Heat Mapping –
• Email Marketing
• Lead pages for
Your clients are
Not your agency!
1. Have a plan
2. Set expectations
3. Charge them!
4. Have a Heart
Nonprofit work is not free work!
Use a simple website builder or theme for building a donation site.
Have a strong visual identity (Logos, pictures, fonts, and colors)
Optimize your web design for mobile devices.
Prioritize your online donation forms.
Build loyalty content that makes donors donate.
Make user engagement a priority.