New Add-ons manager promotional banners

RESOLVED FIXED

Status

Marketing
Design
RESOLVED FIXED
8 years ago
7 years ago

People

(Reporter: Dan Horner, Assigned: Sean Martell)

Tracking

Details

Attachments

(2 attachments)

(Reporter)

Description

8 years ago
We need five new banners, with dimensions of 854x274 pixels. These banners will sit in the center of the new add-ons manager, on a carousel. In the future, we will change the add-ons / personas listed in each banner, so please design with this in mind (add-ons should be easy to swap in and out).

The banners required are as follows:

1. Starter Pack

Intro text: First time with Add-ons? Not to worry, we’ve chosen three to get you started. Once you’ve tried them you can add more on the left hand side.

Design: Row of icons:  Yoono, Invisible Hand, IM Translator (all with + Add to Firefox button, with text below each:

Yoono manages all social media in a tidy sidebar
Shop online and save with Invisible Hand
Enjoy real-time translation with ImTranslator

See treatment on this page under "Add-ons": http://mozilla.seanmartell.com/engagement/mocodotcom/customize_02.jpg

2. Featured.

Intro text: Mozilla’s Pick of the month!
Headline: This month: Simple Timer + Clocks

Body text: Tick-tock! Count down, up and plan ahead with Simple Timer + Clocks: Track time in locations world-wide
CTA: Add to Firefox button
Design: Use these screenshots:
- http://rockyourfirefox.com/rockyourfirefox_content/uploads/2011/01/Featured-Image9-672x75.png
- http://rockyourfirefox.com/rockyourfirefox_content/uploads/2011/01/Clock.png

3. Firefox 4 Collection

Intro text: Firefox 4 Collection
headline Text: We've chosen 10 add-ons that are great for use with Firefox 4.
Design: The final 10 add-ons have not yet been chosen, please create a placeholder for them with a row of 10 icons, each with a Add to Firefox button

4. Mobile

Intro text: Take your add-ons mobile!

Body Text: Mobile add-ons let your personalize Firefox on the go. Visit firefox.com/m on your mobile to download, then install add-ons in the mobile Add-on manager.
CTA: Get add-ons made for mobile (https://addons.mozilla.org/en-US/mobile/?browse=featured)

5. Personas

Headline Text: Add Style with Personas
Body Text: Make Firefox match your style! Choose from thousands of Personas designed by users areound the world. With a single click you can dress up your browser however you want.

Rollover to try, click to apply!
6 Persona examples from Personalization product page
See all 150,000+

Please see Personas section of personalisation page: http://mozilla.seanmartell.com/engagement/mocodotcom/customize_02.jpg

Comment 1

8 years ago
Lee, this is pretty high-priority work, so as soon as you're finished with the Fx4 pages then jump over to this one. 

Dan, can you send Lee any relevant screenshots? That'd be a big big help as well.
Assignee: tshahian → ltom
(Reporter)

Comment 2

8 years ago
Created attachment 510690 [details]
Rock Your Firefox example banner
(Reporter)

Comment 3

8 years ago
Hi John/Lee

I've attached an example banner in the correct proportions, I've also listed links with designs which should be copied.

We will need to talk this through - let me know if this afternoon (3.30 onwards) is good for you.

Thanks

Dan

Comment 4

8 years ago
I can Skype in after 3:30pm too.
(Reporter)

Comment 5

8 years ago
Few changes:

1. Starter Pack

Intro text: First time with Add-ons? Not to worry, we’ve chosen three for you to download to get you started.

Design: Row of icons:  Yoono, Invisible Hand, IM Translator (all are clickable

Yoono manages all social media in a tidy sidebar
Shop online and save with Invisible Hand
Enjoy real-time translation with ImTranslator

See treatment on this page under "Add-ons":
http://mozilla.seanmartell.com/engagement/mocodotcom/customize_02.jpg

2. Featured.

Intro text: Mozilla’s Pick of the month!
Headline: This month: Simple Timer + Clocks

Body text: Tick-tock! Count down, up and plan ahead with Simple Timer + Clocks:
Track time in locations world-wide
CTA: Add to Firefox button
Design: Use these screenshots:
-
http://rockyourfirefox.com/rockyourfirefox_content/uploads/2011/01/Featured-Image9-672x75.png
- http://rockyourfirefox.com/rockyourfirefox_content/uploads/2011/01/Clock.png

3. Firefox 4 Collection

Intro text: Firefox 4 Collection
headline Text: We've chosen add-ons that are great for use with Firefox 4.
Design: The final 10 add-ons have not yet been chosen, please create a
placeholder for them with a row of 6 icons (these will be randomly populated), each with a Add to Firefox button.

4. Mobile

Intro text: Take your add-ons mobile!

Body Text: Mobile add-ons let your personalize Firefox on the go. Visit
firefox.com/m on your mobile to download, then install add-ons in the mobile
Add-on manager.
CTA: Get add-ons made for mobile
(https://addons.mozilla.org/en-US/mobile/?browse=featured)

5. Personas

Headline Text: St Patricks Day Personas
Subtitle: Dress your browser up in St. Patrick’s Day style.

Include the top 3 most popular from: http://www.getpersonas.com/en-US/gallery/All/search?p=st.+patrick%27s&search.x=12&search.y=7

Rollover to try, click to apply!
(Reporter)

Comment 6

8 years ago
> I can Skype in after 3:30pm too.

Great - will send you and Justin an invite.
(Reporter)

Comment 7

8 years ago
Sorry, one final change to 2. - Featured:

Intro text: Mozilla's pick of the month!
Headline: This month: Copy ShortURL

Body text: Copy ChortURL lets you quickly and easily create a short URL for pages you visit on the web
CTA: Add to Firefox button
Design: Pull image from this page - https://addons.mozilla.org/en-US/firefox/addon/copy-shorturl/



https://addons.mozilla.org/en-US/firefox/addon/copy-shorturl/

Comment 8

7 years ago
Hey guys,
Here's a pass at the Add-ons banners 1-5:
http://intothefuzz.com/leetom/Addons/BANNERS/JPG/

Let me know what you think.
(Reporter)

Comment 9

7 years ago
Thanks Lee.

Feedback below:

addons_banner_2.jpg - any way we can make this seem a bit more like a 'winning' add-on; ie with an illustration of spotlights on the title, or something extra which would denote a party/celebration?

addons_banner_3.jpg - can we link this back to Firefox 4 somehow - is there any way we can incorporate a graphic to illustrate Ff 4 alongside (or combined with) the collections icon?

addons_banner_4.jpg - similarly can we make this stand out a bit more with a mobile phone illustration?

Will send you final text tomorrow.

Comment 10

7 years ago
Overall I like the look of these, but agree with Dan's feedback from comment #9. 

Also, we should be consistent with how we capitalize the headlines. I'd recommend using headline caps, so it would be something like "First Time with Add-ons?" or "Mozilla's Pick of the Month!". And, there should be an apostrophe in St. Patrick's Day.

Lastly, shouldn't we show 10 add-ons in the collections one that talks about 10 add-ons in the text?
(Reporter)

Comment 11

7 years ago
Hey John - will send in better copy, what's there at the moment is a bit lame, and totally agree on the consistency.

I'd like to show all 10 add-ons if we can; but conscious it might look a little bit crowded. The compromise was to go with 6 randomly selected from the 10 each time it's loaded, but Lee - if you think you can fit them all stylishly, this is still preferable.
(Reporter)

Comment 12

7 years ago
* should clarify that the lame part was my doing - was planning to send in better copy tomorrow morn.

Comment 13

7 years ago
Right. I can see the need for more pizazz per comment #9. I'll add some...

Re: Comment #11, I think that anymore than the 6 Persona thumbnails here, will start to get really cramped in that space. If the interactive sample skinning appears when user rolls over the thumbs, is the screenshot on the left side necessary? If not, we could probably accommodate more thumbs in it's place.
Hi Lee,

Thanks for the first mocks. I have a number of comments.

On the overall style, I'm looking for something a bit more like the Apple App Store or Chrome Web Store... we want this to be eye-catching and very pretty, similar to the Rock Your Firefox promo already there. The gray stripes aren't really doing it for me.

Promo 1 - Would prefer a style more like the existing collection promo (http://grab.by/8UP6) but more spruced up with beginner/getting started feel. Let's remove the install buttons and keep the add-on display style consistent throughout the page.

Promo 3 - Firefox 4. We can't display icons and half an install button. This should be more similar to the existing collection promo (http://grab.by/8UP6) but with more color and themed to Firefox 4. Let's strip the install buttons and go with 3 at a time.

Promo 4 - Mobile. We have a bunch of existing mobile illustrations -- I can think of the flying guy, the mobile browsing lunar poster, browsing without borders, etc. Would prefer to use something like that. The copy here also needs some changes, but I'll talk with Dan about that.

Promo 5 - St. Patrick's Day. It's a bit weird for the browser screenshot to start fading so far from anything else. (and the screenshot is of Firefox 3.6 which doesn't show full-chrome Personas). 

Also, it'd be really helpful to see these in context with the rest of the discovery pane. Since you don't have Firefox 4, I'll attach a screenshot of it to plop them in after this comment.

Dan, can you please send me and Mayumi the copy before you post it here?

Thanks everyone.
Created attachment 511916 [details]
full discovery pane screenshot

Comment 16

7 years ago
Hi Dan, just wanted to check back in with you to see about sending me revised copy. I'm going to be going back over these promos today. Thanks!

L

Comment 17

7 years ago
Lee is out on paternity leave a little earlier than expected, so moving this over to Sean.

Dan, please do post that new copy here as soon as you have it. Thanks!
Assignee: ltom → smartell
(Assignee)

Comment 18

7 years ago
- Three is good number of add-ons per promo. So 3 instead of 6 add-ons for the Firefox 4 collection?

- not saying we need to redo the boxes on the rest of the page, I'm wondering if since the real estate is so constrained in the promo area if we should be binding ourselves to the same interaction element.  I think since it is a promo section we can have some flexibility here.

- As for "Mozilla's Pick of the Month", there is little to no artwork to work with for Copy ShortURL and we should build the layout keeping in mind that some picks may not have any supporting screenshots or additional artwork.  It looks very sparse with the copy given, so we may have to come up with some original artwork for that promo.
(Assignee)

Comment 19

7 years ago
Ahoy hoy, 

So I've been playing around, trying to come to a balance twixt readable content and background artwork. Initial results as follows:

http://mozilla.seanmartell.com/engagement/addons-pane-promoz.jpg

That isn't all of them, but I wanted to share now instead of churning everything out first.

Keep in mind that this space has a variable width etc, so some of the content needs to sit on the boxes so it doesn't conflict with the glam backgrounds.

Be gentle.
Hey Sean, those look awesome! Apart from copy tweaks which we can do in implementation, the only change I'd suggest is that the eyeballs look a bit creepy when you can't tell they're attached to something.
Hi Sean,

I noticed you made some more improvements on Friday. These look ready to go to me (although I'd still love to do something about the eyeballs... I've gotten comments on them from others I've shown it to too)

Can we finish up and start implementing the PSDs?

Thanks!
(Assignee)

Comment 22

7 years ago
Sure thing.

I'll finish up (remove the eyeballs, clean up the layersets) and post the PSD link here in the morn.
(Assignee)

Comment 23

7 years ago
BREAKING NEWS: Add-ons Promo Mockups Complete, Eyes Removed

(TORONTO,CANADA) In a bold act of finalizing artwork, Sean Martell finished the mockups for the Add-ons manager promotional banners. Mr. Martell was quoted as saying, "Yes, I'm done." More at 11.

PSD: mozilla.seanmartell.com/addons/addon-pane-promoz.psd

Comment 24

7 years ago
That's possibly the best bug comment ever.
Thanks Sean!
Status: NEW → RESOLVED
Last Resolved: 7 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.