Feature Spec: Donation UI Workflow - Pixanthropy/pixanthropy-web GitHub Wiki

#Overview ##Problem The current work flow for donations has been confusing users when a purchase is required. On multiple occasions, we've see users attempting to make a donation skip the actual donation because they thought the donation was complete after checkout.

##Objective Simplify the workflow of the donation process in order to achieve the following objectives:

  1. The donation process is completed after the checkout; users are not forced to first make the purchase and then return to the memento to make the donation.
  2. Users are not limited to make a donation within the means of their current balance.

#Workflow ##Step 1: Set donation amount ("Make a Donation")

  • Memento image
  • Recipient organization name, "100% of this donation goes to {organizationName}"
  • Show account balance
    • If donation amount > balance, add "Add Funds & Checkout" to breadcrumb path
  • Donation amount controls
    • Textbox (styled similar to the purchasing controls UI)
    • Slider?

##Step 2: Show transaction details ("Review")

  • Current donation - editable control which is bound to the same donation value as in step 1. Label "Donation to {organizationName}: [input({donationAmount})]"
  • Additional funds - editable control which will enable users to add additional funds to their account over the donation amount. NOTE: These controls should be hidden if no credit card transaction is required (if user has enough funds in their account to cover the donation). When a credit card transaction is required, display the following text--Clicking this text should display the Additional Funds controls:

To enjoy the habit of giving without the fees, we recommend you add additional funds to your account.

  • Fees - credit card processing fees
  • Total amount to be charged
  • New balance - "Your new balance will be ${balance}."

##Step 3: Capture funds If user has enough funds:

  • Button text: "Complete Donation"
  • Update global user balance
  • Submit donation and close modal; No additional steps or feedback required.

If user needs additional funds:

  • Credit Card selection / entry
  • Button text: "Checkout & Complete Donation"
  • Update user balance in navigation menu

##Step 4: Show confirmation

  • "Thank you for your donation. Your funds have been received."
  • Amount donated to {orgName}
  • New account balance
  • Amount charged