Closed Bug 938402 Opened 12 years ago Closed 12 years ago

Create a method for display notification banners across Webmaker for EOY campaign

Categories

(Webmaker Graveyard :: webmaker.org, defect)

Product:
Webmaker Graveyard
Component:
webmaker.org
Platform:
x86
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: brett, Assigned: kate)

References

Details

(Whiteboard: EOYFR)

Attachments

(5 files)

EOY13bannermockup.png
503.73 KB, image/png
Details
https://github.com/mozilla/webmaker.org/pull/522/files
54 bytes, text/plain
gvn
: review+
Details
faces.zip
1.78 MB, application/zip
Details
https://github.com/mozilla/webmaker.org/pull/550
48 bytes, text/x-github-pull-request
jon
: review+
alicoding
: review+
Details | Review
https://github.com/mozilla/webmaker.org/pull/557
48 bytes, text/x-github-pull-request
jon
: review+
Details | Review
The development team is creating an end of year fundraising campaign across Mozilla properties, one of which will be webmaker. We'll be creating makes and other calls to action for our audience. The plans are evolving here: http://mzl.la/eoy2013 and http://fundraising.mofostaging.net/ One thing that would be impactful here is a banner across all of webmaker.org (save tools and makes), similar to what wikipedia does during their fundraising: ie https://en.wikipedia.org/?banner=B13_1029_clr_gry_enYY&reset=1 In their case they use a query string, which I think would be useful for us so that we could create specific messaging depending on where a user is sent from (mail, social media, snippet, etc) We also want this to be live for 2 weeks of the fundraising campaign, however - dec 15-dec 31st. So the query string approach would not necessarily be required. We should re-use this approach whenever we need to message our users an important detail, such as the beginning of a campaign or a call to action. Ben, could you chime in with specific requirements of what should be inside the notice?
Thanks for starting this conversation, Brett. At a minimum, a big red donate button would be great! With some inspirational text. But to me, even better would be something that looks more like: https://en.wikipedia.org/?banner=B13_1029_clr_gry_enYY&reset=1 Which lets you begin a donation right there on the page. We could accomplish this using an iframe or other subset of: https://sendto.mozilla.org/page/contribute/join-mozilla?source=base_url I'll defer to Bob on what's technically feasible, given security limitations of BSD (our payment gateway). Design-wise... We will have some graphic assets that would be usable here, which will also be on the front page of Mozilla.org and Tabzilla between Dec 15th-Jan 1st. The text would probably be something like: "You know us as the makers of Firefox. But your donations are what make Webmaker possible. Your donations drive our education work. Our activism. They help us teach web skills to children and adults. They help us to get governments to respect our rights to privacy. To address the parts of our mission that Firefox can't solve by itself. Consider making a $5 donation to Mozilla today." Sure we could do better than that, though! Thanks for the help, everybody.
I don't think an iframe will work in this case, since BSD (correctly) has their X-Frame-Options headers set to SAMEORIGIN. There *is* a possibility that BSD could use ALLOW-FROM with a uri we've secured for them. However, we may be able to place some JS on the donate page that uses the query string to auto-fill some of the donation form. It may also be possible to set up our own <form> that sends data to https://sendto.mozilla.org/page/cde/Contribution/Charge to bypass the BSD form altogether (needs testing). Is a link to the donate page ok?
Whiteboard: EOYFR
Hey Bob— Link to the donation page would be OK. As would a custom form to populate BSD. I defer completely to you to make a decision on cost-benefit of which solution to pursue. Cheers! Ben
Cool. Just threw together a test for using the query string: https://secretrobotron.makes.org/thimble/donate_ We could also throw an entire form into the mix (e.g. https://secretrobotron.makes.org/thimble/donate-more_), but it would require that people fill in more boxes before they click "Donate". I think the first option works well. Thoughts?
Exactly what we needed. So, Brett, Kate: Between Bob's code in comment 4, and the text in comment 1, are there other design elements we can contribute to help? I am sure we'll want to iterate together, but seems like a good start? Many thanks!
Attached image EOY13bannermockup.png —
@Kate, here's a mockup to get the discussion started. The top one is something like what we have discussed in this bug. The bottom one introduces an interesting idea, which is to include statements from web celebrities. (We're recruiting Tim Berners Lee / Lady Gaga type-people: https://docs.google.com/spreadsheet/ccc?key=0AvbQ383XA3K1dFlNU1F6VzZ1SHJ5UkVmMnRpanJTNkE&usp=drive_web#gid=0) Might be fun to play with that—we can put together an array of hard-coded statements, if you guys think it's interesting. If it seems like scope creep, no worries. A lot of this is a trial run for next year. Here's a design reference from Wikimedia: https://en.wikipedia.org/?banner=B13_1029_clr_gry_enYY&reset=1
Sure, we can do something like that. We already have a lot going on the header area so personally I'd prefer not to include the faces/statements, but it can be done if we need to. If it's just text and some links to certain payment amounts, should work fine with localization. We'll need to consider how we can do this on mobile though, since we're even more limited in terms of vertical space.
Hi All, Apologies to drop in an be blunt, but good design does not equal good fundraising. And this is about being good at fundraising. Faces and statements are the foundation for the ask. We will miss by several orders of magnitude without the personal touch. This is supposed to feel like a 3rd limb. It shows up, gets noticed, gets solved, then goes away with huge thanks. Happy to chat in person! And appreciate everyone's work on this. Cheers, G.
Ok, sounds good Geoffrey. Just an update from our meeting with Ben: we'll get something landed on staging this week, copy and design to be reviewed once it's on staging. We'll include a space for quotes and images but hide it on mobile to save vertical space. If it's essential that we show everything on mobile, we'll have to work out either an alternate placement for it or some way of hiding/revealing content.
Cool! Thanks. Greatly appreciate your help. =)
So this is going through code review and is nearly ready. We need to march forward on content. To make sure we give localizers enough lead time, I'd like to propose December 9th as a content/string freeze. This means: -final english copy -final graphics Additionaly, December 15th is a Sunday - we don't like to deploy on weekends since we have fewer bodies available if the unexpected happens. Therefore, we can push the changes to production and switch the environment variable on Monday, December 16th. Ben can you confirm these dates will work for the campaign?
Sounds great. Final copy on the way.
We also discussed adding a cookie with a 4 hour timeout - if a user dismiss the appeal, they wont see the reminder for 4 hours
Ok, added the 4 hour timeout and a querystring method of forcing it -- Just add ?showCampaignBanner to the URL.
Rad—testable at mofostaging.net?
Comment on attachment 8338014 [details] https://github.com/mozilla/webmaker.org/pull/522/files Kate a few things: - Close button should be larger for mobile. ~44px square (http://www.lukew.com/ff/entry.asp?1085). - Can we use 25% width for the narrow viewports as well? Like so: https://www.dropbox.com/s/f776ja8ot487loi/Screenshot%202013-12-03%2012.30.46.png - Some other stuff noted on GitHub, most importantly cookie is at 4 days, not 4 hours.
Attachment #8338014 - Flags: review?(gavin) → review-
Hey guys, here are the final quotes and faces: "The future should be something our kids can make for themselves." Chad Sansing, Webmaker fellow   “Everyone should be given the opportunity to explore its endless possibilities." Faye Tandog, Webmaker mentor   "You can create your own path with it." Ricardo Panaggio, Mozilla Rep   "I care for the web, and want to help others who care to make it better." Amira Dhalla, Webmaker mentor   "Because the world is our platform." Laura Fleming, Webmaker mentor    "It makes science better and faster." Ethan White, Scientist   "All I've learned about programming the web, I've learned on the web. Share it back." Alan Levine, Webmaker Fellow   "It can help empower kids to be creators of technology." Maurya Couvares, ScriptEd   "It's helping us to create a world where education is for everyone." Sophie Kay, Webmaker mentor
Attached file faces.zip —
Kate, I can help with cropping or preparing these if you can give me instructions.
Hey all, question on localization: Should we plan on asking for l10n help through Webmaker transifex, or should I get crafty on translation? I can source help from friends and coworkers for the easier languages, maybe Amazon Turk + Google translate for the more exotic ones. Either way, let me know?
Ok, added images and review fixes. @ben@mozillafoundation.org, I think having a separate file on Webmaker transifex is probably the way to go, it will look like this: https://github.com/k88hudson/webmaker.org/blob/b89d8af26698c2d085ec47535e1657c54b5e6ed0/locale/en_US/eoycampaign.json CC'ing aali to make sure that happens
Comment on attachment 8338014 [details] https://github.com/mozilla/webmaker.org/pull/522/files Cookie is now 4 hours (for sure), gettext and text/images in.
Attachment #8338014 - Flags: review- → review?
Attachment #8338014 - Flags: review? → review?(gavin)
@Brett, @Kate: with the file on Transifex, can we lean on our translation community to have this ready in main languages by end of week? Or should I intervene somehow? Looking to your guidance! Many thanks!
I can send an announcement to our localizer to asked them to get this translate as fast as they can. I would say we will have at least 10 languages ready by the end of this week @Ben.
ben, no reason not to forward Ali's appeal to friends as well.
Alright, so we have the file up on Transifex and Thai translation completed 100% https://www.transifex.com/projects/p/webmaker/resource/eoycampaign/ If I can get a message that you want me to send to our 500 localizers on Transifex specifically please let me know. I also set the priority of the translation to URGENT.
OK, I just built webmaker.org, the campaign is up: https://webmaker.mofostaging.net/ If you close it don't feel like clearing your cookie or waiting for 4 hours, you can always add ?forceCampaignBanner to any URL. Thanks for doing this so quickly Ali! :D
Sorry, I mean to say it is built on staging only, we can turn it on prod whenever we want.
This is looking amazing! One suggestion -- Not to throw in a late wrench, but it might be wise to remove this phrase: "To address the parts of our mission that Firefox can't solve by itself,". Omitting it will simplify the banner; and it might be raising questions in the minds of viewers where there were none.
@Andrea, @Ben, are we able to localize currencies on your end?
Not on the donation form - it's something we really wanted to do, but don't have resources to do it across all the localized landing pages (plus there is the issue of conversion). Once someone makes a selection and clicks to make a payment, the process is localized through payment processor of course (CC or PayPal). While not ideal, we've raised over $60K from these localized forms already. I'm sure we'd raise more if the amounts were localized, we'll do it next year.
Comment on attachment 8345080 [details] [review] https://github.com/mozilla/webmaker.org/pull/550 aali, can you take a look at this and upload strings to Transifex?
Attachment #8345080 - Flags: review?(jon)
Attachment #8345080 - Flags: review?(ali)
Attachment #8345080 - Flags: review+
Comment on attachment 8345080 [details] [review] https://github.com/mozilla/webmaker.org/pull/550 I guess we can localized this URL directly ourself on Transifex.
Attachment #8345080 - Flags: review?(ali) → review+
Having stuff like this (i.e., time sensitive, campaign related) going to Transifex is a bad idea, and one I'd like to see us avoid. We have a limited resource on Transifex, namely, good will amongst volunteer translators. We need them to work on our stable product strings, and also expecting them to do short-lived strings is not going to work over the long haul, which is what we're into. They and Transifex aren't a translation service. If Mozilla needs strings translated for something like a campaign banner, get it done professionally and let's not have unnecessary churn in our l10n community.
And we're now live on prod: https://webmaker.org
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
Just talked with Andrea - apparently we need the "source" part of the query string to understand where donations come from, so we can see that they came from Webmaker. This will be useful in analyzing the campaign, so we should put them in. From Andrea: "Just clicked on the banner and noticed the tracking URLs don't include the source code. The URL for the US-EN, for instance, should be: https://sendto.mozilla.org/page/contribute/EOYFR2013-newdefault?source=webmakerorg_bannerEN (plus the amount parameter) The tracking URLs were provided in comment 33. I assume it's too late to fix? Otherwise we can't track income directly back to the banner."
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
Attachment #8348143 - Flags: review?(jon) → review+
The source code tracking has been fixed!
Status: REOPENED → RESOLVED
Closed: 12 years ago → 12 years ago
Resolution: --- → FIXED
Blocks: 950851
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: