Donation forms. For many people they are the first interaction with an organization and, as Brenda discussed in the last UX blog (and what our moms have known forever), first impressions are important. A person hears about a cause from their friends, family, or neighbors and they become inspired to separate themselves with their hard-earned money to give to that cause. Most of the time, the way they are going to do that is through a donation form and if you aren’t using some online best practices, that person is going to have a bad user experience which leads to hesitation in future interaction. So let’s make sure people have such a good user experience that they inspire them to come back for more and possibly inspire others to contribute!

One key to breaking out of the shell of standard donation forms is with APIs. APIs can sometimes be viewed as problematic, but if you get to know them, they can be a very charming prince.

Charming Prince

What is an API?  

A very good question that actually has a very simple answer: a magic genie. API stands for Application Program Interface and allows an application to interface with a program. Application for us means the donation form and program means the server or database the donation form “talks” to. It’s like a gate that allows information or data to pass back and forth. An API Call is like knocking on that gate to get the information or data requested. So, with an API, we can break out of the default, built-in setup of a donation form and basically rebuild it with customizations that will communicate with the server.

UX monkey

Why an API?

An even better question, but it doesn’t quite have as simple of an answer. But don’t be afraid! You’re about to be exposed to a whole new world of opportunity! The big focus of “why” is customization and control, but here are some interesting things to consider when you use an API:

1 – Design
With default donation forms you can make improvements and updates to your styles, but you are limited in how far you can take them. Sometimes you are stuck using the same layout or process. Using an API donation form, you have total control over your design to create the best user experience from start to finish.

Sometimes it’s better said with examples, so here are a few from our past work with National Parkinson Foundation:

  • Tabs for different giving options to highlight all the ways you can give to your organization;
  • Show/hide elements based on interaction to not overwhelm your donor with too many questions;
  • Allow for supporters to find friends and family involved in events;
  • Custom text and/or imagery connected with donation levels;
  • No more radio buttons! Everything is easy to see, tap and responsive to any device.

2 – Functionality
With default donation forms, you are limited to the features that are built-in, but with API donation forms, you can add and create features not found on other donation forms. From custom fields to custom features based on a supporter’s history with you, the sky is the limit!

Some other great examples:

UX Jafar

Ready to Ride?

Before you take your magic carpet ride, Jafar has some things he wants you to keep in mind and contemplate before taking off and going API. It’s definitely not for the faint of heart. There is a lot of coding, strategy and design that has to happen before having the (donation) ride of your life!

1 – Time
APIs do require more time to be built for a few reasons. You’ll want to take the time to strategize what the most important needs are for the donation form and, more importantly, what is not needed. Design is necessary to flesh out your strategy and create the best user experience by having a clean and streamlined user interface. Then, since we are essentially rebuilding the code for a donation form from the ground up using API calls, a good amount of time is needed for development of the new form.

2 – Updates
Since the API form is a custom build, updates to the form does require changing the code, which can be a little unsafe if you’re not familiar with the setup. However, hidden guides can be implemented into the code to show where an update should be made. Components (reusables) can be built in if a section of copy needs to be changed on a regular basis and you don’t want to deal with reading code. Warning: There is no WYSIWYG usage when updating an API! (No matter how hard you wish for it.)

3 – Replication
With API donation forms there are essentially two forms. Your default, built-in donation form that acts like a ghost, or shadow. This is where you have your basic setup (donation levels, data fields and autoresponder emails). Your second form is your new content page that contains the new, custom API donation form code. Because of this, replicating a form would need to be done in two places: you would copy the ghost form as well as your content code page. Once duplication has occurred, you have to take care and update all IDs from the new ghost form. Whoever is building your custom form should always supply documentation as to how to create a new form. They have also hopefully put in hidden guides in the code to make the replication process a bit easier for you too.

4 – Support

Although API interface issues are supported by the owner of the API (like Blackbaud), the code of the custom API donation form is not. You will need to have someone on staff (or a partner) that can understand the set up, the code and feel comfortable tweaking and editing as needed. Magic tip: Make sure you never hot edit that code set. Always make a copy of your page so you can revert back if you make a mistake! Don’t be like Jafar and destroy all the hard work you’ve done!

Magic UX

Off Into the Sunset

It’s important to weight the pros and cons before taking that magic carpet ride to your whole new API world. It’s also important to remember that your user’s experience and first impression are on the line and the future of their interaction. It might take more time up front to start this process, but in the long run, the rewards could be bountiful and a match straight out of a fairy tale. (And you’re not going to let Jafar get in the way of your charming prince, are you?).