wearekickback / app

Front-end app for Kickback
MIT License
43 stars 48 forks source link

Improve onboarding flow for first time user to crypto #325

Open makoto opened 4 years ago

makoto commented 4 years ago

Current RSVP flow

Screenshot 2020-03-20 at 11 48 15

Feedback of current sign in/ RSVP issues.

Proposal for the new flow.

Low fidelity wireframe (clickable, scroll down on the modal to see more buttons).

https://mystifying-joliot-5254b7.netlify.com/

Step1: RSVP button

Step2: Connect to a wallet

Step3: Create an account on Kickback

(scroll down to click "Create account")

Step4: Add funds

-- Check if user has gas to pay -- Check if user has token to RSVP -- If ENS reverse record is set, suggest to send fund to ENS name

Step5: RSVP

ryanio commented 4 years ago

Hey, new flow is looking great!

What did you think of our suggestion we came up together to aim for an email-only registration flow? In contrast to losing a large drop off through a general "Create account" flow. I could see it going something like this...

  1. Click RSVP button
  2. Ask user if they already have an Ethereum wallet
    1. If they do, sign a message (e.g. MetaMask popup) to fully log them into Kickback.
    2. If user indicates they do not have a wallet, skip to Step 5.
  3. If have an internal email on file for that Ethereum address, can automatically log them in and continue rest of RSVP flow.
  4. If wallet is not associated to any internal Kickback user, ask for their email to save alongside their account (make it clear why you want their email: reminders, updates from event hosts, toggle to share attendance/identity with other eventgoers, etc. and restate your privacy policy)
  5. If the user did not have an Ethereum wallet at all, here is where you can simply ask for their email (1 field form and submit button!) to get them in an onboarding campaign drip email flow to 1) explain the steps to set up an Ethereum wallet and 2) ensure they finish all the required steps to fully complete a RSVP for the event they were interested in.
TomAFrench commented 4 years ago

I wouldn't mind having a whack at this but it would be sometime in May.

TomAFrench commented 4 years ago

As withdrawal ui elements will likely be changed to match this style, just adding a reminder to add a check to prevent people trying to withdraw from a cleared contract.

makoto commented 4 years ago

Hi, @ryanio thank you for your feedback. Didn't have github notification so missed by now.

I did discuss email sign in similar to what multis.io does with @jefflau and we thought it would require some big change on backend and we currently lack backend resource.

If I understand correctly, are you searching eth address based on email address the user is given? I wonder if that allows malicious users to add the random email addresses of others to find out which email is tied into which Ethereum address, leading to leaking privacy information. To mitigate that, the common approach is to send confirmation email but that leads to more work on backend which we want to avoid right now.

ryanio commented 4 years ago

@makoto No problem, yes I totally understand constraints around backend architecture/refactoring, was just my ideal UX suggestion from the perspective of a new user.

If I understand correctly, are you searching eth address based on email address the user is given?

No, eth address first (authenticated by signing a message) then see if an email is associated to the eth address. If no email record exists for the eth address, ask for one to associate.