1140608 - MDN 10th Anniversary Mozilla HP Promo

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Ben (:bensternthal)]

Bug covers the design of the Mozilla.org HP tile for the MDN 10th Anniversary.

Comment 1

[Jennifer Bertsch [:jbertsch]]

+Mike who will coordinate implementation on the homepage.

Comment 2

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

Hey Jen/Mike - what spot will this go on? I want to give Matt design specs.

Comment 3

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

Hey Jen/Mike - what spot will this go on? I want to give Matt design specs.

Comment 4

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

Brief: https://docs.google.com/document/d/1qO7-la3TxUxN1W-qFiCnn18EqqWJ5tNU9gZ5MF7ZRgM/edit#

Schedule: https://docs.google.com/spreadsheets/d/12X41mVvJyy-l7O86V_lyYPGXG79t1G5VDQvbO3S-FM8/edit#gid=365264923

Wiki: https://wiki.mozilla.org/Engagement/Campaigns/MDN_Support/10_Anniversary

Design direction: Using same copy as MDN homepage tile (Bug 1172088), a moz.org homepage tile that drives to the 10th anniversary landing page. Should utilize campaign creative.

Comment 5

[Jennifer Bertsch [:jbertsch]]

This will replace Firefox Friends.

Comment 6

[Jennifer Bertsch [:jbertsch]]

What is the status of copy and design for this homepage promo?

Comment 7

[mternoway]

(In reply to Jennifer Bertsch [:jbertsch] from comment #6)
> What is the status of copy and design for this homepage promo?

Hey Jen, I have the design template setup and ready to go, once copy is finalized I can sub in and post the files for implementation. 

MT

Comment 8

[Jennifer Bertsch [:jbertsch]]

Hi other Jen B and Lizz-

Is there a separate bug for copy?  

Thx,
another Jen B

Comment 9

[Jennifer Balaco]

I don't think there is a separate copy bug. I do know that the copy is a little behind. Lizz should have a better update on when we can expect to get it.

Comment 10

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

There's not a separate copy bug - Ali, I know we were planning to use the campaign tagline with a CTA. Is that spun up yet? If not, can we provide ASAP? 

Thanks!
Lizz

Comment 11

[ali spivak]

Copy is "Celebrate 10 years of documenting your Web" with "your" in bold.

Comment 12

[Jennifer Bertsch [:jbertsch]]

(In reply to ali spivak from comment #11)
> Copy is "Celebrate 10 years of documenting your Web" with "your" in bold.

Hi Ali-

I think this copy is too long and we need two lines, one for the front of the promo tile and one for the roll over.

Take a look at the homepage to see current lengths and style.

Also, we don't bold.

Thx,
Jen

Comment 13

[ali spivak]

how about:

10 Years
of MDN

Rollover:
Documenting Your Web
Button: Help us Celebrate!

Comment 14

[Jennifer Bertsch [:jbertsch]]

(In reply to ali spivak from comment #13)
> how about:
> 
> 10 Years
> of MDN
> 
> Rollover:
> Documenting Your Web
> Button: Help us Celebrate!

Thanks, Ali!

Hi Matt - Could you please mock this up for us to see?  Thx!

Comment 15

[mternoway]

Attachment: mdn-10years_moz-tile_horizontal-large.gif

Hi all, I've attached an example of what the MDN 10 tile might look like on moz.org. These are pretty standardized so there isn't a lot of room for something unique. I've utilized the 10years logo as the main visual with Ali's copy. 

Thanks,
MT

Comment 16

[Jennifer Bertsch [:jbertsch]]

(In reply to mternoway from comment #15)
> Created attachment 8634763 [details]
> mdn-10years_moz-tile_horizontal-large.gif
> 
> Hi all, I've attached an example of what the MDN 10 tile might look like on
> moz.org. These are pretty standardized so there isn't a lot of room for
> something unique. I've utilized the 10years logo as the main visual with
> Ali's copy. 
> 
> Thanks,
> MT

Adding Tim to review.  Thanks all.

Comment 17

[Troy Palmer]

Hey folks

I've been asked to take a peek at the copy and I have a couple of options based on Ali's latest. Hope they can help.

option 1 (order is headline, rollover, cta)
Happy 10th, MDN!
Here’s to a decade of documenting your Web.
Help us celebrate »

option 2 (same note on order)
MDN turns 10!
Here’s to a decade of documenting your Web.
Celebrate with us »

The rollover lines should be okay for length, but let me know if they're not and I can provide another option.

Thanks,
Troy

Comment 18

[tmurray]

Since the logo incorporates MDN and 10 years, I'm not sure the headline needs to repeat this information. My hunch is that many visitors to Moz.org will not know what MDN stands for (and this 10th anniversary logo does not include the words "Mozilla Developer Network" found in the standard MDN logo lockup). For this reason, would we consider: 

Headline: Mozilla Developer Network 
Rollover: 10 years of documenting your Web. 
CTA: Celebrate with us >>

Thoughts on this approach?

Comment 19

[Jennifer Bertsch [:jbertsch]]

(In reply to mternoway from comment #15)
> Created attachment 8634763 [details]
> mdn-10years_moz-tile_horizontal-large.gif
> 
> Hi all, I've attached an example of what the MDN 10 tile might look like on
> moz.org. These are pretty standardized so there isn't a lot of room for
> something unique. I've utilized the 10years logo as the main visual with
> Ali's copy. 
> 
> Thanks,
> MT

Hi Matt-

One thought:  This is replacing the orange Firefox Friends spot, not Maker Party, so I don't think that blue will work so close to Dev edition.

Thx,
Jen

Comment 20

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

(In reply to tmurray from comment #18)
> Since the logo incorporates MDN and 10 years, I'm not sure the headline
> needs to repeat this information. My hunch is that many visitors to Moz.org
> will not know what MDN stands for (and this 10th anniversary logo does not
> include the words "Mozilla Developer Network" found in the standard MDN logo
> lockup). For this reason, would we consider: 
> 
> Headline: Mozilla Developer Network 
> Rollover: 10 years of documenting your Web. 
> CTA: Celebrate with us >>
> 
> Thoughts on this approach?

Sounds good to me. Ali, are you OK with this copy change?

Comment 21

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

Hey Jen, would you be OK with pushing the live date for this promo to Aug 1?

Comment 22

[mternoway]

Attachment: mdn-10years_moz-tile_horizontal-large.gif

Thanks Jen, I've updated the position of the MDN banner, as well as tweaked the blue to our darker blue palette option (commonly used with MDN). I think this gives greater contrast against its blue neighbour.

Comment 23

[Jennifer Bertsch [:jbertsch]]

(In reply to Lizz Noonan (:lizzn) from comment #21)
> Hey Jen, would you be OK with pushing the live date for this promo to Aug 1?

Hi Lizz-

We can work with any live date the team is ready for, however, I'll let Mike comment on our deadline for a Saturday, August 1 live date.

Thx,
Jen

Comment 24

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

(In reply to Jennifer Bertsch [:jbertsch] from comment #23)
> (In reply to Lizz Noonan (:lizzn) from comment #21)
> > Hey Jen, would you be OK with pushing the live date for this promo to Aug 1?
> 
> Hi Lizz-
> 
> We can work with any live date the team is ready for, however, I'll let Mike
> comment on our deadline for a Saturday, August 1 live date.
> 
> Thx,
> Jen

For some reason I thought the 1st was a Monday...

How about a live date of Monday, August 3?

Comment 25

[mternoway]

Attachment: mdn-10years_moz-tile_horizontal-large_v2.gif

I also want to propose this as an alternate option. I've utilized our dark grey as an option, I think this style fits into the feel of MDN and allows for a strong contrast against other tiles.

Comment 26

[Jennifer Bertsch [:jbertsch]]

(In reply to mternoway from comment #25)
> Created attachment 8635064 [details]
> mdn-10years_moz-tile_horizontal-large_v2.gif
> 
> I also want to propose this as an alternate option. I've utilized our dark
> grey as an option, I think this style fits into the feel of MDN and allows
> for a strong contrast against other tiles.

Thanks, Matt!  I like the dark grey.

Comment 27

[Mike Alexis [:malexis]]

Clearing my needinfo. We'll launch this on Aug 3

Comment 28

[Craig Cook (:craigcook)]

If everyone is happy with design and copy, can I get that graphic posted to bug 1173559?

Note that the word "years" in the graphic won't be localizable.

Comment 29

[Matej Novak [:matej]]

(In reply to Craig Cook (:craigcook) from comment #28)
> If everyone is happy with design and copy, can I get that graphic posted to
> bug 1173559?
> 
> Note that the word "years" in the graphic won't be localizable.

Should we consider an l10n version of the graphic without the word "years" in it?

Comment 30

[Craig Cook (:craigcook)]

(In reply to Matej Novak [:matej] from comment #29)

> Should we consider an l10n version of the graphic without the word "years"
> in it?

That might be preferable to showing the English text to non-English locales. The hover copy says "10 years of documenting your web" so I think the "MDN 10" logo still works without the "years" in it.

Comment 31

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

(In reply to Craig Cook (:craigcook) from comment #30)
> (In reply to Matej Novak [:matej] from comment #29)
> 
> > Should we consider an l10n version of the graphic without the word "years"
> > in it?
> 
> That might be preferable to showing the English text to non-English locales.
> The hover copy says "10 years of documenting your web" so I think the "MDN
> 10" logo still works without the "years" in it.

FYI the content on MDN will be in EN only.

Comment 32

[ali spivak]

I'm ok with removing the "years" from the home page promo graphic. We might get a few localized versions of the content, depending on our contributors.

Comment 33

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

Hey Matt! Could you post a version of the graphic without "years" in it? Thanks!

Comment 34

[tmurray]

The original rationale for having "years" in the logo was to avoid suggesting that we were releasing version 10 of MDN. 

Might an option be to provide the graphic as a raw file to those applicable locales so that they could replace "years" with "anos," "annees," "jahre," "वर्षों" etc. ?

Comment 35

[Matej Novak [:matej]]

(In reply to tmurray from comment #34)
> The original rationale for having "years" in the logo was to avoid
> suggesting that we were releasing version 10 of MDN. 
> 
> Might an option be to provide the graphic as a raw file to those applicable
> locales so that they could replace "years" with "anos," "annees," "jahre,"
> "वर्षों" etc. ?

Given the way the type is set, I would worry about handing the design over. Could we get the localized words and create the various versions?

Also, as Craig points out in comment 30, the accompanying text says "years," so maybe it's OK to not have it in the graphic for this execution?

Comment 36

[Craig Cook (:craigcook)]

Doing localized images is sort of a pain unless we limit it to just a few languages. Usually we push these promos live and let any locales that want to translate it do so at their convenience by wrapping it in an l10n tag. Localizing the images means we'd need to limit which locales can display the promo.

We could possibly make the "years" live text (and thus a translatable string) and style/position it so it looks like part of the image... that's a bit fiddly, but might still be preferable to creating lots of images.

The hover state does make it clear that this is an anniversary and not a version so I think we could be fine without the text in the logo. If we're concerned about confusing it with a version, the pre-hover headline could "Ten years" but then we'd probably want to change the hover state so it's less repetitive.

Comment 37

[Jennifer Bertsch [:jbertsch]]

I'd like to make the call that we just use the logo as original, since the hover state does offer further explanation and en-US is the primary audience.

I realize this isn't the most L10N-friendly solution, but it is the simplest given our time frame.

Going forward, could we please go back to trying to not include words in logos/images/

Comment 38

[Craig Cook (:craigcook)]

URL will be https://developer.mozilla.org/docs/MDN_at_ten

Comment 39

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

Thanks Jen and Craig. 

Tim, Ali, Jen - Did we settle on blue vs grey? 

Matt, once the file color is chosen, could you post the final design file so I can pass it along to Craig in bug 1173559?

Thanks! 
Lizz

Comment 40

[Craig Cook (:craigcook)]

I got the logo from bug 1140600 so I only need the final call on blue vs gray and I'm all set.

Comment 41

[tmurray]

Hi Guys, blue for MDN 10, grey for Developer Edition was where we landed. 

Matt will provide final design. 

Thanks, 
Tim

Comment 42

[mternoway]

Attachment: mdn-10years_moz-tile_horizontal-large_blue_off.png

Comment 43

[mternoway]

Attachment: mdn-10years_moz-tile_horizontal-large_blue_hover.png

Comment 44

[mternoway]

Attachment: fx-dev-edition_moz-tile_vertical-large_off.png

Comment 45

[mternoway]

Attachment: fx-dev-edition_moz-tile_vertical-large_hover.png

Comment 46

[Jennifer Bertsch [:jbertsch]]

(In reply to tmurray from comment #41)
> Hi Guys, blue for MDN 10, grey for Developer Edition was where we landed. 
> 
> Matt will provide final design. 
> 
> Thanks, 
> Tim

+1 let's ship it.  Thanks everyone!

Comment 47

[ali spivak]

agreed!