925904 - [Lightbeam] Moz.org Banner

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Lizz Noonan - she/her (:lizzn)]

>>Project/Request Title:
[Lightbeam] Moz.org Banner

>>Project Overview:
Lightbeam - the add-on formerly known as Collusion - is launching the 1.0 version and there's going to be a brand and PR campaign around the launch, including in-channel promotion, such as snippet, FB, Twitter, etc.

Creative Brief: https://docs.google.com/a/mozilla.com/document/d/1JBcnUze37h8qzgyT1Nk6zuf5br6oCxKzsEPGSnBTDpY/edit

Creative direction: Will use the Lightbeam logo and a CTA or if we think it works here, the stat we're using for FB (TBD). Could use screenshot of the add-on or other visual from the campaign/add-on. We'll need to localize any copy. 

CTA: Download Lightbeam for a better understanding of how your browsing data is used (am consulting Matej for official CTA)

Click-through link will direct to the Lightbeam landing page (URL TBD). I will add in the logo and URL as soon as I have it. 

>>Creative Specs & Deliverables:
Standard moz.org banner size & format

>>Launch Date:
2013-10-28

>>Creative Due Date:
2013-10-21

>>Mozilla Goal:
Firefox Deskop

>>Points of Contact:
[e-mail]

Comment 1

[Lizz Noonan - she/her (:lizzn)]

John - what locales are we targeting (what l10n needs to happen for this banner)?

I was thinking we may want to include a "learn more" type button on this banner, as well.

Comment 2

[Lizz Noonan - she/her (:lizzn)]

John - scratch the l10n question. I'm following up with Alina to find out if the add-on will be localized and if so, which locales.

Comment 3

[Matej Novak [:matej]]

This one will also go to Troy, but I'll let Jennifer route it accordingly.

Comment 4

[Lizz Noonan - she/her (:lizzn)]

L10N Update: EN only, no l10n needed :)

Comment 5

[Jennifer Balaco]

Thanks, Matej. 

Troy, assigning this over to you to give input on the CTA/copy. Would it be possible to have this final early next week to leave a few days for the designer? Once we have the copy and the logo, I'll assign over to a designer to finish up.

Comment 6

[Jennifer Bertsch [:jbertsch]]

Hi - We should plan on making the homepage banner in the style of the new page:  https://www.mozilla.org/en-US/?v=2

Comment 7

[Troy Palmer]

Thanks Jennifer,

I can probably have it for Wednesday. Monday is a holiday up here. 

Hope that works.

Comment 8

[Craig Cook (:craigcook)]

(In reply to Troy Palmer from comment #7)

Ahoy there! Just offering some guidance and specs on the layout as you head into the design phase.

The new home page has a set of sliding accordion panels rather than a carousel of static banners, so designing each panel is more than just a single background image. Each one comprises a few layers that can move and animate somewhat independently as the panel expands and contracts. 

In wide viewports (desktop screens and larger tablets) it's a horizontal accordion, but for narrow viewports (mobile phones and smaller tablets) it switches to a vertical accordion, and each panel layout changes for the new orientation. Visit https://www.mozilla.org/en-US/?v=2 and resize your browser window to see how it shifts and changes for different sized devices.

The panels have three basic states: "resting", "expanded", and "contracted". We can shift elements around for each of these states but we also need to plan for the animation in intermediate states, moving smoothly from contracted to expanded. Overall the design needs to be fluid enough to work when the exact dimensions are unknown, so avoid anything in that demands precise alignment of separate elements.

In the horizontal accordion, resting panels are each 25% of the total width, and expanded panel is about 64% of the total width, and the remaining contracted panels are each about 12% of the total width. At full size (in viewports wide enough) that total width is about 970px, but slightly smaller viewports (aimed mainly at tablets and netbooks) the total width is about 725px.

In the vertical accordion, each resting panel is about 65px tall, the expanded panel is about 350px tall, and contracted panels are about 40px tall. The width switches between 420px and 300px, to accommodate both landscape and portrait orientations of mobile devices. The vertical panels feature smaller images, and they move vertically as the panel expands/contracts.

The general motif we've established so far is for each panel to be dominated by a single primary image that shifts position as the panel opens or closes. The block of text fades into view as the panel reaches its full width, and that text block may have its own background (as seen on the current mozfest panel). Some panels feature a secondary logo as a heading above the text, but that's optional (the current MDN panel doesn't have a second logo).

Of course, my best advice is to just tinker with the page and see how all the panels move through the different sizes and states. When we've got the final design ready I'll need it in a layered Photoshop format so I can separate individual elements (with transparency) to layer onto the final web page. I don't necessarily need exact designs for all the different states, I'll mostly need the individual graphic components and a general sense of what you want it to look like in each state.

Hope this helps!

Comment 9

[Troy Palmer]

(In reply to Craig Cook (:craigcook) from comment #8)

Hey Craig

Thanks for the detailed info, but I'm not the designer for this project — just the writer. Good to have an understanding of how it all works though.

Comment 10

[Craig Cook (:craigcook)]

(In reply to Troy Palmer from comment #9)
> (In reply to Craig Cook (:craigcook) from comment #8)

> Thanks for the detailed info, but I'm not the designer for this project —
> just the writer. Good to have an understanding of how it all works though.

OH! I misunderstood, sorry. Well whenever this makes its way to design the comment is still there for posterity :)

Comment 11

[Jennifer Balaco]

Thanks, Troy. Tomorrow works. 

Craig, thanks for sharing more info on the new design. Do we also need to have the banner to fit the old carousel style? My understanding is that there might be two versions of moz.org currently. Please correct me if that's incorrect. Thanks!

Comment 12

[Jennifer Bertsch [:jbertsch]]

It is looking like we might need to make the banner for both homepage styles.  Is the live date for this banner Oct 25 or Nov 4?  That could make a difference (2 for Oct 25 but just one for Nov 4).  Thanks!

Comment 13

[Matej Novak [:matej]]

Which promo does this replace and which of the four pillars is it associated with?

Comment 14

[Lizz Noonan - she/her (:lizzn)]

Jen - New release date is Nov. 4. We can move the due date accordingly, if it would help.

Matej - This supports desktop. I will defer to John or Kristin, but logic would indicate to me that it should replace either Maker Party or Flicks, as those campaigns have ended. Does MoFo own the content space for the Maker Party banner or could we look at replacing it?

Comment 15

[Matej Novak [:matej]]

(In reply to Lizz Noonan from comment #14)
> Matej - This supports desktop. I will defer to John or Kristin, but logic
> would indicate to me that it should replace either Maker Party or Flicks, as
> those campaigns have ended. Does MoFo own the content space for the Maker
> Party banner or could we look at replacing it?

I don't think MoFo owns it per se, though we should strive to have a Foundation product or initiative on the page as much as possible.

We structured the four promos to follow the four pillars of Mozilla that Mitchell talked about at the Summit — build products, empower communities, teach & learn, shape environments — so this should fall under the one that makes most sense.

Lightbeam is a product, but it's also about learning and shaping environments. Not sure who makes the call, though.

Comment 16

[Jennifer Bertsch [:jbertsch]]

Here's the etherpad where I've been brainstorming about homepage content for the new design:
https://etherpad.mozilla.org/homepage-content-promo-planning 

I was thinking of putting Collusion into the second tile, replacing Fx OS, in the "we build great products" spot.

I host a monthly homepage content meeting that meets tomorrow and I am hoping to discuss it with that group.  I'll add you to the meeting, Lizz.

Here's the link to the new homepage design:  https://www.mozilla.org/en-US/?v=2

Comment 17

[Troy Palmer]

Hello all

Here's a link to my Google doc with options for the mozilla.org banner. I included separate copy for the collapsed and expanded states, so hopefully that works.

Let me know if there are any questions.

https://docs.google.com/document/d/1h40hzL1__YTnXoMUzEBpw_Bqt3ef-LgZrqA7gfxHNLk/edit?usp=sharing

Looking forward to your feedback.

Thanks,
Troy

Comment 18

[Matej Novak [:matej]]

These are great. I made a few comments in the gdoc. Thanks, Troy.

Comment 19

[Jennifer Balaco]

Thanks Troy + Matej! I'm going to assign this over to Matt to get started on design.

Comment 20

[Jennifer Bertsch [:jbertsch]]

Hi Jennifer B, Troy, Matej, and Matt-

We should plan on building out to homepage promo tiles for Nov 4:
1.  one for the existing homepage design
2.  one for the new homepage design at https://www.mozilla.org/en-US/?v=2

Thanks,
Jen

Comment 21

[Matej Novak [:matej]]

(In reply to Jennifer Bertsch [:jbertsch] from comment #20)
> Hi Jennifer B, Troy, Matej, and Matt-
> 
> We should plan on building out to homepage promo tiles for Nov 4:
> 1.  one for the existing homepage design
> 2.  one for the new homepage design at https://www.mozilla.org/en-US/?v=2

Sounds good. For the existing design, we just won't use the line for the collapsed state.

Looks like we still need some more feedback on copy, though. So far only I've made any comments on the gdoc. Which combination of text are we going with?

This would be my vote (changed to option 3 since option 2 says "tracking"):

[COLLAPSED STATE: HEADLINE]

Watch the watchers »


[EXPANDED STATE: HEADLINE + COPY]

See who’s watching you online

Shine a light on the third parties that are collecting data about your online activity.


[CTA]

Install the Lightbeam add-on »

Comment 22

[MT]

Attachment: Lightbeam_mozOrg.jpg

Hi guys, looks like copy is still being finalized, but I have gone ahead created a current and new style layout for the moz.org Lightbeam banner based on the latest copy.

Comment 23

[Matej Novak [:matej]]

Hey Matt,

That's looking good, but with the wordmark, it's pretty text heavy. Could we lose "Lightbeam for Firefox" and just use the logo as the visual for this banner? That would allow it to be a lot bigger and more visually impactful.

Seeing it in layout, I also wonder if we should shorten the headline. Maybe we could try "See who's watching you" or even "Watch the watchers" for this one.

Any objections?

Comment 24

[John Slater]

I'd prefer to keep the 'for Firefox' on there, as that's an important piece of info for the user to know.

Comment 25

[MT]

Attachment: Lightbeam_mozOrg_tileLayout_expanded.jpg

Comment 26

[MT]

Attachment: Lightbeam_mozOrg_tileLayout_resting.jpg

Comment 27

[Matej Novak [:matej]]

(In reply to John Slater from comment #24)
> I'd prefer to keep the 'for Firefox' on there, as that's an important piece
> of info for the user to know.

Could we downplay the wordmark then and make the logo bigger? We're giving a lot of real estate to the word "Lightbeam" vs. the copy that explains what it does or why it's important. In general, these banners don't tend to use big wordmarks like that. They're usually off in the corner somewhere.

Comment 28

[MT]

Matej, I can give it a try, but my reasoning is since it is a new product thought it would be fitting to keep the full logo and wordmark together at this point.

Comment 29

[MT]

Attachment: Lightbeam_mozOrg_v2.jpg

Something like this perhaps? Might need John or Sean to confirm the proper logo usage for this though.

Comment 30

[Sean Martell]

Hey all,

For a product relaunch, I much prefer keeping the logo+wordmark lockup intact since we're introducing the new branding. The initial concept was much closer to the direction I believe we should be going since this is a relaunch.

I think for the current homepage, the first concept is spot on. As for the new layout, I'd say keep the big logo and axe the wordmark at the top altogether. Since the new tiles restrict content more, we'll need to compromise and I think making the headline bigger is the way to go.

Comment 31

[Sean Martell]

That isn't me contradicting myself btw, just adapting to working with the space we have. :)

Comment 32

[John Slater]

+1, thanks.

Comment 33

[MT]

Attachment: Lightbeam_mozOrg.jpg

How about something like this for a compromise. Keeping the logo/wordmark intact but giving some more prominence to the headline copy.

Comment 34

[MT]

Attachment: Lightbeam_mozOrg.jpg

*lowercase 'w' on watchers.

Comment 35

[John Slater]

Looks good to me. Thanks!

Comment 36

[MT]

Attachment: Lightbeam_mozOrg_tileLayout_expanded.jpg

Updated expanded version of the new layout. Sean suggested to remove the wordmark at the top, although increasing the headline size won't be possible due to l10n. I have switched the headline to 'Watch the watchers' from 'See who's watching you online' to streamline it a bit since the space is pretty confined.

Comment 37

[Matej Novak [:matej]]

(In reply to MT from comment #36)
> Created attachment 819925 [details]
> Lightbeam_mozOrg_tileLayout_expanded.jpg
> 
> Updated expanded version of the new layout. Sean suggested to remove the
> wordmark at the top, although increasing the headline size won't be possible
> due to l10n. I have switched the headline to 'Watch the watchers' from 'See
> who's watching you online' to streamline it a bit since the space is pretty
> confined.

In this case we can't use "Watch the watchers" since that's on the collapsed state already, but let's shorten it to "See who's watching you"

Thanks.

Comment 38

[John Slater]

Looking good. Thanks guys!

Comment 39

[MT]

Attachment: Lightbeam_mozOrg_mobile_expanded.jpg

Comment 40

[MT]

Attachment: Lightbeam_mozOrg_mobile_resting.jpg

Comment 41

[Lizz Noonan - she/her (:lizzn)]

Hey Jen - do you guys have everything you need to get this implemented on your end? 

Thanks!
Lizz

Comment 42

[Craig Cook (:craigcook)]

(In reply to Lizz Noonan from comment #41)
> Hey Jen - do you guys have everything you need to get this implemented on
> your end? 

If the design and copy are final, I just need the assets in a layered PSD. Or even just the full logo in a high resolution with a transparent background (including the shadow), since it seems like the logo is the only graphic element.

Comment 43

[MT]

Hi Craig, 

Here's a link to the Lightbeam tile PSD. Inside includes the various key percentage layouts as well as a  vector logo and gradient grey background...should be everything you need, please let me know if I can provide anything else.

https://www.dropbox.com/s/vh8kzcav8z9bjs8/Lightbeam_mozOrg_tile.psd

Thanks,
Matt

Comment 44

[Jennifer Bertsch [:jbertsch]]

Thanks for the creative, all!

I'll file an implementation bug.