Our job was to create an exceptionally low friction donation form that would delight end-users.

Role: Project Lead, UX Designer, IxD Designer • Another designer was responsible for final iOS UI and collaborated on research

Available on: Demo site

The process

1. Gather Information
2. Research
3. Annotated Wireframes
4. Prototypes
5. Refinement
6. Final Spec and Iteration

What's the Giving Form?

The Giving Form is a feature of Faithlife Giving. It's a robust interface that captures identity and billing information from users and generates donation transactions for our Church/NGO customers.

Faithlife Giving is a SaaS product for churches and other NGOs looking to accept financial donations from organization members.

Step 1

Gather Information

This is my favorite step in the design process.

It's when I get to ask question after question of stakeholders and users, learning all of the context and constraints, eventually bringing to light the actual problems that need solving.

Considerations

• From our church customer's perspective, our product's value is tied to its adoption rate amongst their congregants. More congregants using the product means more consistent, predictable giving.
• For end-users, the front door to adoption of the entire Faithlife Giving product is the Giving Form.
• Everyone, everywhere, hates (and avoids) filling out complex web forms. Especially on mobile devices.
• Faithlife wasn't yet a trusted name in facilitating donations.

Constraints

• This experience needs to be self-contained. It will eventually need to live: inside a modal on customers' websites, on a webpage on faithlife.com, as a tab of the Faithlife mobile app, and other places we haven't thought of yet.
• ~60 Design hours to finish the #1 Priority user flow

Problems to solve

• We need to define what steps are vital to a user's first experience using the form and cut everything else out. Minimizing friction is our #1 priority.
• How do we create a highly focused experience that carries users through this multi-step process?
• How can we instill confidence in the credibility of our product? What interaction, styling, and motion design patterns could we employ?

Step 2

Research

Questions about the app itself

1. How are donation forms typically distinct, if at all, from payment forms?
2. What design patterns do other apps use to bring focus through a multi-step process?
3. What mobile apps/sites hit the tone we're aiming for?
   • Focused
   • Fluid
   • Trustworthy

I assembled a google doc to organize screenshots and gifs from a variety of finance/charity/faith-based apps for review with my co-designer. From there we discussed the research and noted patterns we thought were effective in solving our design problems.

What we learned

There's a fine line between approachable and fun and we needed to stay in approachable territory.

Competing apps repeatedly chose functionality over elegance.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d2a96fad-36ef-4ebe-9249-2c8e23f497b2/untitled

Here are some of of the apps we studied.

Questions about users

1. How do churches organize the various funds that congregants give money to? How wide is the variation in approach?
2. What mental models for assigning their dollars to funds do givers commonly have?
   1. A single gift amount (seemed like a given)
   2. Multiple small gift amounts
   3. A single number, with multiple fund allocations baked in

What we learned

The answer to question #1 turned out to be a wide variation of highly idiosyncratic systems, but with a useful common thread. Church's universally want money flowing into the "General Fund", where they can distribute it without restriction. "Restricted Giving" is empowering for the church congregants, but not ideal for churches (or other NGOs).

To answer question #2 I surveyed potential users within the company to learn what dollar amount(s) they have in their mind as they sit down to give money to churches and other non-profits.

The results of that survey affirmed our intuition, which was that users were likely to fall into #1 or #2 in the list above. This insight, backed up by InVision user testing later on in the process, was critical as it built a firm argument for the slightly counter-intuitive additive approach we took to allocating money into funds.