Review membership/join flow to integrate one time donations

[aiscarvalho]

We reviewed the membership flow to integrate one time donations and update the steps in the process of setting up a member account.

We have a few alternative layouts for the first step, where the user can pick a recurring contribution or one time donation, and the amount.

Slide 1 all options together -- one time/monthly/annual -- and visible numeric input for a custom amount

Slide 1 all options together -- one time/monthly/annual -- and hidden numeric input for a custom amount

Slide 1 split layout: recurring contribution on top, one time donation on the bottom

Once the amount and recurrence is picked, slide 2 will present the payment method:

In the one time donors flow: slide 3 will show the payment details followed by a thank you message:

In the member flow, slide 3 will display the account setup:

Members will then see the thank you message and/or post join survey:

Design spec on penpot

[wpf500]

I think the layout changes are fine, I prefer the big buttons (screenshots 1 and 2) to the buttons with text underneath them.

However I don't think this follows data requirements we have in the flow diagram:

• Email should be in step 2
• Payment details should be in step 3. The payment method is in step 2, as we need to know that first to know what payment details to collect, e.g. credit card number, bank account number, etc.
• The step with the passwords etc. sits after a confirm email message, so aren't really part of the join form steps. Or is it your intention that when someone confirms their email they will be taken back to the 3rd step of the join form?
• We don't have the functionality to generate invoices, this option should be removed

[TobiasHauswurz]

I personally prefer the version with the one-time-option underneath. Wondering some things:

• How does this work on mobile? Will the logo and text on the left just move to the top?
• What happens when someone made the payment, but did not set up his account? e.g. if he just leaves the form before setting the password? I guess the payment will be collected anyway, because it's handled via Stripe.
• How can this work for projects that don't use the payment, but need a login/registration form?

[aiscarvalho]

Thanks for the quick feedback! We'll put together a step 1 with the large buttons, as Will indicated, and the one time donation option below, as Tobias suggested.

@wpf500 while working on the variations we missed the correct information in each step (switching the email to step 3 and including all payment in step 2). We'll fix this and include the email confirmation in the flow.

@TobiasHauswurz :

• we'll include the mobile version in the next iteration of the spec
• we're fixing the information in each step, the payment will only happen in step 3 and we'll then ask the user if she would like to setup an account with the email she provided in step 2
• do you mean, no payment at all or optional payment? in the case of optional payment we can include a link at the bottom of step one for "Register without a contribution"; in the case of no payment at all, we need a different form as this one makes no sense in that context. We can design a form for this too.

[TobiasHauswurz]

@aiscarvalho I mean no payment at all.

[aiscarvalho]

We split the previous spec for ease of understanding:

• one time contribution flow
• recurring contributions flow
• alternative layouts: mobile, with the amount goal thermometer, join screen without contributions

We decided to always use the word contribution, for both recurring contributions and one time contributions (dropping the word donation). In the recurring contributions flow we designed only slides 1, 2 and 3. The following would be the same as shown in one time contribution flow with member account creation.

Below are some screenshots of the reviewed and extended spec; for the full flows see the penpot links above :)

Redesigned recurring contributions screen with the link to a one time contribution

One time contribution with the thermometer goal and link to switch to recurring contributions

Member signup without contribution

Mobile layout: slide one and alternative layout with 3 suggested amounts and goals' thermometer

[aiscarvalho]

@TobiasHauswurz we updated the spec to include the tax information.

Here's how we could display it in each of the steps:

Do you think this works well?

We'll tackle the admin parts (membership builder interface) afterwards but here's a quick mockup of what we had discuss this morning:

[wpf500]

Looks simple enough :). A few comments:

• I find it a bit strange that the UI is inconsistent between steps 2 and 3, why is the sales tax text inside the box in step 2 but outside of it in step 3?
• Admins should only be able to set the tax rate (e.g. 9%) rather than the whole string. We will provide standard text (e.g. "{rate}% VAT included").
• "Include legal tax disclaimer" should really just say "Include sales tax"

[aiscarvalho]

@wpf500 I've just updated my comment to fix the screenshot of step 2. I uploaded a previous design and didn't notice. Thank you for pointing the UI inconsistency.

We'll update the admin interface with the changes you suggested!

[TobiasHauswurz]

@aiscarvalho nothing to add to Will's comment. Looks good to me :)