1122793 - Build a couple CTA graphics for MDN homepage

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Justin Crawford [:hoosteeno] [:jcrawford]]

>>Project/Request Title:
Build a couple CTA graphics for MDN homepage

>>Project Overview:
We have 3 calls-to-action on the front page of MDN (https://developer.mozilla.org) in tiles, just below the blue section. We'd like to update these with new art and point them at some new destinations.

>> Creative Help Needed:
Copy:    No 
Design:  Yes 
Video:   No 
Other:  No

>>Creative Specs:
6 photoshop files with layers intact for two tiles (the left tile, the right tile) in 3 different pixel dimensions each:

439h x 160w
228 x 168
695 x 168

You can see these sizes appear at critical breakpoints by resizing the browser window.

>>CTA and Design:
The copy to build these tiles around is...
"Learn Web Development" in the left tile
"Build Open Web Apps" in the right tile

We have a center tile already. I will attach it. It would be fantastic if all three tiles felt like they were part of a single style.

I will also attach a mockup showing where we need the tiles.

>>Creative Due Date:
2015-02-13

>>Launch Date:
2015-02-27

>>Mozilla Goal:
Org Support

>>Mozilla Creative Collective:
No

>>Points of Contact:
:hoosteeno, :shobson

Comment 1

[Justin Crawford [:hoosteeno] [:jcrawford]]

Attachment: mockup for where the new tiles will go

Comment 2

[Justin Crawford [:hoosteeno] [:jcrawford]]

Here is a link to the existing tile that Lee Tom built, which we'd like to use in the center slot: http://cl.ly/0D1X282z3M0H

Comment 3

[Justin Crawford [:hoosteeno] [:jcrawford]]

Hi, is there anything I can add to the specifications here, or are we on track for these tiles?

Comment 4

[Jennifer Balaco]

Justin, 

Thanks for checking in. Matt is finishing up some other projects and will get started here either later this week or early next week.

Comment 5

[mternoway]

Hi Justin, 

Apologies for the delay on this. I am hoping to get these tiles finalized as soon as possible for you. I am currently playing around with an idea that is similar to other creative we are currently producing. The focus is on simplicity with the use of simple iconography and solid colours. I am wondering if these 3 tiles will be changing often or do you intend to have these 3 new ones exist for some time?  Since there is a need to keep all 3 tiles cohesive I have had to alter the Fx Dev Edition tile match the others (This style can also be found on the moz.org home page). I also think there is room to alter the current copy, but overall this style would allow for flexibility if promos or copy need to be updated. Please let me know what you think.

Example: http://cl.ly/image/0T1i3l040w0d

Thanks,
Matt

Comment 6

[Jennifer Balaco]

Matt, thanks for adding these!

Justin, any feedback? Let us know if there is anything else you need.

Comment 7

[Stephanie Hobson [:shobson]]

I can't speak for Justin but I'm happy to edit the extra tile to keep them all matching and I think the current tiles have been up for about 1.5 years.

Comment 8

[Jennifer Balaco]

Matt has already proposed new designs He needs feedback on whether this is the correct directions/good enough.

Comment 9

[Luke Crouch [:groovecoder]]

:hoosteeno is at some events this week, so he'll be out-of-pocket until Monday.

I'm attaching the latest snapshot of 1 month worth of home page clicks, so we have an idea what the current home page users are clicking.

Comment 10

[Luke Crouch [:groovecoder]]

Attachment: mdn-home-analytics.png

Comment 11

[Justin Crawford [:hoosteeno] [:jcrawford]]

Matt, thanks! I appreciate you making them all match. I wonder if you can see ways to make the tiles and/or the CTAs a bit more prominent? It might be as simple as bumping up the font size or making the icons slightly bigger. In the mockup they just seem dwarfed by other things on the page.

Other than that I am happy with the way this is going. I'm going to :needinfo Ali in case she has any additional feedback.

Comment 12

[ali spivak]

Agree with Justin - it would be great if the tiles "popped" a bit more from the page. I also think that we need to increase the size of the image & font, otherwise I'd like to reduce the height of the whole tile bar to better frame the content of the tiles

Comment 13

[Sean Martell]

Hey all,

I think the icons themselves are a good size, so we'll explore bumping the text a bit.

I quite like this look. Simple and clean and I do enjoy the space Matt has left within them. Space is good! :)

Comment 14

[Sean Martell]

One note: I've chatted with ternoway and shobson re: the homepage and I'd love to see a quick tweak of the H1 headline disappear + the badge bar decoupled from the header area and made white. 

Two quick edits in the CSS using devtools and it looks much cleaner: http://cl.ly/image/1V3m213i0g3J 

Ideally, we redesign this for the 10th anniv, but I'd love to see this small tweak implemented if we could as we update the badges. Should I file a separate bug or is this small enough to just add as a rider to this bill... err... bug?

Thanks!

Comment 15

[Stephanie Hobson [:shobson]]

Maybe as a rider on the implementation bug (bug 1123748)? I'm happy to make the tweaks :)

Comment 16

[mternoway]

Attachment: MDN_ctas.png

Thanks all, for the feedback. As mentioned, Sean and I have been discussing this further outside the bug. This attached layout is closer to how we would like to see these tiles.  One key change being, sticking with the original layout structure (text bottom left, icons centre right). Another change is the replacement of the green colour for 'Learn Web Development'...we felt that this was too close to our download colour. We've also bumped up the copy size a bit to appear more prominent.

Comment 17

[Justin Crawford [:hoosteeno] [:jcrawford]]

Wow -- I really like the look in comment 14. It is dramatically better looking to me.

:shobson, can we A/B test this? I want to be sure...
* search usage stays steady or improves
* clicks on tiles stay the same or improve
* bounce rate on this page does not increase

I agree, we will probably do a bigger redesign later this year and should not aim for perfection. I just don't want "looks way better to me" to trump "works well for our users".

Comment 18

[Stephanie Hobson [:shobson]]

We can absolutely A/B test these changes and we should probably do it before we implement the new blocks so that we can compare the effect the changes have without muddying the water buy also changing the content of the blocks. I'll see if I can get some tests into production early next week.

Comment 19

[Stephanie Hobson [:shobson]]

I started bug 1137020 for the A/B testing.

Comment 20

[John Karahalis [:openjck]]

I love the new creative in comment 16. Would we say it's finalized? If so, we can start implementation.

Comment 21

[John Karahalis [:openjck]]

Attachment: MDN_ctas.png

Comment 22

[Stephanie Hobson [:shobson]]

I'm going to get started on coding the design in comment 16. Could I have the original file (Illustrator? Photoshop?) so I can sample colours and text stuff from it? 

Also, the A/B testing for the whitespace showed no negative side effects and we've made it permanent :)

Comment 23

[mternoway]

Hi Stephanie, here is a link to the PSD containing the 3 ctas. 

https://www.dropbox.com/s/hgi8u7zollo5n71/MDN_ctas.psd?dl=0

Comment 24

[Stephanie Hobson [:shobson]]

Got it. Thanks :)

Comment 25

[David Walsh :davidwalsh]

I object with removing the headline completely.  You go to the MDN homepage and there's no message...just a search box.  Even Google has a logo or image but we'd have no intro to the site and no intro to what we're about.  New users would see our homepage and would have to guess what we do.

Can we have smaller text with a message?  Anything?!

Comment 26

[Stephanie Hobson [:shobson]]

Maybe we should A/B test some different headlines? Find a way to better explain what MDN is?

Comment 27

[David Walsh :davidwalsh]

"Documentation for the Code that Powers the Web"

Something like that in half the font as before?

Comment 28

[Luke Crouch [:groovecoder]]

Google Developers doesn't have anything except a logo above the search box. [1] I like having some kind of unique MDN message on the home page, but can we test it against removing the headline completely?

Some of my favorite Mozilla messaging ...

"This technology could fall into the right hands. [Get Involved]" (English idiom, could measure other locales' click-thru conversion?)

"Resources for developers, by developers. [Get Involved]"



[1] https://developers.google.com/

Comment 29

[Matej Novak [:matej]]

Setting a flag for Sean here as I believe he had some rationale for this. I'm in favor of testing, I just want to make sure he's part of the conversation. Thanks.

Comment 30

[Sean Martell]

Hey hey all,

I'd much prefer we went with this cleaner look from comment #14: http://cl.ly/image/1V3m213i0g3J

It elevates the search box and gives it more uninterrupted prominence.

If we do keep a headline, can we keep it to one line? I'd rather it be centered on one line now versus the unnecessary two-line stagger.

Comment 31

[Matej Novak [:matej]]

For my part, I really like both options in comment 28, though I agree that the first may not work in l10n.

Could we test those two against a no headline version?

Comment 32

[Stephanie Hobson [:shobson]]

I suggest we:

1) remove the headline in all non-English locales
2) do an A/B test on the two English suggestions in comment 28 (as 1 line headings)
3) if we find the idiom is the best option, we can add the strings to verbatim with notes for the translators asking them to get creative or to translate a non-idiom fall back.

Comment 33

[Justin Crawford [:hoosteeno] [:jcrawford]]

What are we A/B testing? We already A/B tested "original headline" vs. "no headline" and found them to be virtually identical in terms of "performance" where "performance" was some combination of "uses the search box" and "clicks on something".

:davidwalsh, is it your assertion that having a headline will cause some measurable effect? What effect, specifically? That's what we need to measure in an A/B test.

Comment 34

[David Walsh :davidwalsh]

I ask from a presentational view.  We can't assume new users know what MDN is, and we can't assume users know what the search box is for.  It's like going up to a phone book, but without any marking that it's a phone book, and having a search box that says "phone number".  You'd have no idea based on the little idea or direction what's going to happen.  If there was direction above the search box that said "Find a friend by phone number", you'd go "Oh, OK, I see why they're asking for a number now".

It just doesn't make any sense to me.  Too bland, too vague, too unwelcoming.

Comment 35

[Matej Novak [:matej]]

(In reply to David Walsh :davidwalsh from comment #34)
> I ask from a presentational view.  We can't assume new users know what MDN
> is, and we can't assume users know what the search box is for.

Doesn't comment 33 prove otherwise? Seems that people were just fine with no headline. (My assumption is that not too many people end up here by accident with no idea of what MDN is.)

Like I said, I'm good with testing, but let's make sure we're doing it for the right reasons and know what we want to accomplish or learn.

Comment 36

[David Walsh :davidwalsh]

I'm not asserting we need an A/B test for this, I just think it's basic presentation.  We add new locales every few months, meaning we're committing ourselves to supporting a new languages, which probably points to those locale's users never having been on MDN before, which also probably means they aren't always sure exactly what we do if they don't hit a direct documentation page that they need.

If everyone else is safe in assuming people know who we are, then I guess I'll stand off.

Comment 37

[Justin Crawford [:hoosteeno] [:jcrawford]]

A cursory glance at others in our product or audience space suggests that there isn't a universal convention among them: 

Explain themselves with a big <h*> on the top of the front page:
github.com
saucelabs.com
travis-ci.org
docs.djangoproject.com

Explain themselves with paragraphs on the top of the front page:
stackoverflow.com
webplatform.org
quirksmode.com
hacks.mozilla.org

Do not explain themselves at the top of the front page:
msdn.com
hackernews.com

Of all of these approaches, I most appreciate StackOverflow's. They explain what it is in detail, and allow people to minimize the explanation.

I agree with Sean's aesthetic opinion that the site looks much better with out a giant staggered headline above the search box. I also agree with David that MDN is not so obvious that people arriving on the page should be expected to know what it is. But I don't think the headline we have used explained it very well either, so I don't think we have lost much.

I would like to see a design solution that gives visitors a real explanation rather than a tag line, since MDN is hard to explain in a phrase. I am willing to wait for a more comprehensive front page redesign for this. If we want to experiment with it now, I wonder what it would be like to encourage people to "search the authoritative reference for open web technologies" _under_ or _in_ the search box. 

Considering that the change discussed in this bug had very little performance effect and a solid aesthetic effect, I (for one) am comfortable going live with it. We can immortalize the date in Google Analytics and watch for any dramatic change in bounce rate to see if the change has a more powerful effect over time than our split test revealed.

Comment 38

[Stephanie Hobson [:shobson]]

We're seeing quite a bit of traffic from the MDN tile in Firefox, I don't think those people know what they're arriving at. We don't have any kind of "about" page or anything explaining who we are and what we do. "Resources for developers, by developers" explains it very clearly to me.

I think we've proved that no headline is better than the headline we were using but not that no headline is better than any headline ;)

Comment 39

[John Karahalis [:openjck]]

While the A/B test showed that removing the headline doesn't negatively affect visitor behavior, it might impacte user comprehension, or user affinity, or something else along those lines. Optimizely can measure what happens on screen, but not what happens in the mind.

A micro-survey might be better tool for that. We could ask a multiple-choice question about the purpose of the site and look at which group performs better.

:groovecocer, what was the name of that micro-survey service you mentioned a while back?

Comment 40

[Luke Crouch [:groovecoder]]

:hoosteeno is evaluating qualaroo for doing that on MDN.

https://qualaroo.com/

Comment 41

[Justin Crawford [:hoosteeno] [:jcrawford]]

MDN has denied users on <=768px-wide screens the benefits of a headline for some time now. This does suggest that a headline is ... inessential. :)

As a point of order, we have an entire bug devoted to the question of headline changes. It is bug 1137020. This bug right here is resolved (thanks!), and that one is open. Let's go over there.