Page MenuHomePhabricator

Display information on bank account data of WMFG
Closed, ResolvedPublic2 Estimated Story Points

Description

As a donor,
I want to see information on how to donate using bank transfer at a glance,
so that I do not have to search for it or even reach out to the service people to retrieve that information.

Acceptance Criteria:

  • The design is implemented as seen below
  • When selecting and copying the IBAN the clipboard does not contain any whitespaces.
  • All messages are in a translatable form

Background:

In the 10h16 skin we have an overlay banner that displays this information after a short delay. It initially shows our bank account data and contains a button to show the details on how to donate using text messages on a mobile phone.

Some online banking software restrict the number of characters in the IBAN field and do not strip whitespaces.

Event Timeline

kai.nissen renamed this task from Add bank account and sms donation banner (as in 10h16) to Display information on bank account and SMS donation.Feb 28 2018, 1:48 PM
kai.nissen edited projects, added Story, WMDE-Design; removed Epic.
kai.nissen updated the task description. (Show Details)
kai.nissen triaged this task as Medium priority.Mar 1 2018, 4:06 PM

It could make sense to put the IBAN in the footer as Amnesty, and Unicef are doing it. Brot für die Welt has a kind of "soft footer" which is at the bottom of the viewport.

For exploration, we could design for:

  • Footer
  • Sidebar
  • Menu bar top, push menu points to ☰

The first is standard, the last is a bit risky, since in the Usability-Test, people explicitly asked several times for Spendenverwendung.

IS DONE ↓

@kai.nissen: can you split this into a ticket for banking information and a ticket for SMS donations? Otherwise this is double-barreled and might get stuck due to never knowing if we can move it if we make progress on one of the questions.

kai.nissen renamed this task from Display information on bank account and SMS donation to Display information on bank account data of WMFG.Apr 9 2018, 10:18 AM

Here is my suggestion.

DESKTOP:

image.png (283×1 px, 19 KB)

See this for how the elements align

image.png (428×683 px, 27 KB)

Currently, the line spacing matches the rhythm of the menu points in the right-hand-menu. If that introduces a new class etc. we could also go with the standard spacing.

MOBILE:

The linespacing is a bit smaller (150%). The spacing between the elements (logo, account, links) is the same as the former links-to-logo spacing. If it is a bit smaller, I don't worry, though.

image.png (690×357 px, 24 KB)

@kai.nissen: Ready from my side.

I like the way it is integrated in the skin. But I do see a risk if we hide the bank account information (no, no empirical evidence and I know some non profits hide their bank account details the same way. but I do also know the state of the art of online fundraising and I hesitate to follow that). Maybe we can enhance this solution with a "more visible link" to this information on typical "ipad and desktop" screens?

During last year's campaign we didn't provide that information at all in the new skin. I guess, it's hard to find evidence on any impact this might have caused, especially since the cat17 skin was only tested for a short amount of time. Did you check with the service team, if people were writing tickets more often to ask for our bank account data around the time we tested the skin? Or can you see a decrease of bank transfer donations that could not be linked to a donation pledge?

In my opinion, this is typical footer information and I don't consider it hidden. We could, of course, move or copy it to the sidebar, making it more visible. We could also add it to the FAQ page (see T189221). We would be cluttering the page by following a gut feeling, though.

as I said, no empirical nor anectodic evidence. It is a gut feeling (based on my 8 years online campaign experience steeled gut). I just want to think about how we could add a more prominent spot/link/whatsoever. That means the location of the bank account data can be like that Jan proposed but (maybe) in addition of an extra hint.

My stance is the following:

  • We could add a link somewhere else, but…
    • If we don't add it in a right position (to be found out, in that case) it will draw away attention from more important stuff
    • There was the vague idea to add it in the header bar, but if we add too much, it needs to be collapsed (and thus LESS visibility for the additional link AND all others)
      • To do changes to the menu, we would need more tracking information and more qualitative information. We could use an in-site survey. I think it would make sense to rework the menu anyway, but it would need a bigger bunch of upfront work.

Given constraint resources, I would keep it this way with the footer.
I think it is possible to do other things, but to do it in a way that does not break other things, it exceeds the amount of work my team can do without kicking off this as a small project on its own (as "rework menu" or so.)

yes, let´s implement this feature as proposed. And let´s think about some improvements in the future. We should have a user online test or some other kind of user feedback channel with people older than 60 to see if there are any problems or we can have a A/B test with this prominent link. btw if my risk assesment is on a certain level correct, then displaying the bank account is the most important stuff (that this finding a way to donate).

kai.nissen set the point value for this task to 2.

Implementation looks good to me and there are no typos.

Just putting this thought out there in case this is an oversight: Shouldn't it also show a "Kontoinhaber" ("account holder")? We do the same on the donation confirmation page and to me it's a standard field you need for transactions, especially since the account holder would technically be "Wikimedia Fördergesellschaft" instead of Wikimedia Deutschland but I don't know how much that matters.

What @Tim_WMDE says is correct. Whether or not the actual account holder matches is handled differently by banks, though. But it's not optional for bank transfers. Can you add that and reduce the paragraphs' bottom margins to keep the block aligned with the stuff on the right side?

When copying the IBAN, there are white-spaces in the clipboard. Online banking software may have character length restrictions and may not filter whitespaces when pasting, which would result in incomplete field values.

@Jan_Dittrich Can you think of a way to make this blob of text look more appealing? Maybe a tabular layout or different font sizes or bolding parts of the text? I think that might help to find the right information faster.

Hey @tmletzko you can test this change at https://test-spenden-2.wikimedia.de/
Please let us now if all looks ok, so we can deploy it to production.

thank you @Tonina_Zhelyazkova_WMDE it looks good to me. Although I think a headline like "Spendenkonto" might be needed. But we can leave like it is for now in order to have the account data live and since we already approved the design proposal.

@kai.nissen you wrote "When copying the IBAN, there are white-spaces in the clipboard. Online banking software may have character length restrictions and may not filter whitespaces when pasting, which would result in incomplete field values." which is a nice thing for users. I checked with the account number on our banner and experienced that this service is not provided there. Any objections implementing it there aswell?

wonderful. I take this as an "I will put it on the list and add it to the repository for the upcoming test."