DonorPerfect Forms Builder App

Drag-n-Drop Form Builder

DonorPerfect Forms is an online donation form product that I have worked on as a lead product designer since late 2018. The purpose of the project was to replace our aging online forms product and provide our customers with a better, more modern solution to online fundraising. From the very beginning of the project, the UX team focused heavily on ensuring we were making something easy for our users to create, edit, and track their online fundraising efforts.

Problem Statement:

Non-profits want to quickly build a branded online donation form to solicit donations online.

Problem Diagnosis:

One thing I knew for sure from our survey data was that users found our existing online donation form product to be very hard to use, customize, and manage.

“It would be nice to have a little more flexibility in forms. They are very limiting.”

“Greater flexibility for fundraising forms. Ideally, we'd like to be able to control it as well as platforms designed for, well, making forms, like Jotform.”

“I was disappointed and pretty upset when we couldn't personalize our online forms as much as I believed we could when we purchased the product.”

“A way to not have as many duplicates occur when integrating the online giving forms.”

Results of Problem Diagnosis:

From my research, I was able to understand more of what our users were expecting from an online fundraising product. The top request we saw was around making the form building process easy while still allowing for a good amount of personalization and customization.

With our existing product users often had to call our support department to help them customize the look and feel of their donation forms. Because of the frustrating building experience users often purchase a premium service that would provide them one-on-one support to brand and customize their donation form to meet their needs. We observed that much of the frustration that caused users to want to pay for additional service was because they were often making changes behind a few layers of UI with no way to actually see a live preview of their work.

The bulk of the quotes in the last section of this post focus a lot on the overall form building experience. We learned that users want a good amount of flexibility, but at the same time don't want the application to be cumbersome and hard to use. This led us to start discussing as development team the possibility of creating a WYSIWYG drag-n-drop form building experience.

Since branding/theming was brought up often in survey data we decided to look into taking a different approach with this new product. During our user interviews we learned that the majority of our clients have a very simple color system generally consisting of two brand colors. Over the course of these interviews users also talked about how annoying it was to have to set a color to each form component individually (think radio buttons and checkboxes). Since this process was tedious and time consuming, users mentioned that they often just duplicated existing forms rather than starting from a blank state.

Simple Form Style Approach

Applying the diagnosis:

From our countless user feedback sessions as well as some competitive analysis the UX team was able to successfully pitch the idea of a drag-n-drop form builder. We believed that building this would solve some of the core issues and frustrations we have heard for years from users of our existing product WebLink.

In WebLink users would often have to "Apply" and then "Preview" in order to see the results of their work. No matter how much functionality we added to the product there was no way to fix the core usability issue without some kind of rewrite of the app.

After about a year of building the drag-n-drop builder with a small development team we finally had something we could demo to clients to get some feedback on.

The initial feedback from those initial client demos were shockingly positive.

“This is really cool, can we have this now?!”

“As someone who refuses to use WebLink, when can we get access to this?”

This feedback to me showed that clients were in desperate need of something better than what they were using now. While these demos were pretty limited in functionality and rough around the edges, users seemed to be so impressed with what we showed that they were chomping at the bit to use it in very rough alpha state.

Results:

Live Preview of Form Customizations

We launched a beta version of our new drag-n-drop form builder in late 2020. While clients seem enthused by the new modern UI and form building experience some were pointing to specific functionality that was missing as a hurdle to adopting it.

"I like this beta form. Much easier to manage and the user experience is MUCH better"

"I just made a donation using the new beta donation form I created. Yes, it's easy with drag and drop but it doesn't allow all items that the existing donation form in our online forms can do."

"The drag and drop feature is long over due."

"First-time use of the Beta form. Slick and easy design. Quite an advancement and much more friendly interface."

We would love to give this a try but our organization relies heavily on tribute donations and this product doesn't support that. Once that's added please reach out to us!

During 2020 we worked with users on defining a priority list of features that would allow even more non-profits to try out our new donation forms product. You can see some screenshots of some of those features on my projects page.