1081225 - Design "Pay with PayPal" page for multiple currencies

Status: RESOLVED FIXED

(Mozilla Foundation Communications :: Graphic Design, task)

Description

[Aki Rose Braun [:akirose]]

+++ This bug was initially created as a clone of Bug #1077271 +++

We need to provide a way to donate to Mozilla in as many currencies as possible. We can emulate Wikimedia Foundation's solution as demonstrated on this page:
http://wikimediafoundation.org/wiki/Ways_to_Give#paypal

Example UX: 
Step 1: User who wants to use PP to donate in any one of 29 currencies:
https://www.evernote.com/shard/s202/sh/afea81a3-2963-4bae-acf6-2f7e2d474ad2/d23b66b9b46d71a03c376603308b8b33/deep/0/Ways-to-Give---Wikimedia-Foundation.png

Step 2: User selects Philipino Peso:
https://www.evernote.com/shard/s202/sh/d8a0720c-eba3-4222-8ebe-5865bcf84698/8bb6bbb788d97c50c5820e9a9ce134fa/deep/0/Make-your-donation-now---Payments.png

We can improve upon Wikimedia's solution. We should keep the title "Make your donation now" but we should localize the title and other text on the page using L10N or Transifex. This page does NOT need a lot of design, and should stay very simple!

I believe the process would be:
1. Create a template page in US-EN (could we use Wordpress or what solution should we use for this?)
2. Clone a new page for each currency
3. Update the PayPal button code for a given currency for each new page
4. Add translated text to the new cloned page that matches the currency
5. Add an index to our "Ways to Give" page that links each currency name to the respective page.


=========================


The build will likely be something similar to webmaker.org so we can localise, but we still will need a template design to be able to have somewhere to start.

Comment 1

[Andrea Wood [:andreawood]]

Hey Sabrina -- Aki is ready to start building these currency pages, we need to make some decisions about next steps. The design does not have to be significant .. really should just be emulating this:
https://www.evernote.com/shard/s202/sh/bc483b3b-756e-46e9-9f39-f79ad4547543/9fff0b785f33c9f33d53d3d8e370d188/deep/0/Make-your-donation-now---Payments.png

Comment 2

[Sabrina Ng [:sabrina]]

Where are these links going to be located and how does the user get to them (https://www.evernote.com/shard/s202/sh/afea81a3-2963-4bae-acf6-2f7e2d474ad2/d23b66b9b46d71a03c376603308b8b33/deep/0/Ways-to-Give---Wikimedia-Foundation.png)? and are these related to the single page donation form?

I am missing a bit of context of the UX flow here and how it ties in to the donation process but can help style it similarly to match our single page donation form if the templates are already built. Please let me know what the plans are for this.

Comment 3

[Andrea Wood [:andreawood]]

The UX flow is:
-- We will expand mozilla.org locales -- we'll add a link to each currency page from mozilla.org now that it's localized into 30+ locales. Right now, we only have "donate" buttons in US-EN;
-- We will share these currency pages with ReMos and others who ask us for donation form links in their local currency / language;
-- Like Wikimedia, we will have a "ways to give" page with a list of all the localized PayPal pages for people who are looking for ways to donate in their own currency.

I am open to suggestions about where these pages should live. Wikimedia holds them in their wiki. If that's an option, let's do that. These pages just need to be easily created, the Paypal code lives on there for each currency amount field and button, but there's really no need to emulate the current donation form, which is highly designed. The only thing on the page is a little text that will be translated to match each currency. 

So, think SIMPLE, easy to build. Easy to clone, easy to drop a paypal box in and GO. Don't over-think.

Comment 4

[Sabrina Ng [:sabrina]]

Attachment: DonationForm_PaypalCurrencies_MXNexample.png

example for mexican pesos (paypal)

Comment 5

[Sabrina Ng [:sabrina]]

"-- we'll add a link to each currency page from mozilla.org now that it's localized into 30+ locales."
so there is still confusion around this for me... My interpretation is that people will access the "single page donation form" in the available 3 languages it comes in (not sure which 3) if they are in those locales and the rest of the people will access this "pay with paypal" page if they are from the other 30+ locales this page is available in. Can you clarify or confirm this?

Where does this link live from mozilla.org? (do people get here from the footer donate link and directly from remos?)
Does this mean people bypass the "single page donation form" if they are not from those 3 locales?

Comment 6

[Sabrina Ng [:sabrina]]

Also I'm not sure where the list of available currencies lives (assuming it lives on a wiki and does not need to be designed)

Comment 7

[Andrea Wood [:andreawood]]

Thanks Sabrina, sorry for the confusion.

-- We will create a localized version of our primary form (single page or sequential) in the following locales: DE, FR, PTBR, ES

-- These simple PayPal currency pages will be shared where we are not localizing the single-page or sequential donation form. They will be live year-round, not just during the campaign. Currently PayPal accepts the following currencies: http://note.io/1wb4x4B

I am not sure we want to actually apply this much design effort to the page -- you've made the page much more attractive, but I want to ask Aki if she can weigh in on whether we need/ should apply design to the PayPal table embedded on the page, or if we should leave it as Wikimedia has (no additional design applied to the table itself). I want these pages to be as easy as possible to set up -- for instance in the design you drafted, I believe we would have to update every currency symbol ("$"), whereas the PayPal embed code simplifies things (there's no symbol): http://note.io/1wb3UIf

I love that we're localizing the language on the page, but I def. don't want to get into currency symbols, or have to do more work than we need to. Here's a quick mockup of what I propose, but again, I want to hear if Aki thinks this approach is actually simpler or not: http://note.io/1wb5D0m

Comment 8

[Aki Rose Braun [:akirose]]

The only part of the code that's embedded from PayPal is the button itself, so Sabrina's design actually works great. We could ditch the currency symbol for easier localisation, or we could keep it and just insert before or after as is called for by the local custom.

Comment 9

[Andrea Wood [:andreawood]]

sweeeeet! let's do it!