Idea for improving the Donation modal popup. Make it clear it's coming from the Fadblock Chrome Extension. Reduce the ambiguity of the content.

[pmeaney]

Hi Piraj,

A few minutes ago I was searching "KeystoneJS" on Youtube, and suddenly the Fadblock donation request modal popped up.

I thought "Whoa what the heck is this? Is one of my extensions hacked or something? I don't want to click any of this stuff until I figure out what this pop up is, and where it came from."

Tips for designing the information flow of the modal popup (For TLDR see the two images at bottom of this post)
At first glance, there's nothing that indicates "This is your Fadblock extension". I thought there might be some sort of hacky thing going on with an extension or my browser install, because how can I know what this modal popup is from? It doesn't tell me any info about the company or developer. Now, if it said:

Hero Section:
h1: Have your Logo alongside "Fadblock Chrome Extension". This tells the user who/what organization is behind this modal popup display.
h2: "Donation Request" (already exists: "one time contribution" but I would add the word "request" so that it's unambiguious what the topic of the popup is. And I'd say "One Time Donation Request". because it's asking for money-- a donation. Use very specific, unambiguous language. Versus "contribution" which could be anything.)
h3: Website link, Chrome extension store link, Github page link

Content section:
p: Info about the donation request

Footer section:
[Paypal] [ Venmo] [Not now]
email link to Contact Developer

...Then I would understand "Ohhhhh this is a chrome extension which is asking me for a donation"

Then I saw your email address was shown when I hover on something. So I found your github and see you made Fadblock, which I have installed.

Just to reduce confusion from users--
I highly recommend that on any Modal Popup your extension displays... At the very top, make it very clear "This is a Fadblock modal popup trying to tell you, the user, something."

I recommend:

1. A logo
2. The name of the extension, in very specific wording to tell the user exactly what it is: "Fadblock Chrome Extension"
3. A link to: its Website or Chrome Extension site. (so a random, non-dev user can visit a simple page that discusses the extension)
   ...be placed at the very top, in a hero/heading section of any modal popups.

Because when I saw this-- I did not want to click any part of it. so I used the browser inspector to delete it from view. Then I thought "Well... let me go see what it is and who made it".

Notice how there's nothing on it that says "Fadblock Chrome Extension". I had no idea what this is, hence I did not want to click it at all.

TLDR:

Currently, a user has no idea what this modal is coming from. My thought was "Whoa what the heck is this? I have no idea where this popup came from." So, please make it clear it's coming from the Fadblock chrome extension. Thank the user for using it. And provide links to more info: the chrome store, (maybe also the project website), and the github page (already on there, but perhaps put the link right under the name of the extension, in the upper right corner)

Current verison

Improved version-- Improved for Clarity and Specificity (reduced ambiguity)
I'm not great with graphic design tools, so I just wanted to get across the content suggestion here, rather than making it look perfect.
NOTE: where it says "link to store" in the upper right corner-- I meant "link to chrome extension store page for Fadblock"

[pmeaney]

Also, another suggestion:

In the extension dropdown > Get lifetime license > payment processing page

Please add an option for Paypal.

I would not give my credit card number to any extension. I would only give it to Paypal or some other payment processor directly.

I wouldn't enter any sensitive info into an extension. But if it had link to open a paypal page, I would go there and make a payment.