Banner graphic for advocacy's donate page

kristinashu commented 4 years ago

Hold interview with Kaili https://docs.google.com/document/d/1cPPRZBq9LbBbrIYywXTBzWgykVzjDCXuwK4X5D2bT_I/edit.

Create a general graphic to highlight advocacy work for campaign donation page.

Example with a placeholder graphic https://donate.mozilla.org/en-US/feb2020a/.

kristinashu commented 4 years ago

Nat has kindly made a temporary graphic for this. @natalieworth could you please add the file here?

natalieworth commented 4 years ago

Final banner image is here :)

cc @kristinashu

natalieworth commented 4 years ago

Evergreen longer term graphic is here: https://redpen.io/p/kn6bc321aabe19260f cc @kristinashu Should I share this with Advocacy Team/ Will (Fundraising)?

kristinashu commented 4 years ago

Looks really nice Nat! Yes, please share it with Kaili and Will!

natalieworth commented 4 years ago

Updated design here (sans the eyeball lol): https://redpen.io/sce2f4ed75a459a099

kristinashu commented 4 years ago

This is looking good! I've shared it with Kaili.

kaili09 commented 4 years ago

thanks for the work on this!

I'm sharing some ideas and inspiration for more of the action/advocacy element I think I had in mind. Becca Ricks also had some ideas about shedding light on the topics and being a watch dog, which I think we're closer to with the current design.

Some advocacy ideas:

https://d1bile9su2eskg.cloudfront.net/wp-content/uploads/2014/01/Screen-Shot-2015-05-12-at-4.12.44-PM.png https://www.autismafter16.com/sites/default/files/article-images/advocacy%20paint.png https://www.proliteracy.org/portals/0/Images/Advocacy%20Hands2.png?ver=2018-06-15-085648-740 https://prettygrittyed.files.wordpress.com/2015/01/self-advocacy2.jpg https://sdghub.com/wp-content/uploads/2018/06/BFP-Advocacy-Collaboration-Blog-2.jpg (I like that this one has icons to symbolize the issues in it, but I could see it getting a bit busy for the purpose here)

And a few other ideas from Becca: image (1)

natalieworth commented 4 years ago

Hey @kaili09, I had some time this week to work on this! I'm still trying to keep it themed within our MoFo illustration styles, but I've updated it to include more of the advocacy imagery and examples you suggested: https://redpen.io/cuc510c6e4980aa1cc

Feel free to share with Becca or the team for feedback :)

natalieworth commented 4 years ago

The gathered feedback for the updated image is:

Include people (real photo), instead of illustration

@sabrinang In terms of heading and brand alignment, do you think it's weird to use photography?

Additional (non-design) feedback:

Change the "Donate Today" language, something such as "Chip in now / Help Mozilla win the campaigns that matter to all of us”
Update the sub-copy
Will said "We don’t know if the control layout of a donation page, or this “big-banner-across-the-top” style, performs better. I have a project in to allow that type of testing to happen – will update y'all once we move into that testing."

sabrinang commented 4 years ago

Photography is totally fine and on brand esp showing people has been a popular request (hope we could use more high quality ones). If it's high quality it probably doesn't need treatment but if you need to mask low quality images, you can play with the gradients which may help.

kaili09 commented 3 years ago

Hi @kristinashu curious what happened here? It seemed like it dropped off the radar after those initial images?

Here's some feedback from Will:

we'll need to do banner style, as we still don't have the ability to clone the default landing page (which uses a more rectangular graphic). (I was planning to test into this, but let's just go with banner style for now.)
- agree with the (consensus?) to show people, not an illustration. (Because people give to people, is what everyone in fundraising world says.)
- Torchbox crew is working on an A/B testing tool -- so we should develop TWO images and test them against each other. (People vs. an illustration, perhaps, to finally settle this question?)
- I don't know final size specs; Wagtail donate pages do some processing and resizing of the images (adapting for mobile, etc) after you upload them. So after we settle on basic design(s), I'll need to work with designers, upload the images and then perhaps do some final size adjustments.

kristinashu commented 3 years ago

Hey @kaili09, yeah I think we just lost track of it. Is this still needed? Is there a campaign for it coming up?

kaili09 commented 3 years ago

Hi @kristinashu - It's intended to be an evergreen graphic for donation pages, so not associated with a specific campaign but whenever we send a fundraiser about advocacy work, or have a donation ask attached to an advocacy campaign. As Will mentioned above, with the Torchbox A/B testing tool it would be great if we had two options (or more!) that were quite different to test out and see if it affects donations.

kristinashu commented 3 years ago

Ok, I've put it into our upcoming sprint!

natalieworth commented 3 years ago

I have 1 option here that I've shared with Kaili. Since we don't have a great photo library representing 'donation,' I ended up making a collage of people: https://redpen.io/p/gb586ee5a68685dc99

kaili09 commented 3 years ago

Will would like to test the 3rd version against our current treatment. I'll have more input from others by tomorrow. Thanks!

On Mon, Mar 29, 2021 at 12:48 PM Natalie Worth @.***> wrote:

I have 1 option here that I've shared with Kaili. Since we don't have a great photo library representing 'donation,' I ended up making a collage of people: https://redpen.io/p/gb586ee5a68685dc99

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/MozillaFoundation/Design/issues/495#issuecomment-809624099, or unsubscribe https://github.com/notifications/unsubscribe-auth/AL5XCSCCKAAVIWTH2RSYVTLTGDDPZANCNFSM4LCQKINQ .

-- Kaili Lambe Senior U.S. Campaigner, Mozilla

She, her, hers

I live and work on the ancestral homelands of the Cheyenne. I further acknowledge the 48 contemporary tribal nations historically tied to the lands that comprise what is now called Colorado.

kaili09 commented 3 years ago

Will and I both like the sort of animated treatment on the third option, but I don't think there's a reason we couldn't test all three against the control we have now. Can we get them exported and try it out? Thanks!

natalieworth commented 3 years ago

@kaili09 that one was my favourite too! I actually added a 4th option (it's the same as option 2 except it has a 55% black opacity over it as I was worried about the 'donate' text showing up. Let me know if you need to adjust though when they are in.

I've exported them all here

are you able to add the links here when they're added in just so I can review the design? I don't think I'm able to upload (I think it may be Will who has the permission)? cc @WillatMozFdn

WillatMozFdn commented 3 years ago

@natalieworth -- yes, I'll post these up to (copies of) our standard (banner-style) Wagtail donate page for review. (There are some image manipulation features/tools in Wagtail that we can play around with, but I don't fully understand how they work/what they do ... so for now, I'm just going with the default settings, and we can tweak later.)

WillatMozFdn commented 3 years ago

OK, here we go! (Fortunately the Wagtail "copy pages" bug seems to be fixed, so building these was easier than I thought.)

control: https://donate.mozilla.org/en-US/feb2020a/ test1: https://donate.mozilla.org/en-US/advotest1/ test2: https://donate.mozilla.org/en-US/advotest2/ test3: https://donate.mozilla.org/en-US/advotest3/ test4: https://donate.mozilla.org/en-US/advotest4/

Personally, I'm liking #4 here the best, so thanks for throwing that one in the mix, @natalieworth !!! The darker gradient on top communicates the "people" aspect well, almost subconsciously, BUT also doesn't take your focus away from the main area of the screen, where we want you to do something (such as reach for your wallet :-) ). #3 is my least favorite ... too, um, impressionistic or something? The image really takes my eye away from the actual donation form.

But of course -- curious to hear what y'all think!

kristinashu commented 3 years ago

Test1 is my fav! It shows people but isn't overpowering. It also feels branded and unique but again, not overly so. Definitely curious to see which one performs best!

natalieworth commented 3 years ago

Agree! I like 1 and 4 @WillatMozFdn @kristinashu

If you also wanted another option (if it's not too much)—we also have this more illustrated piece.

I believe though the original feedback from the team was that images of people perform better, so I'll defer to you, Will.

Thanks again! :)

WillatMozFdn commented 3 years ago

yeah, thanks all! Let's proceed to testing versions 1 and 4 against the current control at the next opportunity, does that sound like a plan?

I don't know exactly when that will be, though. Jen and I are cooking up a fundraiser email for about 2nd week of April; those aren't specifically for an advocacy audience, but would definitely provide us with some good data.

Also, some of this depends on when the Torchbox crew can investigate and fix some issues we found with their A/B testing tool. If they can get that up and running soon, that will help us get this in the testing queue faster, for sure.

natalieworth commented 3 years ago

Amazing! Thanks very much Will! I'm going to close this ticket for now, but if anything comes up, feel free to ping me directly.

MozillaFoundation / Design

Banner graphic for advocacy's donate page #495