3 Tools for Designing Nonprofit Websites Like a Rockstar | npENGAGE

3 Tools for Designing Nonprofit Websites Like a Rockstar

By on Apr 23, 2015


Feature photo: Used with grateful permission from radiant Liz Vice performing for Portland Soundcheck.

Good designers love data. Why? Because whether you’re crafting emails or designing web experiences, you will ask yourself the two big questions over and over. Is my design effective? How can I make it better?

It’s tempting to think that designers should instinctively know when a design works, but let’s not confuse design with art. Ultimately, a designer only truly knows if their baby is successful by testing it. Here’s some examples.

  • How do I measure the success of email designs?
    Email open rates, hyperlink click-thrus, and conversions tell the story. You knew that.
  • How do I know our redesign solves the website’s usability challenges?
    Quick-and-dirty prototype testing finds the right user experience for your real donors before launch.
  • How do I measure the success of a website redesign after launch?    
    Tracking month-over-month online giving and monitoring your website traffic paints the picture of success with hard numbers. Improve conversions is another key indicator.

Now you may be saying, “Okay, I’m a good designer but I’ve got some really hard questions like…”

  • How do I pick between multiple designs when I love all three? 
  • Where do my visitors click on our home page most frequently? 
  • Why do my donors phone me about information they can easily find on the website?  
  • Why do donors abandon our donation page so often?
  • Why are registrants abandoning the second page of event registration form?

Always tough questions. Now, it’s easier than ever to test your designs because some pretty spectacular online tools have come to our rescue. However, many are left on the shelf by nonprofit designers who simply don’t have the bandwidth for investigating new tools.

To that end, I’ve done some research crunching to boil the landscape down into a handful of  tools worth the time of any nonprofit designer. My criteria for each “must have” recommendation:

  1. Each tool must be free (or almost free) for nonprofits with lean budgets
  2. Each tool must be relatively easy set-up and learning curve
  3. Each tool must deliver a big bang-for-the-buck (your time investment is still money, no?)

Ready for some Christmas, fellow designers? Drum roll…

#1 UsabilityHub

Are you a one-person design team? Usability Hub is made for you, unsung hero. You can bounce any designs off other unbiased designers just as easily as grabbing someone down the hall. Just upload one or more screenshots and get solid feedback in minutes. You can even link multiple mocks together for lightning usability tests with light surveys. Blackbaud designers have been using UsabilityHub for years like my dad using WD40.

Design questions UsabilityHub answers:

  1. How do I choose between multiple designs I love (e.g., quick, subjective feedback)?
  2. How can I steer my “design committee” away from a “more cowbell” design idea?
  3. Will donors understand how to do specific tasks with my mocks (e.g., purchase a membership, set up a recurring donation, become a company sponsor)?

Cost: Free for first 20 tests and then you earn “karma points” for additional tests by testing other people’s designs (which is actually very addictive). Nonprofits also get 50% off paid plans!

#2 Inspectlet

Remotely recorded session: a donor (me) using Blackbaud Online Express.

Remotely recorded session: a donor (me) using Blackbaud Online Express.

Now here’s a piece of science fiction. Imagine a tool which allowed you to watch any visitor using your website like looking over their shoulders. Inspectlet seemed too whiz-bang good to be true, but with a small embed script you can record and playback anyone using your website. It’s more fun than cat videos.

Questions Inspectlet answers:

  1. How can I monitor if my website is easy to use?
  2. How can I observe when visitors abandon a page or form?
  3. How can I capture where my website can be improved without doing surveys or interviews?
  4. How can I learn where visitors struggle donating or registering for an event?

Gotchas: Use care not to accidentally record sensitive data on your website.

Costs: Free plan allows for up to 100 recordings per month with 15% discounts off paid plans for nonprofits.

#3 Crazy Egg

Sometimes Google Analytics just doesn’t tell you the whole story. Do you want to know exactly where visitors are clicking? Hello, Crazy Egg. After dropping a small embed script on your site, you’ll instantly get some awesome data visualizations like:

  • Clickmaps of where visitors click on your homepage
  • Heatmaps of what content is most clickable throughout your site
  • Scrollmaps of how far visitors look “below the fold” on any page

Crazy Egg is simply a gift for anyone doing significant web/interactive design.

Questions Crazy Egg answers:

  1. What content is most popular on my homepage?
  2. Where do users most frequently click on any webpage in my site?
  3. How far down the page do they scroll?

Cost: Crazy Egg generously gave us a 90 day free trial for nonprofits! Plans start at $9 for 10K monthly clicks thereafter.

Other honorable mentions

As mentioned, there’s a whole host of other compelling tools on the web. Here’s some worth mentioning.

  1. Google Analytics: Goes without saying, but saying it anyway. Your research into your online donors behavior usually starts here.
  2. Form Analytics by MouseStats: Learn which fields on your donation or registration forms cause friction, hesitations, and abandonments.
  3. Optimizely: Which call-to-action is better: “We need your support” or “Make a difference today”? Optimizely makes A/B content testing on your live website surprising easy.

Good luck testing your designs! And comment below if you want to share your favorite tools with your peers!


Brandon Granger curates @Design_for_Good and is a Senior Interaction Designer at Blackbaud for Luminate Online, Online Express, MobilePay, and other products. Brandon has been crafting user experiences for the web and mobile apps for nonprofits for 15+ years. He has a passion for user research, usability testing, high-fidelity prototyping, responsive design, mobile design, and web accessibility. Brandon graduated from the University of North Texas with an undergraduate degree in Film Studies. You can follow him at @bkgranger.

Leave a Reply

Your email address will not be published. Required fields are marked *