Improve the donations handling

[Cobra-Bitcoin]

Bounty: 264,000 bits / ~$875 USD

Currently the donation address is placed in the footer of the site, where very few people will see it. It would be good to also have an additional donation appeal somewhere on the top of the site (this might boost the amount of donations we receive significantly).

This donation appeal at the top should look similar to the one used by Wikipedia (http://i.imgur.com/YIlZ6zH.png), though obviously be changed and tweaked a little to better match bitcoin.org's theme. It should feature a small one sentence explanation of why we're asking for donations ("Bitcoin.org is a community funded project, donations are appreciated and used to improve the website.") and feature a green "Donate" button which when pressed will launch a modal with the donation address and the QR code. This donation appeal at the top should only be visible to non-mobile users.

The functionality is not that hard to implement, but the key thing about this bounty is that the design and user experience should be excellent. We need the right choice of colours and it's also important that the modal actually looks like it belongs on bitcoin.org and not something that's come out of Twitter Bootstrap.

[Mirobit]

this might boost the amount of donations we receive significantly

Probably true, but a Wikipedia style donation appeal will also annoy the hell out of the users.
It should be much less obtrusive. The Wikipedia donation appeal is also only up for a short period.

Asking for money shouldn't be the first thing new users should see.

[kuzzmi]

The Wikipedia donation appeal is also only up for a short period.

Because Wikipedia raises needed sums quite fast. However, this is what I propose to do:

1. Set a fixed sum that is required on the donation address
2. Make AJAX request on loading every 24 hours (so we don't spam blockchain analyzers too much) and if the sum there is smaller than a threshold from 1, we show a "Donation" banner, otherwise, all good.

To the topic. Of course this is not the final result, but just to give the idea of how it could look like:

[Francisc]

Is this still available or did kuzzmi claim it?

[Mirobit]

@kuzzmi The design is much less obtrusive than the Wikipedia appeal. I personally would remove the small orange horizontal line above the text box in the uncollapsed version. That would make it even less obtrusive ;)

Bitcoin.org has 2 Mio. unique visitors every month. I am not sure that the traffic load for the chosen block explorer / api provider is worth the gain.
We could activate/deactivate the appeal during the build process if enough donations were received during the last week/month. A small plug-in would be necessary but it would reduce the calls to a few calls per week and wouldn't expose all bitcoin.org user to the block explorer.

EDIT:
https://blockchain.info/rawaddr/1GwV7fPX97hmavc6iNrUZUogmjpLPrPFoE

[kuzzmi]

@Mirobit agree. I meant that the "show/hide" behavior can be automatically updated depending on either a donation wallet status, or other needs. For the orange line - yes, I just scrolled down a bit, but not enough :)

@Francisc, it's still available. I'm just throwing some of my ideas.

[Cobra-Bitcoin]

@kuzzmi Wow! That design looks really good!

I think we can start just by having it showing, and then see how it performs. Maybe we'll end up collecting too much money, but we can always use the extra money to increase the bounty rewards, or have more bounties to improve different parts of the site.

[Francisc]

@kuzzmi I like your visuals. I'd drop "Bitcoin.org needs your support!" when the banner is opened and drop its current content so that the green button fills part of the area where that text was.
This will make it slightly more subtle and less orange on screen.

Some simple animations would look great.
Let me know if you're going to be coding it, otherwise, I can help.

[kuzzmi]

@Cobra-Bitcoin Thank you! I'll leave a possibility to drop it by simply using a flag in Jekyll configuration of the website, it won't hurt on the long run anyway. As well as amounts you want to be displayed by default.

@Francisc I see you point. The reasons why it's so much orange are that:

1. it will be crucial to draw attention, when the banner is expanded;
2. human brain won't expect a thing that will allow him/her to collapse it back to disappear.

I have already things coded, with animations and so on, so will open PR soon.

[kuzzmi]

Quick question: do we need any sort of instructions to how to donate, or we can assume, that people are familiar with QR codes and what to do with them?

[Cobra-Bitcoin]

@kuzzmi I think it's safe to assume people will be familiar with QR codes.

[Francisc]

@kuzzmi

1. I am saying there's too much orange after opening it. So drawing attention to the button should thereafter be the goal. In my mind, if a user performs an action (e.g. expands a banner), we already have their attention, no need to spam it.
2. I don't expect "Bitcoin.org needs your support!" to collapsed it either. That should be achieved either via an explicit button (could just be a simple "Close" text) or via a symbol (like an arrow or triangle). The less elements are on the banner, the more attention the button can draw.

Good luck building it.