At Rhizome, we love doing work for non-profits, and some of the biggest things we design for are ways to increase the visibility of the donate button. While we always look for ways to make our designs unique, we prefer a consistent use of a donate button in the upper right hand corner of a page header. According to the Neilson Norman Group, “… on17% of the sites, users couldn’t find where to make a donation.”
Years ago, I read in some guide that donation buttons were most effective if they were orange and stood out. I actually followed that advice for a long time until accessibility standards became a big part of our UX design world, especially for government and non-profit sites. While a bright and bold orange is a color I adore, as you can see from my own links here (I realize the accessibility irony), it can be troublesome to work with if you’re trying to make white or black text read well against it. Chances are, the text won’t be contrast compliant.
So, I began to experiment a little bit with colors that have more contrast. Oddly enough, a deep bright pink was one of my picks because it had the ability to hold the contrast of white text well. Then, I wanted to do something a little more fun to draw extra attention to the donate button. During our last three projects for non-profits, I began to explore subtle animation techniques. I desired something that spoke to the work the non-profit does, while ensuring any animated graphic would not be annoying.
The first project I designed with this in mind was for the Washington Park Arboretum. With all the gorgeous photos of plants, I thought a single oak leaf gently flowing in the wind underneath the button might work. I masked out a leaf and took it into Adobe After Effects. On the site, it animates 3 times and then stops.
For our project with Sound Water Stewards, a community science organization, I really wanted to do something with the arms of an octopus. (We are after all, home to the Giant Red Octopus and the “Seattle Kraken.”) In this instance, I wanted the arms to feel as though they are moving through water. The donate buttons, while yellow, are offset nicely by the red octopus tentacles.
For Valley Cultural Foundation’s site, I wanted to bring the idea of the stage to life for one of the largest performing arts organizations in Southern California. The change of colors animates between the lights to create a theatrical effect. Subtle, but effective.
Do I have concrete evidence that this will raise donations by “X” percentage for each non-profit? Not completely, but I do know we have seen a greater increase in donations for these groups. Some of that may be attributed to each group’s efforts to fundraise, but some of that may be because people can figure out where to find the donate button easily.
So if you’re a UX or UI designer, I’d say while placement of a strategic donate button is paramount, don’t forget to have a little fun with that area. It might just entice someone to give to their favorite cause or organization.
Jen Pennington is the founder and creative director for The Rhizome Collaborative. She is a certified UX designer with over 20 years of experience designing for the web and other mediums.