by TJ Cook - Mar 12

As detailed in last week's post, the first in our Drupal + CiviCRM series, we showed how in Drupal and CiviCRM we have two of the most powerful free open source software packages available to nonprofits. With an astonishing feature set right out of the box, both tools give almost infinite power to those who develop websites and systems with them--for FREE. Be sure to poke around their websites first and bop back here to read on if you're unfamiliar with either tool.
In this post we're taking a look at what CiviCRM is like from a participant's perspective--those folks donating, volunteering, or otherwise getting involved with an organization's cause. Toward this end I'm going to introduce you to a persona called Ned. Then I'm going to review the good and bad parts of Ned's hypothetical experience with CiviCRM's donation and event registration experiences (CiviContribute and CiviEvent). Finally, these findings will help my fellow HiDeffers, Azin and Brian, make the default experiences with these components the best experience they can be. It's our way of contributing back to the community.
With no further adieu, let's meet the man of the hour, Ned.
Meet Ned, a Donor and Volunteer
Ned is in his late thirties, passionate about life, his wife, and his two kids. He's patient and moderately savvy surfing the web. Though he has held a variety of jobs and hasn't quite found one career path to stick with, he does currently enjoy his position at a para-government organization that helps educate folks on low-income housing programs. He believes firmly that one should give back to the community, and for this reason he's interested about an organization that operates in his city providing city-wide after school programs to keep kids out of trouble in the "gap" period of each day when school is out but parents aren't home from work. Reading about this organization, he recalled when his daughter was 13 and he and his wife worried about those two and a half hours while they were both still at work. He wants to get involved.
Ned Contributes with CiviContribute
Ned reaches the website of the after school program looking first to contribute to the nonprofit. He wants to put his money where his mouth is with a monthly donation.
Rather than step through Ned's experience screen by screen (you may do so by trying out the demo site), I'd like to instead highlight the three best and worst parts of his hypothetical experience.
The Good Parts
Out of the box, CiviContribute was a straightforward experience for Ned.
1. Single-page contribution form
Ned always hates it when sign-ups and workflows string on for pages and pages, and he likes to see everything he needs to do in one screen. It's simpler.
Single-page contribution form
2. Clear-cut confirmation screen
No frills, no questions: he can see exactly what he put on the previous page and make changes if he wants.
Clear-cut confirmation screen
3. Simple Thank You page
When Ned completed his donation, he got a nice warm feeling when he reached the Thank You page and saw a note from the president of the organization thanking him for his donation to that school's program.
The Bad Parts
Ned's experience wasn't quite perfect. A few things in particular raised his ire.
1. A confusing recurring donation setup
When Ned decided to make his donation recurring, he had to work through the syntax and do some math to fill out this field
A confusing recurring donation setup
2. A strange error message
Ned had no idea what this meant, other than that his donation couldn't proceed and, apparently, he couldn't do anything about it. In the end, he opted to try a different credit card, and that worked. He only wishes that if there was a problem with his type of credit card, he would've been told earlier or not had the option to choose it at all.
A strange error message
3. Odd-looking buttons
Ned's no designer or anything, but in the back of his mind he did note that the use of "<<" and ">>" in buttons seemed to lack a little polish. There was one point when he would have appreciated more visual distinction between the "proceed" action button and the "go back" action button.
Odd-looking buttons
Overall, Ned had an OK contribution experience. He started a recurring donation without any major hangups other than that strange error. Not a bad experience for a free, out-of-the-box donation module!
Ned Registers with CiviEvent
Ned goes back to the main site of the organization and sees that he can also get involved by attending an orientation session for one of the after school programs. His interest is piqued (he took drama classes in high school and has missed it ever since), so he clicks.
How's Ned's experience with this relatively simple CiviEvent workflow?
The Good Parts
Volunteering was almost a piece of cake.
1. All essential information included
Right there on the event's page he got a description of the meeting, the Who What When Where, and even a map where it was to be held. Sure, it didn't look too pretty, but it got the job done.
All essential information included
2. Two-step registration!
Ned was done registering in just three clicks. One to get to the information page, another to click "Register," and another after filling out necessary details.
3. Ability to Tell a Friend
Ned did indeed have a couple of friends he thought would enjoy volunteering as well, so with a couple clicks he invited them. Too bad it only had room for three friends, though!
Ability to Tell a Friend
The Bad Parts
There were a few head-scratchers for ol' Ned, though.
1. Not sure where to click on the first screen
As it turns out, Ned just needed to click "Register Now" at the bottom of all the content. He was expecting a big button, so it took him a few seconds to search for and find the link to register
Not sure where to click on the first screen
2. Lack of communication
When Ned clicked "Register Now," he was expecting some text on the next screen saying something like, "To secure your registration, simply fill in your email address and click Continue. That's it!" It was a bit jarring clicking "Register Now" to arrive at a very bare page with a single email address field to fill out. He takes a leap of faith, puts in email, and clicks "Continue", not exactly sure what's going to happen next.
Lack of communication
3. A surprising end
When Ned clicked "Register Now," he arrived at a screen that asked only for his email address. This by itself was a little jarring--usually people are asked for more information. Nevertheless, what was really surprising was that when he clicked "Continue," the next screen wasn't to confirm details but to thank him for registering. He was expecting, as when he made his contribution, that he would get to see the info he'd entered and then confirm his registration.
A surprising end
Ned also noticed that his event didn't let him change his registration information if he needed to; he'd have to email the organization. He thought about how this could really be bad for large events, causing lots of needless work to be done on an admin's side instead of allowing people to make changes through a web interface.
Conclusion and Challenge
Sometimes it's hard for end users like Ned to explain why they feel the way they do about a web experience. Ned's experience was "OK." What kept his experience from being great? Joining an organization should be a exciting yet dignified experience. How can we deliver the best cause-joining experience to Ned and everyone else who uses CiviCRM--right out of the box? For Ned, he felt a general lack of connection with the web page elements with which he was interacting. He sometimes felt left hanging and wanted to have more context regarding what was happening.
In one way CiviCRM (especially when packaged with Drupal) is meant to come as a package that we web developers install and then configure as needed for each client. But in another way, CiviCRM has gained so much traction for smaller nonprofits who don't have a budget to "configure as needed," that we can make things a bit easier for everyone by imagining a default experience right out of the box that people could feel confident deploying to their end users right away.
To this end I've challenged Azin, HiDef's Creative Director, and Brian, HiDef's Senior Designer, to come up with mockups for new 'default' experiences with these two CiviCRM modules. I took a peak so far and I'm excited, so stay tuned to their posts. Better yet, follow us on Twitter (@hidef) or grab our RSS feed to stay in the loop.
The Discussion is Alive
Constantly improving usability for CiviCRM is always on the minds of its developers:
Don't miss this great post on civicrm.org that links to an important technology survey that included more than 1,000 nonprofits:

Comments
Post new comment