Closed Bug 1070196 Opened 12 years ago Closed 11 years ago

Humble Bundle Landing Page Banner

Categories

(Marketing :: Design, task)

Product:
Marketing
Component:
Design
Platform:
All
Other
Type:
task
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED FIXED
Due Date:

People

(Reporter: alainez, Assigned: ltom)

References

Details

Attachments

(8 files)

humble-bundle-banner_01.jpg
3.14 MB, image/jpeg
Details
humble-bundle-banner_03.jpg
3.16 MB, image/jpeg
Details
humble-bundle_banner_950x276.png
1.00 MB, image/png
Details
humble-bundle_banner_950x308_a.png
1.12 MB, image/png
Details
humble-bundle_banner_950x308_b.png
1.12 MB, image/png
Details
hb banner .pdf
1.33 MB, application/pdf
Details
humble-bundle-banner_06a.jpg
2.58 MB, image/jpeg
Details
humble-bundle_banner_950x370a.png
1.34 MB, image/png
Details
>>Project/Request Title: Humble Bundle Landing Page Banner >>Project Overview: Create a banner for the Humble Bundle promotion landing page. This banner will be shown to all users that click a HB promo snippet on about:home. This is an opportunity to provide a continuous Firefox experience to users that click the CTA on about:home snippet and travel to the Humble Bundle home page at https://www.humblebundle.com/ >> Creative Help Needed: Copy: Yes Design: Yes Video: No Other: No >>Creative Specs: Specs see specs in the link or the attachment >>CTA and Design: CTA: Play on Copy: This is an opportunity to tie Mozilla + Firefox + asm.js Explain to the user: - why they are at partner landing page: Play on. Here is a bundle of great indie games that you can choose to pay whatever amount you deem fair. The proceeds help indie developers and a portion goes to charity. Firefox pioneered asm.js to make gaming on the browser possible and Humble Bundle is helping us prove that concept by bringing you this great bundle. Design: it's a good opportunity to show a similar experience to what the user just experience at about:home. The objective is to minimize the transition from a Firefox experience to a partner page where the CTA is to buy something Banner Specs can be found here: https://drive.google.com/a/mozilla.com/file/d/0BzyMO2Ekfme6VURPR3Fsc1N1Rlk/edit?usp=sharing John Gruen Snippet concepts: https://www.dropbox.com/s/734evuye0ygrc05/Humble%20Bundle%20Snippet%20Concepts.m4v?dl=0 Links to Humble Bundle landing page for reference: Origin Bundle: http://blog.humblebundle.com/post/58256397346/introducing-the-humble-origin-bundle Valiant Bundle: https://www.humblebundle.com/books?valiant_bundle&utm_source=Tumblr&utm_medium=Link&utm_campaign=Humble%20Valiant%20Bundle >>Creative Due Date: 2014-10-01 >>Launch Date: October 14, 2014 >>Mozilla Goal: Firefox Browser >>Points of Contact: wmaggs@mozilla.com, jgruen@mozilla.com, epetitt@mozilla.com
Etherpad: https://etherpad.mozilla.org/Ju4Or7UNOK
Assignee: jbalaco → ltom
Status: NEW → ASSIGNED
(In reply to alainez from comment #0) > > Design: it's a good opportunity to show a similar experience to what the > user just experience at about:home. The objective is to minimize the > transition from a Firefox experience to a partner page where the CTA is to > buy something We'll definitely keep this in mind, but remember that we won't know which of the snippets someone just came from, or whether they came from somewhere else. We'll definitely make it feel connected to the overall campaign, but probably in a more high level sense. Also an update on timing: I'm going to share a draft of copy shortly. Lee is PTO, but will pick this back up on Monday when he's back.
OK, here's a first pass at copy: [HEADLINE] Play on with Firefox and Mozilla [COPY] Mozilla is leading the charge to bring high quality gaming right to your browser. We helped pioneer new technology, called asm.js, and put it in Firefox. Now we've partnered with Humble Bundle to bring you some great games. You can pay what you want to support indie game developers as well as our non-profit mission to promote openness, innovation and opportunity — not to mention awesome gaming — on the Web.
Looks like this work was also happening in bug 1074648. CCing Andrea here, who is working on it there.
Updated copy: Play on with Firefox and Mozilla Mozilla is the non-profit that brought you Firefox, Do Not Track and Stopwatching.us — and now we've built new technologies that make it easy to develop, distribute and play the next generation of games on the Web. We believe rich, interactive, high-performance games should be accessible to anyone on any device. Proceeds from every purchase support our mission to promote openness, innovation and participation — not to mention awesome gaming — on the Internet.
Ryan at Humble Bundle has requested the landing page assets be delivered to him, he's at: ryan@humblebundle.com. FYI I've seen early designs for the snippet - have those been shared with you yet Matej? You can get a preview from one of these gentleman: From: "Joseph White" <joseph@lexaloffle.com> "jgruen" <jgruen@mozilla.com> "Bill Maggs" <wmaggs@mozilla.com>, "John Graham" <john@humblebundle.com>.
Hi all, please review the Humble Bundle banner mockup and let me know what you think. Thanks!
Love it, Lee. Looks killer. Arcadio, I'm not sure when you're back from PTO, but I'll set a needinfo for you and hopefully you can get back to us with feedback soon. Thanks!
Flags: needinfo?(alainez)
I just caught up with Bill Maggs on this. Somewhere along the way I got confused about this ask and gave Lee the wrong direction. Bill is going to post some updated direction and we'll go from there. Clearing the needinfo for Arcadio for now. Sorry all!
Flags: needinfo?(alainez)
The basics of this banner is that it will be the contiuation from the snippet, and only Firefoc users who click will see it. It is intended to provide a familiar path and explanation for what Mozilla is doing with the promotion. This is because snippets usually take you to a Mozilla property, and this one goes to Humblebundle.com. So it would be important to see that beautiful logo right at the top. As for text: Play on with Firefox Firefox is brought to you by Mozilla, a non-profit that protects you with Do Not Track and Stopwatching.us — and now we've built new technologies like asm.js that make it easy to build, distribute and play the next generation of games in your Web browser. We believe rich, high-performance games should be accessible to anyone on any device. Proceeds from every purchase support our mission to promote openness, innovation and participation — not to mention awe-inspiring gaming — on the Internet. And: Madison Bumgarner is so dialed in.
Thanks, Bill. Given our conversation yesterday, I think I'd actually prefer to go back to the copy I had in comment 3, but tweak and shorten it. Here's what I'm thinking: [HEADLINE] Play on with Firefox [COPY] Mozilla, the non-profit behind Firefox, is bringing high quality gaming to the Web with new browser technologies like asm.js. Download and try the games below to help support our mission to promote openness, innovation and participation on the Internet. Go Giants!
Matej, Bill, Thanks for the banner copy versions. I'm leaning towards the Matej's version in #11. RE: asm.js we should briefly expand on this point by saying something like: "...asm.js that allows for native and console games to be played on the Web." LMK of this... In the second sentence, I think we should highlight that the games will be playable for free before we invite them to Buy the games. Re: the design, to Bill's point, the banner should be a continuation of the snippet experience and because Voxatron will be playable on about:home, it should also have a stronger presence in the banner...it looks a little burried behind the main copy block. I think Voxatron should be brought out to be more visible from a continuation POV. Giants are the first baseball hat I bought since my first Yankees hat many many years ago when I lived in The Bronx! Go Giants (SF and NY)
(In reply to alainez from comment #12) > Matej, Bill, > > Thanks for the banner copy versions. > > I'm leaning towards the Matej's version in #11. > > RE: asm.js we should briefly expand on this point by saying something like: > "...asm.js that allows for native and console games to be played on the > Web." LMK of this... > > In the second sentence, I think we should highlight that the games will be > playable for free before we invite them to Buy the games. Good call on both. Here's an update: [HEADLINE] Play on with Firefox [COPY] Mozilla, the non-profit behind Firefox, is bringing high quality gaming to the Web with new technologies like asm.js, which allows native and console games to be played right in your browser. Try the games below and download them to help support our mission to promote openness, innovation and participation on the Internet. > Re: the design, to Bill's point, the banner should be a continuation of the > snippet experience and because Voxatron will be playable on about:home, it > should also have a stronger presence in the banner...it looks a little > burried behind the main copy block. I think Voxatron should be brought out > to be more visible from a continuation POV. As I mentioned in comment 2, we're going to have 4 different snippets. If someone comes from the Voxatron snippet, seeing Voxatrom imagery makes sense, but if someone comes from one of the other ones, there will be a disconnect. What Bill and I discussed yesterday was to use the Firefox logo front and center on this banner to keep continuity between all the snippets on about:home and this page. Lee is going to share an update a little later today. Thanks.
Here's another mockup with Matej's latest copy. Considering that we wouldn't know exactly which game/snippet the user was coming from, I liked using the isometric goodness of the Voxatron figures in the background - but I think the SuperHexagon pixels look pretty cool too. In this comp, I moved the game art so Voxatron was more front and center. Big Firefox logo included.
Attached is the landing page banner PNG at 950x276px, with FTL box graphics included in the game cluster.
Looks great, Lee. I love the ships outside of the frame. Nice touch. I forgot to ask in the meeting, but do we need the button in the banner? What happens when someone clicks it?
I'll let Arcadio speak to that. In Comment #0, the CTA reads: Play on, and there's a button in the specs for the graphic. (In reply to Matej Novak [:matej] from comment #16) > Looks great, Lee. I love the ships outside of the frame. Nice touch. > > I forgot to ask in the meeting, but do we need the button in the banner? > What happens when someone clicks it?
When the user clicks on Play On the page scrolls down to the game demo area where they can try or buy the games.
(In reply to alainez from comment #18) > When the user clicks on Play On the page scrolls down to the game demo area > where they can try or buy the games. Excellent. Just wanted to make sure. Thanks.
Looks great. We just need one more small thing. In talking with Vlad, Arcadio, and John, they all agreed that for users on FF older 33, we should show a CTA to update to the latest FF for world class gameplay. We should get both versions to Humble Bundle so they can get it done. Something like: For the best gaming experience, update to the latest Firefox or whatever you guys think.
(In reply to Bill Maggs from comment #20) > Looks great. We just need one more small thing. In talking with Vlad, > Arcadio, and John, they all agreed that for users on FF older 33, we should > show a CTA to update to the latest FF for world class gameplay. We should > get both versions to Humble Bundle so they can get it done. I'm not sure I understand where this copy would go or what you mean by "both versions." Can you clarify?
The above statement, or something like it, would appear at the bottom (side? wherever you decide) of the banner for users coming to the HB page from pre-33 FF. That would be the only difference. Humble Bundle has agreed this is a good plan, and want to see the two banners soon. Can we get the two versions today.
(In reply to Bill Maggs from comment #22) > The above statement, or something like it, would appear at the bottom (side? > wherever you decide) of the banner for users coming to the HB page from > pre-33 FF. That would be the only difference. Humble Bundle has agreed this > is a good plan, and want to see the two banners soon. Can we get the two > versions today. Thanks for the clarification. I totally get why we would want to do this, but putting it on the banner isn't a ideal. A user has already made it to the HB site and is prepared to buy these games. Now we're asking them to go back to one of our pages to download Firefox or to restart their browser to upgrade. Either way, we're taking them out of the flow to buy and play the games. I'm also concerned about it fitting on the banner. Given the banner specs, we would likely have to cut some of the existing copy to add this text. Is there somewhere else this copy can live?
(In reply to Matej Novak [:matej] from comment #23) > (In reply to Bill Maggs from comment #22) > > The above statement, or something like it, would appear at the bottom (side? > > wherever you decide) of the banner for users coming to the HB page from > > pre-33 FF. That would be the only difference. Humble Bundle has agreed this > > is a good plan, and want to see the two banners soon. Can we get the two > > versions today. > > Thanks for the clarification. > > I totally get why we would want to do this, but putting it on the banner > isn't a ideal. A user has already made it to the HB site and is prepared to > buy these games. Now we're asking them to go back to one of our pages to > download Firefox or to restart their browser to upgrade. Either way, we're > taking them out of the flow to buy and play the games. > > I'm also concerned about it fitting on the banner. Given the banner specs, > we would likely have to cut some of the existing copy to add this text. > > Is there somewhere else this copy can live? Matej: spoke with HB re: the dimensions. They are giving us flexibility in the height dimensions of the banner so if we wanted to steal another 50-100px we have that ability. Actually, their only constraint was to be considerate with the space. We can use what we need without taking over their entire page : ) CC'ng Lee Tom
I'm actually a lot less concerned about the space and more concerned about interrupting the user's flow. But if you're good with it, let's do it. Lee, please go ahead and make the banner taller as necessary. Let's use this copy: For the best gaming experience, update to the latest version of Firefox.
Here are the 2 landing page banner versions. Now sized at 950 × 308px Version A (original messaging)
Here are the 2 landing page banner versions. Now sized at 950 × 308px Version B (FFx versions older than 33)
Comment on attachment 8500581 [details] humble-bundle_banner_950x308_a.png Shouldn't we put a button/link there too? There's nothing to click on!
I was referring to Version B attachment, of course.
(In reply to Bill Maggs from comment #28) > Comment on attachment 8500581 [details] > humble-bundle_banner_950x308_a.png > > Shouldn't we put a button/link there too? There's nothing to click on! The best way to update is to restart and check for a new version. We shouldn't be encouraging people to download a new version every time. Also, having two clickable CTAs in the same banner is not a great user experience. We should decide what we want people to do here: download games or update their browser. We can do it if we have to, but I would definitely recommend against it.
Data are clear from Foundation's work that every additional link or CTA has a significant negative impact on the primary CTA (including donations, calls to take action). I asked Humble Bundle if it's possible to test click through or differing versions in order to optimize, but I don't believe that's available (unfortunately). Unless using earlier versions of FF creates a significant barrier to downloading and enjoying the Bundle, i share Matej's concerns and think it's ill-advised based on data.
I hear you on conversions. We can also ask that the custom download pages generated by HB tell people to freshen their FF to get the best experience. I think I will do that with HB today as part of their overall approach.
Let's just leave out any reference to upgrading in the banner and agree on how it looks, and send over something like Version A. Arcadio, do you have any suggestions for how it looks now?
Flags: needinfo?(alainez)
(In reply to Bill Maggs from comment #33) > Let's just leave out any reference to upgrading in the banner and agree on > how it looks, and send over something like Version A. Arcadio, do you have > any suggestions for how it looks now? Lee here is what i'm thinking - we have ability to increase height from HB so let's not make the banner look so crammed - the banner looks very different than snippet. like them both but wondering if we can better match the background to the snippet look? (see attachment)
Flags: needinfo?(alainez) → needinfo?(ltom)
Attached file hb banner .pdf —
my 0.02 is that the simpler background is a good idea -- but the large Firefox logo likely creates plenty of continuity from the snippet. One other piece of feedback related to the busy-ness of the banner -- in our testing button copy and color and readability is crucial. The button on the banner says "Play On" -- i think for users it's unclear what clicking that button gets them. Do they get the bundle? Start playing a game? Continue a game they started on the snippet? If the goal is to get them to the bundle, then i'd suggest changing the wording to "Get the bundle" or something clearer. Making the button stand out more is always a good idea (sometimes accomplished by making the background less busy around the button). Another question i have, that would be possible to get at with testing, is whether game play on the snippet depresses click through to Humble Bundle. In other words, if people get into playing the game right on about:home, they could be distracted from the linke in the snippet copy and never leave about:home to get the bundle.
(In reply to Andrea Wood from comment #36) > my 0.02 is that the simpler background is a good idea -- but the large > Firefox logo likely creates plenty of continuity from the snippet. One other > piece of feedback related to the busy-ness of the banner -- in our testing > button copy and color and readability is crucial. The button on the banner > says "Play On" -- i think for users it's unclear what clicking that button > gets them. Do they get the bundle? Start playing a game? Continue a game > they started on the snippet? If the goal is to get them to the bundle, then > i'd suggest changing the wording to "Get the bundle" or something clearer. > Making the button stand out more is always a good idea (sometimes > accomplished by making the background less busy around the button). Great points, Andrea. Let's change the button text to "Get the bundle" or even "Get the games" > Another question i have, that would be possible to get at with testing, is > whether game play on the snippet depresses click through to Humble Bundle. > In other words, if people get into playing the game right on about:home, > they could be distracted from the linke in the snippet copy and never leave > about:home to get the bundle. We're going to have 4 different snippets for this campaign so we'll be able to test exactly that. I love the gameplay snippet, but I'm also curious about how well it converts.
I agree that having a clearer CTA is better UX. Thank for the updated copy. I also think giving the button more padding is a good idea so I'll take advantage of the flexibility of pixel height, but I don’t think the continuity coming from about:home his broken because the background color is darker - the Firefox logo very obvious. I approached the style of banner to make it feel more harmonious with the HB gaming site.
Flags: needinfo?(ltom)
(In reply to Lee Tom from comment #38) > I agree that having a clearer CTA is better UX. Thank for the updated copy. > > I also think giving the button more padding is a good idea so I'll take > advantage of the flexibility of pixel height, but I don’t think the > continuity coming from about:home his broken because the background color is > darker - the Firefox logo very obvious. I approached the style of banner to > make it feel more harmonious with the HB gaming site. Thanks, Lee. That approach makes sense but my concern is that we give the snippet audience a soft landing when they get to the HB landing page. Concerned that the experience is too drastic and wanted to give users less dissonance when they land at a very busy and promotion partner page. "Design: it's a good opportunity to show a similar experience to what the user just experience at about:home. The objective is to minimize the transition from a Firefox experience to a partner page where the CTA is to buy something"
Here's a version on a lighter background - this might feel like a softer landing coming from about:home. IMO, this is actually more dissonant and reads more like a promo banner, since it's a big white rectangle on the page. I do think the padding on the button and revised CTA help.
Thanks Lee. I actually prefer the darker one as well. Agreed that the padding and CTA are better now, too. Arcadio, my take is that neither of these feels particularly disconnected from about:home...the logo and wordmark are pretty prominent and make the connection. If we want to set people up for a softer landing, is there anything we can do with the copy on about:home? Not sure there's really much more we can do without a major redesign of the HB page itself, which seems out of scope. Would love it if we could pick one of these and move forward, perhaps with small tweaks at most.
Lee - thanks for the quick revisions. Sorry for the last minute request. I do like both versions like I mentioned earlier but I do think the new white background feels like a better experience for our users. I'd like to move forward with the white background version.
Works for me, thanks Arcadio. Lee, please post the final assets for the lighter version and we can close this out.
Attached is the white version - 950x370px
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: