1039835 - Missing Affiliate Banners and Previews

Status: ASSIGNED

(Marketing :: Design, task)

Description

[ekariv]

>>Project/Request Title:
Missing Affiliate Banners and Previews

>>Project Overview:
Affiliates is Mozilla’s repository of banners and graphics that Mozillians can use to spread the Mozilla mission.

In order for Affiliates Banners to have a preview on the affiliates site, there must be a 125 x 125px version of that banner. While most banners have this version, many are missing 125 x 125px versions and thus have no preview.

This is a high priority bug because when users (or employees) look at the site with missing banner previews, it looks broken and unusable. This has caught the attention of some senior executives at Mozilla who would really like this fixed ASAP.

Thank you!


>> Creative Help Needed:
Copy:    No 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
The graphics we need are listed below:

Upgrade Banner (125 x 125px)
3.6 Upgrade Banner (125 x 125px)
Student Ambassadors Banner (125 x 125px)
Download Aurora Banner (125 x 125px)
Firefox Marketplace Banner (125 x 125px)
Plugin Checker Banner (125 x 125px)

>>CTA and Design:
If you log in to affiliates using persona, you can see all of the banners here: https://affiliates.mozilla.org/en-US/generator/categories/

When you click a category you’ll see if any banners from that category are missing (all the missing ones are also listed above).

For example, if you click “Firefox for Desktop” then you’ll see that Upgrade, 3.6 Upgrade, and Student Ambassadors are missing previews. If you click on each one you can “create” a banner and see what the current version of the banner looks like and then modify that version to become 125 x 125 px.

>>Creative Due Date:
2014-08-01

>>Launch Date:
2014-08-08

>>Mozilla Goal:
Million Mozillians

>>Points of Contact:
[e-mail], [e-mail], [e-mail]

Comment 1

[ekariv]

Reassigning this bug to the awesome community member, Elio Qoshi.

Comment 2

[Elio Qoshi [:Elio]]

Thanks Eli! Will report back on the progress by Thursday (24th July)

Comment 3

[Elio Qoshi [:Elio]]

Attachment: FSA & 3.6 Upgrades Banners

So, I finished the FSA and 3.6 upgrades banners. Latters had the old logo so I updated that too. I also included the 300x300 versions if needed.
I was looking at the Upgrades Banners and they were either very wide or very tall, so it wouldn't make sense creating 125x125 versions of them, however I could add blank space on them to the sides, which would make them unusable for usage as actuall banners I guess (i.e. they would be only used for previews)

Tell me if they are okay.

Comment 4

[Elio Qoshi [:Elio]]

Attachment: Marketplace.png

Marketplace 125x125 banner.
Again only suggested for preview usage. 
I only added white space to the sides here, as it's not supposed to be squareish

Comment 5

[John Slater]

Thanks Elio - I really appreciate your jumping in on this!

My concern is that the elements on the 125x125 banners look *really* small. The info on the FSA one, for example, is basically unreadable.

Eli, could you suggest a way to boil down the content to only the most essential elements so we can focus on those? We'll need to do some pruning for the smaller sizes. The FSA one could just be the logo shield, for example.

Comment 6

[ekariv]

Good call John. I'll go through each one and pick out the most essential elements.

Comment 7

[ekariv]

Upgrade 
Mandatory "Upgrade to Firefox Here” + logo
Good, but not mandatory: put the web on fast forward)

Upgrade 3.6 (I like the version already made and posted above) -
Mandatory: Different by design and the logo
Good, but not mandatory: Mozilla Firefox (writing)

Firefox Student Ambassadors:
Mandatory: FSA and the logo
Good, but not mandatory: Download Firefox and Search. Study. Surf.
Not mandatory: Mozilla Logo can be much, much smaller

Download Aurora
Mandatory: Get Firefox Aurora for Android + logo
Good, but not mandatory: Shape the future of firefox 

Firefox Market Place
Mandatory: Logo and get it in the firefox marketplace

Plugins
Mandatory: Add plugins to your routine
Good, but not mandatory: The above text (definitely would like to keep this if possible)

Comment 8

[John Slater]

Nice, thanks Eli.

Comment 9

[Elio Qoshi [:Elio]]

Thank you John and Eli!
This actually gives me way more freedom creating the banners than recreating them, saves me some time also.
I will see how to remove unreadable elements without making the banner unusable ( so it doesn't just serve as previews)

Comment 10

[Elio Qoshi [:Elio]]

Attachment: Marketplace+ 3.6 Upgrades + FSA Banners

Here are the new banners for Marketplace,FSA and 3.6 Upgrades.
They include all proper 125x125 banners, also useable as actually banners. I included also 300x300 versions for 3.6 Upgrades and FSA if needed.
Marketplace comes also in black and orange variations.
3.6 Upgrades has its logo also updated.

Working on the others now

Comment 11

[Elio Qoshi [:Elio]]

Attachment: Plugins+Aurora+Upgrade.zip

Here are the remaining banners.
Plugins Checker, Aurora ( I only updated it with the new logo, anything else wrong with it?)
Upgrade Firefox

Let me know if they work!

Comment 12

[ekariv]

Edits discussed with Elio:

1) Aurora has to be for Android (not desktop)

2) Checking on if FSA is ok without the 'Firefox Student Ambassadors' text

3) Anybody have thoughts on the 'Upgrade Firefox' banner?

Comment 13

[John Slater]

Thanks Elio!

Quick thoughts from me, in addition to Eli's above:
- for the marketplace one, let's use the same font for FIREFOX that we do for MARKETPLACE (not the wordmark, in other words)
- I don't think either of the upgrade ones is quite there yet. For general Upgrade Firefox one, it's problematic that we're lacking both the Firefox logo and Firefox colors, and the 3.6 one still feels busy to me. Would recommend that we combine both of these into a single asset...could we go with something simple like the Firefox logo on a blue, rounded corners square background and a bit of copy on it? Eli, can you advise as to what that copy should be?

Comment 14

[Elio Qoshi [:Elio]]

Attachment: Aurora Android.zip

Here are the updated 125x125 and 300x250 Aurora for Android banners with updated logo

Comment 15

[Elio Qoshi [:Elio]]

John thanks for the input!

- The original banner which I based it on uses the "Meta" typeface for Firefox, instead of Open Sans like you suggest, I just kept it this way, how should we decide?
https://affiliates.mozilla.org/en-US/generator/image_banners/15/customize/

- I agree with thaz. It's a bit difficult having no source files at all and fiddling around with Pixels in Photoshop :)
I'm looking into that now!

Comment 16

[ekariv]

Re: Copy on that banner - I think it should be "Upgrade -your- Firefox".

Comment 17

[Elio Qoshi [:Elio]]

Attachment: New Upgrade.zip

I did those 4 banners and merged both banners as John suggested.
These are probably not consistent, however there is not much I can do without the source files.
What do you think?

Comment 18

[John Slater]

Those look nice...great work!

Thought: what if you put 'Firefox' in the little banner instead of 'your'? That's the word to emphasize.

Comment 19

[Elio Qoshi [:Elio]]

Thanks!
I wanted to keep the text consistent, as the other banners had the same copy and "your" was highlighted with the banner. I can easily do that change though if you think that's justified :)

What do you think about the Marketplace banner also? You told me to write "Firefox" in Open Sans, however the original existing banners used the original Firefox Wordmark in Meta.
If I change it to Open Sans, I guess the older ones should be change too. ( I can do that of course)

Comment 20

[John Slater]

(In reply to Elio Qoshi  [:Elio] from comment #19)
> What do you think about the Marketplace banner also? You told me to write
> "Firefox" in Open Sans, however the original existing banners used the
> original Firefox Wordmark in Meta.
> If I change it to Open Sans, I guess the older ones should be change too. (
> I can do that of course)

Yes, let's try it in Open Sans and see how that looks. Thanks!

Comment 21

[Elio Qoshi [:Elio]]

Attachment: Marketplace

Thanks John!

Here are the new Marketplace Banners.
I didn't make any 129x45 version as 116x40 is too similar.
I used Open Sans for "FIREFOX" and wrote it in uppercase.
Black and Orange versions included.

Let me know if they are okay!

Comment 22

[John Slater]

Thanks Elio. These are looking good.

That said, one thing that's been nagging me about this a bit is that we're mainly updating 2011-era graphics here and our visual styles have evolved a bit since then. Nothing you've done is wrong - far from it, in fact - but I want to make sure we take this opportunity to bring these assets into the modern era.

Eli & Elio, if this works for your schedule I propose looping in Ty Flanagan from my team to help advise on some of this in greater detail than I'm able to get to. Ty is on vacation until Tuesday, 8/5 but should be able to weigh in after that. His feedback will be helpful, and he may be able to provide some working files or other assets you can use as well.

How does that sound?

Comment 23

[Osmose [:osmose, :mkelly]]

(In reply to John Slater from comment #22)
> Thanks Elio. These are looking good.
> 
> That said, one thing that's been nagging me about this a bit is that we're
> mainly updating 2011-era graphics here and our visual styles have evolved a
> bit since then. Nothing you've done is wrong - far from it, in fact - but I
> want to make sure we take this opportunity to bring these assets into the
> modern era.

That's a great idea! It's also not mutually exclusive to calling these done, resolving this bug, putting the new variations up, and including "visual style refresh" in the next brief for Affiliates.

We've received feedback that our site looks broken with missing previews, and we need these variations to provide previews for the banners. If you approve what Elio's done (which it sounds like you do), then I propose we put these up on the site so that the previews are no longer empty. Updating the visual style for these banners is great, but I don't want to delay making the site look un-broken for that.

(Just my two cents, Eli/Jess Osorio have the final say here.)

Comment 24

[Elio Qoshi [:Elio]]

And I told Eli that we will need to overhaul all this at some point. :)
I basically was fixing waterleakings, but the watertubes are still rusty themself, so we need new watertubes (sorry for the absurd comparison).

From what I understood is that John agrees to get these uploaded, yet in the longer run, these all need to get remaked from scratch, not only visually, but also the copy,sizes and similar ( heck we use the Georgia Font still?! I have only seen it on the Thunderbird website lately)

So I guess we should make a list with all the product banners we needed, which (standartized) banner sizes are fitting for them and write the needed copy for them in a neatly organized way, and once we agree on this, I (or anyone else if they want to) can start creating the actual banners.
In that way I don't need to go back to fixing leaking tubes :)

Comment 25

[John Slater]

That plan sounds great - I agree with what mkelly and Elio said in comment #24 and #25.

Just so I know, who will be making the list of new designs that are needed and filing that new bug?

Comment 26

[ekariv]

Ok - all banners uploaded (woohoo!)

Should we wait for Ty's feedback before making any decisions about which new designs are needed?

Comment 27

[John Slater]

(In reply to ekariv from comment #26)
> Ok - all banners uploaded (woohoo!)

Nice!
 
> Should we wait for Ty's feedback before making any decisions about which new
> designs are needed?

You could go ahead and file the bug (copy Ty), and the first task could be to evaluate which banners need new designs.

Comment 28

[Ty Flanagan]

Hi all,


A few things:

1. Thanks Elio for your time and work on getting the banners done.

2. All these banners really do need some new love. I think its a perfect time to start looking at a redesign of them.

3. For now though, since we only need the 125x125 banners, I'm only going to review those. 

There are some banners I feel still need some additional work due to the copy not being legible enough (e.g. Marketplace, New upgrade), and some banners needing some more attention to detail (e.g. 3.6 Upgrade, Upgrade)

----------

Marketplace 125x125 - (1) The copy treatment is really tough on the eyes, especially "Get it in the". Consider creating a second  layer of copy to place on top to help "thicken" it up to make it more readable. Try not to rely only on the anti-aliasing methods within Photoshop. (2) The first line of copy "Get it on the Firefox" should not be longer than the word "MARKETPLACE". Please make sure it stays aligned with both the beginning and end of "MARKETPLACE". (3) Lastly, please double-check that both the orange 125x125 and black 125x125 background boxes are pixel perfect to avoid getting blurred edges.

----------

New upgrade 125x125 - (1) Same issue as above. Best to play with 2 layers of copy to achieve the right look versus relying on the "sharp" anti-aliasing method in Photoshop. Also, please ensure that the drop shadow on the text is set at 90º, with a distance and size of "1" to better match with the Firefox Logo. The Opacity will need to be played with considering its on a dark blue background. (2) The "Ribbon" element just doesnt feel right on this banner either. I'd consider looking for a different approach with the copy instead of including the ribbon to highlight "your". (3) The drop shadow on the blue rounded-corner box is missing. It needs a black dropshadow (20% opacity, distance 1, size 0). (4) Also needs an inner shadow - black, 30% opacity, distance of 2-4 depending on banner size, size 0. Lastly, please double-check that the blue background box is pixel perfect to avoid any blurred edges.

-----------

3.6 Upgrade 125x125 - (1) "Get up" & "upgrade your Firefox" need some more readability love :). I understand you didnt have the PSDs to work from, fortunately they can be found on the assets repo here: https://assets.mozilla.org/Graphics/Affiliates/3.6%20Upgrade/  (2) The added spacing you created below the raised tag is fine, but have the raised tag shifted down 10 or so pixels to give more space/breathing room between the "Get up to Speed" copy and the raised tag. 

------------

Upgrade 125x125 - (1) IMPORTANT - We need look at a different option other than just the raised tag ESPECIALLY if its being offered as one of the banners within the affiliates. It's probably fine to use as a preview, but not as a banner option for affiliates. Theres no supportive copy or Firefox Logo here at all. (2) The raised tag now looks like a clip. It also looks like the edges are not as clean as they should be. Was this cut out from a larger sized banner? Either way it needs to be changed. We can provide a PSD for this design if need be.

------------

Aurora 125x125 - Is this preview definitely using the latest Firefox Aurora logo?

------------

I think that about covers it for these.

Thanks

Ty

Comment 29

[Elio Qoshi [:Elio]]

I still need more guidelines and rules to make this work, so lets keep the discussions going until we can decide on what banners need doing, how, what copy, what colors, what categories; and so on.
(regarding the needinfo flag)

Comment 30

[ekariv]

I think the general sentiment is that we're doing just the 125 x 125 banners (in English) for now (easiest task to do immediately) and that we need them modified with Ty's specific instructions.

Comment 31

[Elio Qoshi [:Elio]]

Okay, bookmarking this then, will have a look this week and see what I can do
(very busy week indeed)

Comment 32

[Matej Novak [:matej]]

(In reply to ekariv from comment #30)
> I think the general sentiment is that we're doing just the 125 x 125 banners
> (in English) for now (easiest task to do immediately) and that we need them
> modified with Ty's specific instructions.

+1 — let's just finish what's already in progress (and that looks broken on the site) for now.

Thanks.