Improve the UI flow for the donation process

[joshsmith]

Problem

Edit:

Based on comment below:

What we want to enable here is a flow that looks like:

• Click "Donate"
• If not logged in, redirect you to a page that includes the donation header, the amount and a sign up page with a sign in link
• Once signed up, continues on to the rest of the form, setting a state of donating and maybe the project that you were donating to
• The header/footer should be put into a reduced state; the only way you can navigate out is by clicking terms of service / privacy policy (which should never redirect, actually), or by clicking the logo
• If you try to navigate elsewhere, it will redirect you to the rest of the signup flow, but allow you to go back to the donate page
• If you finish donating, you will be redirect to the rest of the signup flow after the thank you page, maybe with a finish signing up button in the header, and some different copy on that page based on your user state

Original issue text:

We should discuss these ideas presented by @rlueder and break out and prioritize these into tasks:

1. Sign Up should be the default option for an anonymous user (with Sign In as an option on the page itself and not just main nav "already registered? Sign In to donate");

2. if a user had previously decided to donate by clicking on "Become a Donor" and then choosing a specific dollar amount it'd be nice to take them directly to the "Payment" page (formerly "Add a Card") with that amount already selected ($xx given each month) so they don't have to repeat the steps after signing up;

3. allow users to donate without signing up, ask for an email with payment information and send them into selecting interests, expertise and skills only after they've already donated (direct Sign Up flow is not affected)

[rlueder]

Expanding on number three above since it seems to be quite a big change.

The thinking behind the suggestion is that at the moment there seems to be quite a lot happening before a donation can actually happen (all the steps that are part of signing up).

The assumption for the current flow seems to be that anyone donating will also want to join the project but that might not always be the case.

The approach is similar to what e-commerce websites do with "guest checkout", allowing users to make a purchase without having to create an account and only at the end offering them an option to save their details and add any other missing info (in our case that'd be photo, name, interests, expertise, skills).

[joshsmith]

@rlueder yep, totally buy into the vision behind this. It will definitely require some architecture work but think it is ultimately worth doing.

How we handle the finite state machine behind signup will be hard to work out but not impossible. I want to support this, because ultimately I do think that it's critical to get them through that flow, but then to get them right into a "contributing time and talent" mindset if they've given dollars.

The reverse will happen more often (give time, then give money), I think. But we should be prepared to explore the opposite path. We're not just after developers here, after all. We're playing a long game of getting people to envision the possibilities of working towards common interests without immediate – or any – financial reward.

[joshsmith]

What we want to enable here is a flow that looks like:

• Click "Donate"
• If not logged in, redirect you to a page that includes the donation header, the amount and a sign up page with a sign in link
• Once signed up, continues on to the rest of the form, setting a state of donating and maybe the project that you were donating to
• The header/footer should be put into a reduced state; the only way you can navigate out is by clicking terms of service / privacy policy (which should never redirect, actually), or by clicking the logo
• If you try to navigate elsewhere, it will redirect you to the rest of the signup flow, but allow you to go back to the donate page
• If you finish donating, you will be redirect to the rest of the signup flow after the thank you page, maybe with a finish signing up button in the header, and some different copy on that page based on your user state

[marie-codes]

@joshsmith

I really like your idea, and glad to join your community.

Quick thoughts while taking a look at the UI flow notes on git - Is the idea that you want to encourage the user to sign-up to donate? If that's the case, what are the intended advantages from both the user and CodeCorps point of view of them creating a profile as opposed to a simply being able to donate?

[joshsmith]

@marie-codes the user's point of view on this is predominate, as we want to be able to let them know where their money is going. Similarly, for projects, we want to encourage people to come back. Single point-in-time crowdfunding is useful for some things, but most things require long-term financial support.

From our point of view, we need to be able to cut down on possible fraud, and a way to provide support, which requires us having some way to maintain account information.