Iterate on homepage (Design)

[hannahkane]

v1 is alive! Now, let's iterate.

Feedback from users has highlighted that the homepage needs to do a better job of answering the question, "What can I do on this site?"

We also want to use more plain language wherever possible, to ensure that we're appealing to the broadest audience (though it is still a relatively niche audience).

Suggested copy changes and CTAs

Headline: “We Teach the Web”
Intro copy: “Join our community of educators and activists: we teach kids and adults how to read, write, and participate on the Web.”

Present three pathways on homepage itself:

• “Teach an activity” (helper text could be: “Browse our list of lesson plans”)
• “Host a Maker Party” (helper text could be: “Hold an event or workshop in your community”)
• “Start a Mozilla Club” (helper text could be: “Provide ongoing learning opportunities”)

We also need to account for the blog. This likely means displaying a teaser of recent content, and linking to the full blog.

[chrislarry33]

Huge agreement on these, to me the activities page is most pressing

[hannahkane]

See #821 for an idea of how the homepage might work.

[hannahkane]

@iamjessklein and @sabrinang - did you two have a chance to check in on this today? Any progress to report or questions/obstacles to raise?

[iamjessklein]

I did three new mockups that experiment with the layout and the calls to action. Please add you feedback in redpen

[hannahkane]

Commented on redpen. I like many aspects of these treatments, but want to make sure we're really making the three primary pathways clear to users (activities, maker party, and clubs).

[sabrinang]

Note: think about incorporating a blog (https://blog.webmaker.org/tag/teachtheweb) or social element to give users a sense of what is currently happening when they land on the homepage

[hannahkane]

@sabrinang, @iamjessklein, and I met on this today. Notes here: https://etherpad.mozilla.org/teachhomepage

Key takeaways:

• the three main sitewide CTAs (teach an activity, host a maker party, start a club) should not compete with any other CTAs on the homepage
• we should present those CTAs as clear pathways (see Adam's example of a product comparison on Optimize user flow on teach.mo.org to add a club #821)
• unlike the product comparison, though, we need to not only illustrate that the three options vary in terms of time commitment ("price" in the product model), but they are also a kind of workflow, each potentially leading to the next (perhaps the product equivalent is "upgrade")
• featured content will be more useful as we add more ways for users to add content to the site
• this ticket can be narrowed to the homepage-specific content. We can address the page wrapper (navigation, header, footer) in other tickets

[iamjessklein]

I put up the revised concept on redpen

One piece that I could use some direction on is the top "hero" image. Right now it's an image, with a tagline. What was the original thought in terms of the content that would go here? Is this current content with the latest and greatest CTA? Is it more of an overarching ... this is what the Teach site is all about (which I suspect it is)? I am wondering if this is wasted real estate.

cc/ @vazquez @hannahkane @sabrinang

[sabrinang]

From the discussion last week (https://etherpad.mozilla.org/teachhomepage), I think for now we don't have the main CTA to be placed on the hero yet but with the 3 pathways in proximity I think it will work until we have a main place we'd want to funnel users too.

Example using some of the copy:

The banners do take up a quite of screen real estate and may be reconsidered across the other pages as well down the road.

[iamjessklein]

just to reiterate what @sabrinang and I discussed, we need to just incorporate the blog from my wireframe and then we are good to go in terms of page structure.

[sabrinang]

Also, refine how we show progression and relationship of the 3 pathways (referring to #821)

[hannahkane]

+1 to all of the above, including the idea of considering using less real estate for the mission-y language.

[iamjessklein]

One thing that I was just wondering was if the visual was less dense, there might be an opportunity to move the CTAs up. Something kind of like this from Aetna.com

[chrislarry33]

Love the directness of Aetna site, we need that

+1 to less mission language as sales language

[iamjessklein]

Revised - I think that a lot of this layout will depend on if we can find a complimentary photo or graphic - I am going to try it out with the foxy page we have now.

[iamjessklein]

This is where I am at the moment. I am going to work on the icons that go where the little blue squares are currently acting as placeholders.

[hannahkane]

Nice!

I like the three CTAs as a layer over the hero image. I wonder what it will look like with icons or photos next to them. Will it seem too busy?

I like the copy changes you made, with the exception of "Small to medium sized experiments," which I think is a little confusing. I really liked "Browse our list of lesson plans" (from the ticket description), though I see it doesn't fit with the other two copy changes. Perhaps, "Short lesson plans."

I think the line break in the "We are a community of...." text is off. Should be after the word "adults."

[iamjessklein]

Yes. I pinged @vazquez to do a review. But, I'll do it officially here, hey @vazquez can you 👀 at this? Thanks.

[hannahkane]

@vazquez - have you had a chance to take a look at this?

[vazquez]

@hannahkane - Sorry for the delay Hannah, I've posted my comments in Redpen. https://redpen.io/ev1973a49294855f03

[hannahkane]

Thanks very much, @vazquez! We'll have @sabrinang make these final tweaks next heartbeat.

[sabrinang]

You can find some WIP iterations on redpen: https://redpen.io/p/uebb1e58b38f67faf7

I'm working on sorting through visual treatment on the banner section and content hierarchy on the page and iterating on what information to exclude or include from other pages:

[toolness]

This looks rad!

One concern I have is that I've heard it's good practice to put the newest, most frequently-changing content "above the fold", so that repeat visitors can easily see what's changed, and to give the site itself a feeling of being alive and dynamic rather than static. The "on the blog" section is the only dynamic content on this page, but it's below the fold.

Anyhow, that "best practice" might not be relevant anymore (I heard about it like 10 years ago lol), or it might not be relevant to our particular audience, but I figured I'd mention it just in case.

[hannahkane]

Thanks for turning out so many variations! Left my comments on the redpen.

Agree with @toolness that the fresh content would ideally be above the fold, but for now I agree that a short About paragraph might be necessary for basic context. I hope we'll eventually sort out our branding enough that we may not need that context, because we won't have to worry about people mistaking the site for the Mozilla homepage.

cc @ldecoursy @thornet and @chrislarry33 for feedback as soon as you can.

[ldecoursy]

Loving the iterations! Left a few comments here: https://redpen.io/ruae7488775739dafe

One q for @HPaulJohnson @chrislarry33 - thoughts on if it's ok to have the title copy on the home page for teach.mozilla.org say "Mozilla Learning Networks?" We want to be clear this isn't the home page of Mozilla... Currently sayes "We Teach the Web."

[HPaulJohnson]

100% ok with the title copy Mozilla Learning Networks. Think it's a big improvement.

Unrelated, taking a quick spin through the iterations I'd advocate for the ones which have the clear calls-to-action integrated in the main promo space, above the fold.

[chrislarry33]

+1 to MLN...could it be The Mozilla Learning Network? If not, not a blocker for me. Does raise Hive placement for me to so it feels cohesive. Could it even be a sidebar link/section?

+1 to Paul's second point as well

[hannahkane]

@sabrinang - thanks for the speedy iterations. It sounds like we'd like to see a version with:

• Mockup 1's button style
• "The Mozilla Learning Network" as the headline, with no sub-head
• Hero image followed by About text, blog, color-blocked quote, and three blue CTAs

@chrislarry33 - I hear your point about Hive placement. Let's address that in other tickets (perhaps #861) to keep the scope of this ticket narrowed to just the homepage content.

[chrislarry33]

WFM

Should be "The Mozilla Learning Network"

[hannahkane]

thanks, updated.

[sabrinang]

redpen: https://redpen.io/ejc900cf7e4b532df6

[hannahkane]

<3

[sabrinang]

Updated copy: "The Mozilla Learning Network" and "About Us"
redpen: https://redpen.io/ejc900cf7e4b532df6

[hannahkane]

Ship it! Will unblock the implementation ticket.

Nice job, Sabrina. :)

[ldecoursy]

🏆

[chrislarry33]

Agreed, awsm work. Thank you very much all!

[sabrinang]

Going though photos to finalize the banner: https://redpen.io/ro3d3a2d36dc9f1e24

Many photos are busy but I think 4 has most of the image out of focus so it doesn't interfere with the text too much
@cassiemc any feedback?

[sabrinang]

redpen: https://redpen.io/er45927e5cf11b9297
R? @cassiemc

[sabrinang]

Updated redpen: https://redpen.io/er45927e5cf11b9297
NOTE: yellow button is the hover state

R? @cassiemc

[cassiemc]

We R'd on design crit, and these adjustments look great. Nice work Sabrina! R+

[sabrinang]

Hero banner photo:

(original) https://drive.google.com/a/mozilla.com/file/d/0B4Q8pzCpDS_eVHB0RmV5a0FQQkE/view?usp=sharing
(retina) https://drive.google.com/a/mozilla.com/file/d/0B4Q8pzCpDS_eRjY2Y1pSUk9zUGs/view?usp=sharing

.ai file for reference: https://drive.google.com/open?id=0B4Q8pzCpDS_ecmVIekZmVHFRdjg&authuser=0

[mmmavis]

@sabrinang could you help export the svgs that are used in hero unit button(both default state and hover state)? Thanks!