Closed Bug 937396 Opened 9 years ago Closed 9 years ago

[Snippet] End-of-Year Fundraising Campaign (copy approval, 40 x 50 png static icons, 40 x 50 png animated gif icons)

Categories

(Marketing :: Copy, task)

All
Other
task
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Due Date:

People

(Reporter: jcollings, Assigned: mternoway)

Details

Attachments

(11 files, 3 obsolete files)

>>Project/Request Title:
End-of-Year Fundraising Campaign (copy approval, 40 x 50 png static icons, 40 x 50 png animated gif icons)

>>Project Overview:
Foundation will be running their end-of-year fundraising campaign towards the end of November and December. 

>>Creative Specs & Deliverables:
We will be testing which copy and icon resonates best as soon as possible before pushing the final winners towards the end of Nov and December. 

COPY - 
Carmen, I and Andrea (from foundation) have worked together to narrow down on themes and variations of copy to test/run. Matej, if you can please take a look at these to make sure nothing is off-brand or inappropriate that would be greatly appreciated! 

1) Public good over profit theme
Short: We are a movement, not a business. Donate today to support our non-profit work to protect the web and create value for everyone.

Long: Mozilla is proudly nonprofit. Donate today to support our work to protect the Web and create value for everyone, not just shareholders.

2) Just $3 theme (testing the Wikipedia strategy)

Short: Mozilla, the maker of Firefox, is a non-profit. If everyone gave only $3, we could make the Web even better. Donate today.

Long: Mozilla, the maker of Firefox, is a nonprofit and we rely on donations and grants. If everyone reading this gave $3 we would only have to fundraise 1 day a year. Make a donation today. 

3) Factoid theme

Short: Did you know Firefox is a product of the Mozilla Foundation? Mozilla is proudly nonprofit. Donate today.

Long: Did you know Mozilla is a leader in online privacy? We build tools like Firefox, Do Not Track, and Lightbeam. Support our work with a donation today.

4) Executive Pitch theme
Short: Donate to Mozilla today. “We are proudly nonprofit and we protect the open Web.” - Mitchell Baker, Chair. 

Short: “We know an open Web is worth fighting for. Your donation supports the fight.” - Mark Surman, Mozilla Foundation 

ICON -
I need 2 static 40 x 50 png icons and 2 animated gif 40 x 50 png icons that will go with above copy. Some suggestions were (please totally disregard if you think they are silly): heart beating, heart morphing to the "m" of mozilla.......


Please note that I know I am asking in such a short notice when the testing will happen on November 22nd but Foundation just provided approval on their request.  I wanted to bring up that Foundation is working with an agency to help them with this campaign and that they have designers allocated if we need assistance with the icons. If you do or do not want to use them, please let me know. Thanks!


>>Launch Date:
2013-11-22

>>Creative Due Date:
2013-11-21

>>Mozilla Goal:
Mozilla Foundation

>>Points of Contact:
jcollings@mozilla.com
Hi Jean, 

I'm assigning this over to Matej to get his attention on the copy before he goes into Tribe Wednesday + Thursday. I'll have a better idea tomorrow if we need to have the Foundation designer to tackle this one or if we can handle it.
Assignee: jbalaco → Mnovak
Status: NEW → ASSIGNED
Component: Design → Copy
Summary: End-of-Year Fundraising Campaign (copy approval, 40 x 50 png static icons, 40 x 50 png animated gif icons) → [Snippet] End-of-Year Fundraising Campaign (copy approval, 40 x 50 png static icons, 40 x 50 png animated gif icons)
"40 x 50 png animated gif icons" is a little confusing.

Do you mean
    "40 x 50 APNG animated icons"
or maybe
    "40 x 50 APNG or GIF animated icons"?

APNG and GIF are two different animated icon formats,
and I believe mozilla prefers APNG.
Flags: needinfo?(jcollings)
(In reply to Glenn Randers-Pehrson from comment #2)
> "40 x 50 png animated gif icons" is a little confusing.
> 
> Do you mean
>     "40 x 50 APNG animated icons"
> or maybe
>     "40 x 50 APNG or GIF animated icons"?
> 
> APNG and GIF are two different animated icon formats,
> and I believe mozilla prefers APNG.

Hi Glenn,

I believe Matt has been creating the small animated icons as .gif in the past. However, I am not technical and don't know which format works best. I'll definitely reach out to him to clarify. Thanks,
Jean
It's better to use GIF if you want people to see the animations with other browsers that don't handle APNG files.
Flags: needinfo?(jcollings)
Here are my edits along with some comments (some of the edits are really minor, so please copy and paste from this comment rather than using the originals). Let me know if you have any questions.


1) Public good over profit theme
Short: We are a movement, not a business. Donate today to support our non-profit work to protect the Web and create value for everyone.

Long: Mozilla is proudly non-profit. Donate today to support our work to protect the Web and create value for everyone, not just shareholders.

> [MN: "Not just shareholders" makes it sounds like we have shareholders that the donation will create value for as well. I would remove that. Also, the short and long versions appear to be about the same length.]


2) Just $3 theme (testing the Wikipedia strategy)

Short: Mozilla, the maker of Firefox, is a non-profit. If everyone gave only $3, we could make the Web even better. Donate today.

Long: Mozilla, the maker of Firefox, is a non-profit and we rely on donations and grants. If everyone reading this gave $3 we would only have to fundraise 1 day a year. Make a donation today.

> [MN: There's a disconnect between the first two lines in the short version. It isn't clear how the donations help just by saying we're a non-profit. It's a lot stronger and clearer in the long version, but I think "Donate today" is a much better CTA than "Make a donation today."]


3) Factoid theme

Short: Did you know that Firefox is a product of the proudly non-profit Mozilla Foundation? Donate today.

Long: Did you know Mozilla is a leader in online privacy? We build tools like Firefox, Do Not Track and Lightbeam. Support our work with a donation today.

> [MN: Is it true that Firefox is made by the Foundation? Isn't it made by the Mozilla Corporation?]


4) Executive Pitch theme
Short: Donate to Mozilla today. “We are proudly non-profit and we protect the open Web.” — Mitchell Baker, Chair. 

Short: “We know an open Web is worth fighting for. Your donation supports the fight.” — Mark Surman, Mozilla Foundation
Thanks, Matej for the quick feedback. Assigning design over to Matt.
Assignee: Mnovak → mternoway
(In reply to Jennifer Balaco from comment #6)
> Thanks, Matej for the quick feedback. Assigning design over to Matt.

I just want to make sure the comments from comment 5 get addressed.

Jean, can you comment?
Flags: needinfo?(jcollings)
(In reply to Matej Novak [:matej] from comment #5)
> Here are my edits along with some comments (some of the edits are really
> minor, so please copy and paste from this comment rather than using the
> originals). Let me know if you have any questions.
> 
> 
> 1) Public good over profit theme
> Short: We are a movement, not a business. Donate today to support our
> non-profit work to protect the Web and create value for everyone.
> 
> Long: Mozilla is proudly non-profit. Donate today to support our work to
> protect the Web and create value for everyone, not just shareholders.
> 
> > [MN: "Not just shareholders" makes it sounds like we have shareholders that the donation will create value for as well. I would remove that. Also, the short and long versions appear to be about the same length.]
> 

Agree, will remove "shareholders" - and not too concerned about the length at this point as we're going to test all of these before picking the winners. 
> 
> 2) Just $3 theme (testing the Wikipedia strategy)
> 
> Short: Mozilla, the maker of Firefox, is a non-profit. If everyone gave only
> $3, we could make the Web even better. Donate today.
> 
> Long: Mozilla, the maker of Firefox, is a non-profit and we rely on
> donations and grants. If everyone reading this gave $3 we would only have to
> fundraise 1 day a year. Make a donation today.
> 
> > [MN: There's a disconnect between the first two lines in the short version. It isn't clear how the donations help just by saying we're a non-profit. It's a lot stronger and clearer in the long version, but I think "Donate today" is a much better CTA than "Make a donation today."]
> 
> 
Noted on the disconnect - will loop back with Foundation on that one. And I'm fine with the "Donate Today" for the long version.

> 3) Factoid theme
> 
> Short: Did you know that Firefox is a product of the proudly non-profit
> Mozilla Foundation? Donate today.
> 
> Long: Did you know Mozilla is a leader in online privacy? We build tools
> like Firefox, Do Not Track and Lightbeam. Support our work with a donation
> today.
> 
> > [MN: Is it true that Firefox is made by the Foundation? Isn't it made by the Mozilla Corporation?]
>

I think Foundation is going under the assumption that they created the corporation which in turn created Firefox.  
> 
> 4) Executive Pitch theme
> Short: Donate to Mozilla today. “We are proudly non-profit and we protect
> the open Web.” — Mitchell Baker, Chair. 
> 
> Short: “We know an open Web is worth fighting for. Your donation supports
> the fight.” — Mark Surman, Mozilla Foundation


Thanks for your feedback and I'll make the changes accordingly before testing. Let me know if you feel strongly about short version under the Factoid Theme.
Thanks, Jean. I think the Factoid one is OK as long as everyone else is comfortable with it. Just want to make sure we're not saying something incorrect. Please let me know how else I can help here.
(In reply to Matej Novak [:matej] from comment #9)
> Thanks, Jean. I think the Factoid one is OK as long as everyone else is
> comfortable with it. Just want to make sure we're not saying something
> incorrect. Please let me know how else I can help here.

Matej:
In regards to the Factoid theme, I think it's best to remove it and use this for the short version "Did you know Mozilla is a leader in online privacy? Mozilla is proudly nonprofit. Donate today." Just don't want to open a can of worms here. 

Secondly, when you get a chance can you provide recommendations on how to rewrite "Mozilla, the maker of Firefox, is a non-profit. If everyone gave only $3, we could make the Web even better. Donate today."


Thank you!
Here are a few new options:

Mozilla, the maker of Firefox, relies on people like you. If everyone gave only $3, we could make the Web even better. Donate today.

Mozilla, the maker of Firefox, needs people like you. If everyone gave only $3, we could make the Web even better. Donate today.

Mozilla, the maker of Firefox, relies on donations. If everyone gave only $3, we could make the Web even better. Donate today.
(In reply to Matej Novak [:matej] from comment #11)
> Here are a few new options:
> 
> Mozilla, the maker of Firefox, relies on people like you. If everyone gave
> only $3, we could make the Web even better. Donate today.
> 
> Mozilla, the maker of Firefox, needs people like you. If everyone gave only
> $3, we could make the Web even better. Donate today.
> 
> Mozilla, the maker of Firefox, relies on donations. If everyone gave only
> $3, we could make the Web even better. Donate today.

Love it, thank you! I'm liking the last one but I will test all of these as well.
Hi Matt,

Let me know if you need any guidance or help with the icon creations! I know there's a lot of copy floating around out there so just wanted to help clarify if you need it :)
Flags: needinfo?(mternoway)
Thanks Jean.  Would it be possible to get a consolidated document of all the various copy as well as which copy needs to go with the static graphic vs the animated ones? I am devoting tomorrow to working out each of the graphics and hope to have something to show by end of day.

Thanks!
Matt
Flags: needinfo?(mternoway)
(In reply to MT from comment #14)
> Thanks Jean.  Would it be possible to get a consolidated document of all the
> various copy as well as which copy needs to go with the static graphic vs
> the animated ones? I am devoting tomorrow to working out each of the
> graphics and hope to have something to show by end of day.
> 
> Thanks!
> Matt

Hey Matt, 
Please see the testing strategy I have put together. Although the ask is for 2 static and 2 animated, each copy will get tested with 1 static and 1 animated. To make things easier, let's assume Icon 1 will be static and Icon 2 will be animated. 

https://docs.google.com/spreadsheet/ccc?key=0Ano0rjdtuj8cdEhkdVBJMjYwSTZ5ak9EdjNJaUNnQWc&usp=sharing

Let me know if you need clarity!
Thanks, Jean.

There's just one that looks odd to me:

"Did you know Mozilla is a leader in online privacy? Mozilla is proudly non-profit. Donate today."

It feels like two disconnected thoughts.

Here are a couple of options for how we could revise it:

"Did you know that Mozilla is proudly non-profit and a leader in online privacy? Donate today."

"Did you know that Mozilla, a leader in online privacy, is proudly non-profit? Donate today."
(In reply to Matej Novak [:matej] from comment #16)
> Thanks, Jean.
> 
> There's just one that looks odd to me:
> 
> "Did you know Mozilla is a leader in online privacy? Mozilla is proudly
> non-profit. Donate today."
> 
> It feels like two disconnected thoughts.
> 
> Here are a couple of options for how we could revise it:
> 
> "Did you know that Mozilla is proudly non-profit and a leader in online
> privacy? Donate today."
> 
> "Did you know that Mozilla, a leader in online privacy, is proudly
> non-profit? Donate today."

Perfect, changed it. Thanks for catching that. I'm using the first one you offered - "Did you know that Mozilla is proudly non-profit and a leader in online privacy? Donate today."
Thanks for clarifying, Jean. I've thought about your suggestion to use a heart incorporated with the mozilla 'm' in some way...and think that it would be a simple and strong way to emphasize and accompany the various copy. I've attached an example of of this. I feel the imagery works well both in static and animated form because of it's simplicity.  Let me know what think of this idea.
Attached image snippet_80x100px.gif (obsolete) —
Jean, this would be the animated GIF version of the static heart.  I've created it at the dimensions of 80x100px which is doubled to appear sharper on retina displays. Timing can be adjusted if needed.
Hey Matt,
I love these icons, however, at first I thought it was an M&M, is there a concern with that? Can we possibly tweak it - is it too hard to put the whole "Mozilla" in that small space? 

Can we also have one more static and animated icon just so we have fresh icons to switch out during the campaign?
(In reply to Jean Collings from comment #21)
> Hey Matt,
> I love these icons, however, at first I thought it was an M&M, is there a
> concern with that? Can we possibly tweak it - is it too hard to put the
> whole "Mozilla" in that small space? 

I see what you're saying, but that "m" is pretty standard usage for Mozilla. Matt, please give the whole word a try, but I think it's going to be too small to read at this size.
Thanks Jean, at that scale I wouldn't be able to place the full wordmark within the heart, but I've attached a possible option with the wordmark sitting below it.
Attachment #8336337 - Attachment is obsolete: true
All things considered, I actually like the version from comment #23 best. I think it works well.
That works, Matt can you make an animation of it as well? If you can send the assets to me as static - 40 x 50 svg and animated gif 40 x 50 as well (not sure if animations can be svg?).
Sure that's not a problem, I will do the similar heart beat effect on this as well.  I can make the static version SVG, but the animated version will be in GIF format at double the size which will ensure the crispness on retina displays.
Attached image DonateSnippet_40x50.svg
Jean, here is the 40x50px static SVG snippet.  One thing to note is, I have removed the small highlight on the corner of the heart to keep things closer to the more reduced detail of the current brand look. I hope this won't be an issue with you. Animated version to come shortly as well.
(In reply to MT from comment #27)
> Created attachment 8336442 [details]
> DonateSnippet_40x50.svg
> 
> Jean, here is the 40x50px static SVG snippet.  One thing to note is, I have
> removed the small highlight on the corner of the heart to keep things closer
> to the more reduced detail of the current brand look. I hope this won't be
> an issue with you. Animated version to come shortly as well.

That's fine with me, looks great anyways! I'm checking with web dev if our system can take the 80 x 100 size since I believe we're only coded to take 40 x 50 but I could be wrong.
Great! I won't speak for them but I believe that they can set the size to 40x50px within the code, which would scale the graphic down but still retain the data of the larger image.
(In reply to MT from comment #29)
> Great! I won't speak for them but I believe that they can set the size to
> 40x50px within the code, which would scale the graphic down but still retain
> the data of the larger image.

Okay cool just shoot it my way when you get a chance - looks like web dev is off the clock so I'll test it.
Attached image DonateSnippet_80x100px.gif (obsolete) —
Updated heart animation with Mozilla wordmark.
Attachment #8336340 - Attachment is obsolete: true
(In reply to MT from comment #31)
> Created attachment 8336522 [details]
> DonateSnippet_80x100px.gif
> 
> Updated heart animation with Mozilla wordmark.

I just tried it and unfortunately it didn't work. I remember you created a scroll animation for Manifesto that was in 40 x 50. Is it not possible for this one? I'll also follow up with web dev and see what we can do.
(In reply to Jean Collings from comment #32)
> (In reply to MT from comment #31)
> > Created attachment 8336522 [details]
> > DonateSnippet_80x100px.gif
> > 
> > Updated heart animation with Mozilla wordmark.
> 
> I just tried it and unfortunately it didn't work. I remember you created a
> scroll animation for Manifesto that was in 40 x 50. Is it not possible for
> this one? I'll also follow up with web dev and see what we can do.

Hi Matt,
So I just spoke to web dev and he says there's plans to make animation gifs retina compatible but for right now we will have to go with non-retina right now. Would you be able to send me the gif in 40 x 50? Let me know. Thanks!
Flags: needinfo?(mternoway)
Thanks for inquiring, Jean. Here is the animated GIF at 40x50px.
Attachment #8336522 - Attachment is obsolete: true
Flags: needinfo?(mternoway)
(In reply to MT from comment #34)
> Created attachment 8336892 [details]
> DonateSnippet_40x50px.gif
> 
> Thanks for inquiring, Jean. Here is the animated GIF at 40x50px.

Thank you Matt. In regards to the other icon requests, let me know if you are too slammed as Foundation has design resources as well.
Hi jean, I've had some time today to put together a couple of concepts for the Factoid (theme C) and the $3 (theme D). For factoid I thought a simple lock shape would be an effective way to illustrate the idea of privacy. For the $3 donation, I went a bit more conceptual and used a '3' within a circle appearing to be placed into a box.
(In reply to MT from comment #39)
> Created attachment 8337020 [details]
> DonateSnippet_onScreen_themeD_shortCopy.jpg

SWEET! They look fantastic! Thank you! John let me know if you are cool with these icons. Once we get approval then hopefully Matt can start on the animations when he gets a chance (for the lock gif, we could have it open and close! - I of course defer to your better judgment).
Nice work!
Hey Matt,
EOY animated gifs are performing really well! I wanted to ask if you could tweak a few of the animated gifs you have already created so we can battle fatigue on the about:home page. 

Would it be possible to have these by 12/9?
Request 1: Animated 3 coin in green (instead of the current red)
Request 2: Animated heart gif - put in the number 3 (instead of blank)
Request 3: Maybe use the same 3 coin but have it roll in or spin? (No preference on color...maybe gold?)
Flags: needinfo?(mternoway)
Let's just make sure we're using Mozilla or Firefox colors here. I'm not sure we have a green or a gold, but we'll be able to find something. 

Maybe we can make the coin silver (or grey). Even though that's not an official color, it's at least consistent with what a coin would look like. I also worry a bit about the message we may send with a gold coin (though I'm probably just over thinking that).

Thanks.
(In reply to Matej Novak [:matej] from comment #43)
> Let's just make sure we're using Mozilla or Firefox colors here. I'm not
> sure we have a green or a gold, but we'll be able to find something. 
> 
> Maybe we can make the coin silver (or grey). Even though that's not an
> official color, it's at least consistent with what a coin would look like. I
> also worry a bit about the message we may send with a gold coin (though I'm
> probably just over thinking that).

Silver sounds like a good option to me.
Attached image 3Snippet_40x50px_v2.gif
Flags: needinfo?(mternoway)
Attached image 3Snippet_40x50px_v3.gif
Thanks Matt, these look great!
Hi Jean, I've attached a few animated options based on your requests and some of the feedback from John and Matej.
Yes!!!
Status: ASSIGNED → RESOLVED
Closed: 9 years ago
Resolution: --- → FIXED
Clearing flag.
Flags: needinfo?(jcollings)
You need to log in before you can comment on or make changes to this bug.