blackbaud-logo.png

Designing a donation entry form for nonprofits

At Blackbaud, I worked on a product called eTapestry, which allowed small to medium size nonprofits manage donations, online forms, donor information, reporting, and more. Entering donations and pledges may seem like a simple task at first, but there are many different types of donations and pledges that need to be entered and tracked in different ways.

These complexities gave us a big challenge in improving the design of the existing donation entry form, which looked like this:

 This form was problematic in various ways. It was difficult to scan. Required fields were hidden in an accordion. Field names were confusing. We could only go up from here. 

This form was problematic in various ways. It was difficult to scan. Required fields were hidden in an accordion. Field names were confusing. We could only go up from here. 

This project first involved re-evaluating the navigation structure and information architecture of the product, to make sure customers could easily jump into the donation entry process in a way that made sense to them.

My contributions included:

Card Sort

I worked with another UX Designer to creat and administer a card sorting activity to understand customers’ mental models of how product features should be grouped together and structured.

 I always test research studies on internal stakeholders before conducting them with real customers. Here are a few colleagues performing the card sort in the office. 

I always test research studies on internal stakeholders before conducting them with real customers. Here are a few colleagues performing the card sort in the office. 

Contextual Inquiry

Our product team visited customers in their offices, observed them entering donations into the existing product, and asked questions along the way to better understand their needs and frustrations.

 

UX/UI Design

I collaborated with other UX designers, developers, and product managers to explore various ways to improve the donation form.

 One of the challenges we faced was designing for a variety of complexities and proficiencies, from novice users entering simple donations, to power users entering detailed pledge schedules. I sketched to visualize all of the types of users and scenarios we needed to account for. 

One of the challenges we faced was designing for a variety of complexities and proficiencies, from novice users entering simple donations, to power users entering detailed pledge schedules. I sketched to visualize all of the types of users and scenarios we needed to account for. 

Continuing the exploration from the previous sketch, I made a list of all of the fields that needed to be present in the form, and ideated on ways the fields might be presented or accessed. 

 

I then sketched and paper prototyped to explore many different concepts.

Sketching ideas for the form UI helped to quickly validate workflow ideas without yet focusing on visual design. 

Here is a video of my first dry run of a paper prototype with my coworker (pardon the video quality): 

 

Testing the paper prototype helped identify parts of the design that were difficult to understand. After analyzing what I learned from the paper prototype, I created an interactive digital prototype for usability testing.

This is a prototype of the redesigned form. I designed it with a focus on a quick and easy workflow, contextual help, and only showing fields that were relevant to the type of donation or pledge being entered.

Usability Testing

Our team took the prototype back to the customers who participated in the contextual inquiry sessions and had them interact with the prototype. From there I was able to see where the prototype was successful and where it needed improvement. The prototype tested well, with a few minor improvements to be made.