1051015 - Design Mozilla Gear banner for Mozilla.org homepage

Status: RESOLVED FIXED

(Websites :: Other, defect)

Description

[hannah:hkane]

Copy for contracted version: WEAR THE OPEN WEB
Copy for expanded version: 
 * Headline: Doing good (and wearing cool t-shirts) is part of our code
 * Secondary: Get your clothes, bags, hats, mugs, and more.
 * Call to action: Visit Mozilla Gear
 * Target: [gear store url]

Use approved logo and wordmark from https://bugzilla.mozilla.org/show_bug.cgi?id=998340

Comment 1

[hannah:hkane]

@Andrea - can you approve the copy/design choices above?

Comment 2

[Sabrina Ng [:sabrina]]

Attachment: mozillagear_mozbannermockups.jpg

mozilla.org banner mockups using logo and copy

Comment 3

[Jennifer Bertsch [:jbertsch]]

(In reply to Sabrina Ng [:sabrina] from comment #2)
> Created attachment 8472631 [details]
> mozillagear_mozbannermockups.jpg
> 
> mozilla.org banner mockups using logo and copy

Hi John/Matej-  Could you also please review?  Thx.

Comment 4

[Geoffrey MacDougall]

Hi All,

Is there a reason we're not using the Mozilla Gear logo Ty did?

Gustavo: Can you add it to this bug?

Thanks.

Comment 5

[Andrea Wood [:andreawood]]

I also think we should use the photographs from the photo shoot if possible. That's happening Tuesday the 19th. Not sure if the homepage banner specs disallow photos, but it would be super cool.

Also I think this is Ty's design? (the bag?)

Comment 6

[Andrea Wood [:andreawood]]

Comment on attachment 8472631 [details]
mozillagear_mozbannermockups.jpg

I'd like Jen, Hannah and I to give feedback to Sabrina on the initial draft before we pull in John and Geoffrey for final approval. I'm clearing "need infos" for now.

Comment 7

[Gustavo Jabbaz]

That's Ty's store logo. Geoffrey, maybe you are thinking of the clothing tag?

Comment 8

[hannah:hkane]

Personally, I think it would look a little weird to have a photo, since none of the other banners have photos. Jen - do you have a policy regarding that?

If Jen is ok with a photo, then we'll have to wait until the end of next week because we won't have final photos until then. (This is ok as the launch is likely to be delayed a bit due to unrelated issues.)

Comment 9

[Matej Novak [:matej]]

(In reply to Andrea Wood from comment #6)
> Comment on attachment 8472631 [details]
> mozillagear_mozbannermockups.jpg
> 
> I'd like Jen, Hannah and I to give feedback to Sabrina on the initial draft
> before we pull in John and Geoffrey for final approval. I'm clearing "need
> infos" for now.

Sure thing. Let us know when the design is ready for review.

In the meantime, I have some thoughts on copy:

• In the collapsed state, "Web" shouldn't be on its own on the second line. We should either force a break or change the copy (either longer or shorter). Maybe "Wear the Web"?

• On the expanded state, the headline is really long compared to the copy. Can we look at either shortening the headline or adding more detail to the text? Right now it looks quite unbalanced, which doesn't make it inviting to read. 

To be clear, I really like the headline, so I'd love to preserve it if possible. Maybe it's something like:

"Get your Mozilla clothes, bags, hats, mugs (and more) and help support our mission."

• No serial comma in the copy: "Get your clothes, bags, hats, mugs and more."

• This is really nitpicky, but would "hats" fall under "clothes"?

• Since this will essentially be an introduction to the store for most people, let's expand on the CTA so they know where they're going: "Visit the Mozilla Gear store »"

Thanks.

Comment 10

[Geoffrey MacDougall]

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

> Maybe "Wear the Web"?

+1

> • Since this will essentially be an introduction to the store for most
> people, let's expand on the CTA so they know where they're going: "Visit the
> Mozilla Gear store »"

We are not using the word 'store', as it creates complications.

Comment 11

[John Slater]

Hi all. Wanted to weigh in the tricky subject of photos vs no photos in the promos. Using a straightforward photo from the recent shoot seems off to me, as it won't stylistically match the other promos on the page which have historically been more graphic/illustrative. 

That said, I do realize that showing people wearing gear is the best way to raise awareness of and sell said gear, so I'm willing to be reasonable here. :) Also, the bag example shown above doesn't really work.

Mofo folks, can you try a few different options as to how to present this material? I wonder if putting a subtle tint, or some other visual treatment that alters the look, over the photo would help. Or could you perhaps use a photo of the gear itself on a colored background (like the other promo backgrounds) so it feels more in the same style? Just throwing out some ideas...I'm sure the best solutions will come from actually trying things out rather than me commenting in the bug.

Comment 12

[Andrea Wood [:andreawood]]

Here are the laydowns for next set of design iterations: https://www.dropbox.com/sh/ws33hvazz28tr3o/AAAvup1rFa7IXgio5y8YlnDsa

Comment 13

[Andrea Wood [:andreawood]]

Here is merch on-model with white background:
https://www.dropbox.com/sh/wh643z3jx5znhp0/AAAis8jfbo1d7SViPdWKex_Ya

Comment 14

[Jennifer Bertsch [:jbertsch]]

Assigning this one over to Ty.

With the redesign of the homepage Oct 15, the www.mozilla.org team will take on designing a Gear Store promo tile.

Comment 15

[John Slater]

What exactly is the ask for Ty here?

Comment 16

[Jennifer Bertsch [:jbertsch]]

To clarify - the gear store promo will launch with the homepage redesign on Oct 15

Comment 17

[Andrea Wood [:andreawood]]

Hi all -- just to clarify that because the time that the gear store banner will be live overlaps both the current homepage design and the new homepage design that we have to create 2 banners: 1) banner using current specs that will be live until the new homepage launches October 15 ; and 2) a new promotion using new specs for the new homepage design launching October 15. 

Bug for the current/old design is here: https://bugzilla.mozilla.org/show_bug.cgi?id=1051015 (led by StudioMofo)
Bug for the new design (1051015) led by Ty and Jen since they're quickly developing the new specs and they offered :)

Both are being developed concurrently.

Comment 18

[Andrea Wood [:andreawood]]

(In reply to Andrea Wood from comment #17)
> Hi all -- just to clarify that because the time that the gear store banner
> will be live overlaps both the current homepage design and the new homepage
> design that we have to create 2 banners: 1) banner using current specs that
> will be live until the new homepage launches October 15 ; and 2) a new
> promotion using new specs for the new homepage design launching October 15. 
> 
> Bug for the current/old design is here:
> https://bugzilla.mozilla.org/show_bug.cgi?id=1051015 (led by StudioMofo)
> Bug for the new design (1051015) led by Ty and Jen since they're quickly
> developing the new specs and they offered :)
> 
> Both are being developed concurrently.

Actually just realized I typed too fast. Jen and Ty -- can you create a separate bug for your design for the post-Oct redesign instead of conflating both in this one bug?

Comment 19

[Jennifer Bertsch [:jbertsch]]

Hi Andrea-

What day do you think the store might launch?

I think this was my not entirely articulate/forthcoming way of saying let's not bother designing a gear store banner for the current homepage design because due to the limited number of days that the old design and the store will overlap it probably isn't worth the LOE on your end plus it might be difficult for us to make time to get it live."

Is that OK?  Or is it super important to have it on the homepage on the launch day?

Thx,
Jen

Comment 20

[Sabrina Ng [:sabrina]]

Attachment: mozillagear_mozbannerpreview_illustration2.png

Updating the bug on progress of Mozilla Gear banner design as the discussion is being brought up:

After sharing this mockup (https://redpen.io/nbc02b236df7bc014e) I got feedback from Lee Tom and John Slater for:
COLLAPSED BANNER: to try an alternate treatment that is more zoomed in on 1 item like his quick mockup example: https://dl.dropboxusercontent.com/u/6858695/gear1.png
EXPANDED BANNER: to enlarge the shirt and add the gray mozilla T (both on a diagonal, not straight — and it’s OK if sleeves are off the edge)
NEW COPY: 
Collapsed: New Gear is Here >>
Expanded: [title] The Wait is Over
[body — same] The foxiest Mozilla and Firefox T-shirts, hoodies, mugs and more now found at gear.mozilla.org.
[link - same] Get Your Gear Now >>
 
I have attached the latest mock-up that incorporates the feedback. Andrea informed that the banner format will change for new homepage but we can repurpose the same illustration/background seen on this design made with the old homepage format in mind.

Comment 21

[Andrea Wood [:andreawood]]

(In reply to Jennifer Bertsch [:jbertsch] from comment #19)
> Hi Andrea-
> 
> What day do you think the store might launch?
> 
> I think this was my not entirely articulate/forthcoming way of saying let's
> not bother designing a gear store banner for the current homepage design
> because due to the limited number of days that the old design and the store
> will overlap it probably isn't worth the LOE on your end plus it might be
> difficult for us to make time to get it live."
> 

hi Jen, it's important to have the homepage banner live on launch day, and we've already spent a few weeks / rounds of review on the old design format... so i'd rather not trash it. That said I'm getting revised launch dates for the store, we are running into some security challenges with the site itself and don't know if those will be resolved in the next 7 days.
> Is that OK?  Or is it super important to have it on the homepage on the
> launch day?
> 
> Thx,
> Jen

Comment 22

[Geoffrey MacDougall]

Comment on attachment 8493870 [details]
mozillagear_mozbannerpreview_illustration2.png

Gtg

Comment 23

[Andrea Wood [:andreawood]]

See Geoffrey's official signoff (comment 22). This banner is approved.

Comment 24

[Matej Novak [:matej]]

Hi all,

Is it still possible to make any changes to the banner in comment 22? There are a few issues I'd like to address:

• Geoffrey, last week you mentioned that the banner had to allude to our mission and how buying gear helps that. Is that no longer the case?

• What's the rationale for putting the URL in the copy? It makes it look like there are two CTAs. If you think it's important to show the URL, I would recommend not making it clickable in the copy.

• The copy also feels like a sentence fragment. I would end it either "…and more are now at gear.mozilla.org" or "…and more are now available."

There are also a couple of small style things that need fixing:

• "T-shirts" needs a capital T

• remove comma after "mugs"

• "Get you gear now »" should be in sentence case

Let me know if you have any questions. Thanks.

Comment 25

[Geoffrey MacDougall]

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

> • Geoffrey, last week you mentioned that the banner had to allude to our
> mission and how buying gear helps that. Is that no longer the case?

Good catch. My oversight.

Yes; the "Get your gear now" CTA has to be something related to supporting the mission. This is for tax purposes.

Comment 26

[Matej Novak [:matej]]

(In reply to Geoffrey MacDougall from comment #25)
> (In reply to Matej Novak [:matej] from comment #24)
> 
> > • Geoffrey, last week you mentioned that the banner had to allude to our
> > mission and how buying gear helps that. Is that no longer the case?
> 
> Good catch. My oversight.
> 
> Yes; the "Get your gear now" CTA has to be something related to supporting
> the mission. This is for tax purposes.

I worry that if you put it in the CTA, you lose the "go buy it now" part of the message.

Could we put it in the copy instead?

"Help support our mission with the foxiest Mozilla and Firefox T-shirts, hoodies, mugs and more."

Comment 27

[Geoffrey MacDougall]

WFM. Just needs to be in there somewhere.

Comment 28

[Jennifer Bertsch [:jbertsch]]

Hi Andrea-

We'll get it live on whichever homepage is live at launch :)

Can you give us 2 business days advance notice?

Thx,
Jen

Comment 29

[Sabrina Ng [:sabrina]]

Attachment: bg-pixelfox.png

full background image for banner (I can help crop when dimensions are available for new moz.org banner) originally found here: https://mozorg.cdn.mozilla.net/media/img/firefox/desktop/bg-pixelfox.png

Comment 30

[Sabrina Ng [:sabrina]]

Attachment: mozillagear_collapsed_illustration.png

Collapsed Illustration: angled black mozilla heart tank top

Comment 31

[Sabrina Ng [:sabrina]]

Attachment: mozillagear_expanded_illustration.png

Expanded Illustration: angled black mozilla heart tank top and grey mozilla t-shirt

Comment 32

[Andrea Wood [:andreawood]]

For sure Jen. We're going to do a round of internal store promotion for staff to make purchases before public launch... so you'll know :)

Comment 33

[Andrea Wood [:andreawood]]

Comment on attachment 8472631 [details]
mozillagear_mozbannermockups.jpg

Just closing my review flag - this design has iterated further.

Comment 34

[Andrea Wood [:andreawood]]

Comment on attachment 8493870 [details]
mozillagear_mozbannerpreview_illustration2.png

This homepage design has been retired.