revamp checkout flow

[chadwhitacre]

The idea with this ticket is to produce a modal checkout flow that can be used on both gittip.com profiles as well as embedded w/ a "Donate" button on other websites.

Some assets for this are over here: https://layervault.com/jeromegn/Gittip/Widget/tipping.sketch

@jeromegn built the one below for Clarity.fm (visible live on www.danmartell.com, "Schedule a Call" on the sidebar). See #737 for another example and more of the motivation behind this ticket. This should be hosted on gttp.co and work will go in that repo, but please keep tickets in here.

There is a $1,000 open bounty on this issue. Add to the bounty at Bountysource.

[chadwhitacre]

Dropped out of IRC, here's what I dropped:

[jeromegn]

And this is what we were talking about:

[jeromegn]

Progress after getting some feedback... I like that much better (lots of small tweaks of my own too.)

Don't mind the blurry icons, those will be fixed once coded.

[jeromegn]

Thinking there should be an animation for the modal... something from here: http://tympanus.net/Development/ModalWindowEffects/

I like Fall, Super Scaled and 3D Sign.

[bruceadams]

@jeromegn that looks great!

[chadwhitacre]

@jeromegn I prefer Super Scaled and then Fall. Whichever we chose, can we make sure that all three of these close the modal:

• <ESC> (I notice that this doesn't work on http://tympanus.net/Development/ModalWindowEffects/)
• clicking [ X ] UI element
• clicking outside the modal

Also, let's make sure that it's impossible to scroll the underlying page while the modal is up, please. Thank you. :-)

[jeromegn]

@whit537 Sure thing. The overlay will cover the page and will be fixed positioned 100% x 100%. Shouldn't be able to scroll on there.

[chadwhitacre]

@jeromegn I noticed on http://www.danmartell.com/ that there was a scrolling area in the modal and if I scrolled past the bottom of it the underlying page would scroll. That's something I'll be looking for in QA for this issue.

[chadwhitacre]

@jeromegn Namely, under "How does it work?" on the http://www.danmartell.com/ modal.

[chadwhitacre]

https://layervault.com/jeromegn/Gittip/Widget/tipping.sketch/21

My feedback in IRC was that:

• We should have a hierarchy to the login methods. Twitter (with 500 million users, compared to 3 million for GitHub) should be emphasized, along with Facebook once we have that. All other login methods should be significantly deemphasized.
• We should have additional explanatory text on Step 2. Gittip is social. It's not like signing up for PayPal. We need to set expectations around that to avoid confusion and bad surprises.

[chadwhitacre]

For explanatory text in step 2, maybe something like: "whit537 is on Gittip, a social giving platform. Create a Gittip account using one of the identity providers below to give to whit537."

[chadwhitacre]

@jeromegn For the about panel:

• Gittip lets you give money every week to people and teams that inspire you.
• Gittip is no-strings-attached. You'll be anonymous to ${whit537}.
• Gittip is social. By default, we share your total giving.
• Gittip doesn't take a cut. Gittip is funded on Gittip.

Inline after "We share your total giving" we should have a checkbox for "Don't share my total giving."

[chadwhitacre]

+1 from @jakubsuchy on Twitter.

[jakubsuchy]

Nice design. The left icons are not clear in meaning though - they are in fact steps, can you make them so? Just include 1. 2. 3. in them

[chadwhitacre]

Good call, @jakubsuchy.

[mvdkleijn]

Blurring the background would be another nice indicator that the modal window is taking over.

[chadwhitacre]

+1 from @traverseda over on #1657.

[chadwhitacre]

+1 from @kennethreitz via Hangout:

https://gumroad.com/overlay

[chadwhitacre]

Dropping back to ★★☆ while we clear out actual bugs on ★★★.

[chadwhitacre]

+1 from @elliottw at #3676:

Have a widget that groups can put on there site, that allows non-gratipay users to easily sign up and donate to that particular group all within their site.

I think Gratipay should be as prominent as it can without being annoying, and we can even have a button like "now go explore other projects to support!".

The current thing holding me back from moving a lot of catapultpgh members to gratipay, is that a lot of our base are not developers and I have had to spend 15 minutes onboarding people on to Gratipay to donate, which means lower donation rates not because people don't want to donate, but because they feel they it's very complex and confusing and they are signing up for some big thing when all they want to do is give catapult 10 bucks a months.

And @kzisme:

I was thinking about something like this for a stint of time. I see a lot of other companies using widgets/buttons on their Twitch streams. Many other people would be interested if these buttons were introduced and the signup process was streamlined.

And @mattbk:

I like the idea of streamlining the registration/giving process while offsite.

Would it have to wait for #1052?

[chadwhitacre]

This is an important project that needs a champion.

[elliottw]

just trying to wrap my ahead around the progress on this issue. @domenkozar looks like you'd a bunch of work. What else needs to get finished?
Do we have a functioning coded prototype?
Has everyone agreed on a user workflow?

My coworking space, @cataputlpgh would move everyone to gratipay if we can get this figured out, so I'm highly motivated!

[domenkozar]

@elliottw I wrote a prototype with no logic to talk the the backend, that's where most of the work needs to be done. If I had someone that would implement the backend logic I'm willing to implement the frontend side :)

[chadwhitacre]

!m @elliottw @domenkozar

@rohitpaulk @rorepo @kzisme Want to help with the back end on this?

[elliottw]

@whit537 just bumped the bounty to 1k!! Also sent this issue to catapult members

[chadwhitacre]

Yikes! 😲

[mattbk]

Example of an onboard widget hardcoded in another site (looks like they built it themselves?): https://www.djangoproject.com/fundraising/campaign/django-fellowship/

[kzisme]

@whit I would not be opposed, but I would like/need some guidance.

[chadwhitacre]

For comparison, here's what Catapult has right now:

https://catapultpgh.memberful.com/checkout?product=282
https://catapultpgh.memberful.com/checkout?subscription=62
https://catapultpgh.memberful.com/checkout?subscription=38

[chadwhitacre]

Suggestion is to have a little more "Powered by Gratipay" branding than the Memberful example, especially so that when we are sending Gratipay-branded emails to people it's easier to make the connection.

[chadwhitacre]

Here's the buttons on Catapult's site that go to the above:

[elliottw]

another example (from https://www.brainpickings.org):

[mattbk]

Using the community as an indicator of trust could be used in some way. Per External Revenue Service:

Recently, Walt received an email from the External Revenue Service stating that Grace had made a pledge to pay him a tax of $25 per month. He is skeptical that this was some kind of scam and wonders if Grace’s email has been hijacked (an unlikely scenario considering Grace’s technical chops), but after seeing that Grace’s portfolio also included his old pals Carl and Alice from school, he happily clicks to accept the pledge and start the ID verification process to connect his bank account for direct deposit.

[chadwhitacre]

Internet Archive using Stripe:

[chadwhitacre]

Closing in favor of gratipay/grtp.co#103.

[mattbk]

Back over here because of my comment at #4268 (comment).

I don't think this should be under gratipay/grtp.co#103, because I see grtp.co as an offsite issue (add an onboarding widget away from gratipay.com) whereas this is an onsite issue. I imagine we are more constrained when offsite? In any case, I view these as separate because they can (but don't have to) proceed independently.

[mattbk]

So I'm here at https://gratipay.com/Gratipay, ready to donate. Never been here before. How do I give? Oh, it looks like I need to sign in to give. Cool.

But I don't have an account yet, how can I sign in? Maybe there's a "create account" link behind this button (and I hope I don't get too far away from the page I'm on and wanting to give to)...oh, okay, when my mouse moves over I see that it's a menu with social media. So no "create account" link? What about this one up at the top? Same thing. Huh.

As much as social logins are used, I think they are usually accompanied by some sort of explanation: "Connect with Twitter to give;" "Sign up with Facebook;" etc.

[mattbk]

From useronboard.com (linked above):

default to "sign up" with a de-emphasized "log in" link as the alternative. This eases the path for new users in particular, and so long as you're managing cookies well, it's unlikely your existing users will see it very often. Social logins can take a lot of the pressure off, as well, since they can work for either use case.

[mattbk]

Even something like this might help:

[mattbk]