687383 - [The Den] Create UX for Magazine-like Entry Landing Page

Status: RESOLVED WONTFIX

(www.mozilla.org :: General, defect)

Description

[mcbmoz]

Goal: Create a single magazine-style landing page where the User Engagement team can curate content from the Mozilla universe.

Opening this bug for the Q4 project, my first step is to do stakeholder interviews with the User Engagement team (Jane, Winston, and Carmen) and create wireframes, which will be passed over to the creative team.

I'll open a separate bug for the frontend implementation and overall Wordpress streamline.

Comment 1

[mcbmoz]

Attachment: Landing page wireframe #1

Carmen,

There are some subtle differences, but please give generous amounts of feedback.

Notes:

*Lede unit is a slideshow that you will be able to update yourself from Wordpress (can hold 1 to 3 stories)

*Blog feed is automated, you won't be updating it by hand

*The curated links unit is a unit that you will be able to update yourself from Wordpress

*Campaign promotions units are static and will be units that you will be able to update yourself form Wordpress - if something needed to be dynamic (e.g. have an input field) this would add more complexity and let's avoid that use case for Q4 launch

*Email sign-up is fixed and non-editable

Comment 2

[Carmen]

Oooh. I like. :)

Mostly to scale it back a little (I know! This coming from the person who wants it all!) here are my thoughts.

I'll go number by number

1. no change. All good. 

2. I like the subhead, but I'll want to change the text. Can do that later - I think Matej had some ideas around clarifying "The Den" and content.

3. I'd like to keep the Twitter and Facebook items together in one social space. Can we move this to the right side under the FB social plug in.

4. Main graphic - woot! However, to start us off, a slideshow might be too much. Just one, static graphic for now. Mostly because I just found out that we're outsourcing graphics to an agency, and each one will cost us. I'd rather save each outsourced graphic for a new update when needed, and not have them rotate and not change as frequently.

5. From the blog section. Awesome - except I'd like to use a small graphic for the first post, and then just headline links for the others. Let's cap it at 4 for now - until we get more content into the blog. This way, I can again make updates and keep it fresh, rather than not have new stuff on the page.

Which makes me wonder - should this be an RSS feed from the blog? Rather have it editible so I can choose the content that matches with the overall theme of that time. (Not all the posts will be front-page material.)
 
6. Firefox on Facebook - Awesomesauce. I'd like it to be the social plug in, so people can "like" us from this page.

7. i'd prefer not to link out to Planet stuff to start. Most of that is so technical and "inside baseball" and this is going to be easy-peasy stuff for end users. Perhaps we can make this a "tip box?" Where we can take a SUMO-like tip and put it here, like the email newsletter does? I'm thinking of ways to fill the space.

8. Campaign promotion 1 - Woo hoo! Good to go.

9. Many of the campaigns will also get blog posts, so let's keep the promo spot to just one. Plus, less work for graphics team right now.

10. I like the idea of "About" - but we could re-purpose it to be brand messaging. 

11. Email sign up = yay.

Thank you so much for making up this wireframe. Way to jump start us!

Next step: Do you want to incorporate these changes into a new wireframe? Would you like me to take that on?

Comment 3

[mcbmoz]

(In reply to Carmen from comment #2)
> Oooh. I like. :)
> 
> Mostly to scale it back a little (I know! This coming from the person who
> wants it all!) here are my thoughts.
> 
> I'll go number by number
> 
> 1. no change. All good. 

OK

> 
> 2. I like the subhead, but I'll want to change the text. Can do that later -
> I think Matej had some ideas around clarifying "The Den" and content.

This should be done as soon as possible, so it can go into design finalized as it might inform some of the design.

> 3. I'd like to keep the Twitter and Facebook items together in one social
> space. Can we move this to the right side under the FB social plug in.

Of course. My advice is to leave it where it is, because depending on the Twitter strategy, I've seen the single space as a much more effective and readable unit v. the vertical space with multiple tweets. Since you won't always have fresh content in the lede, it's great to show readers that there is fresh content as quickly as possible.

> 4. Main graphic - woot! However, to start us off, a slideshow might be too
> much. Just one, static graphic for now. Mostly because I just found out that
> we're outsourcing graphics to an agency, and each one will cost us. I'd
> rather save each outsourced graphic for a new update when needed, and not
> have them rotate and not change as frequently.
> 

This will be built to accomodate up to 3 units, but 3 units don't have to be used. Think of it as the "Feature Well" of the publication. It's where you would put evergreen content like: 100 Very Best Restaurants, Happy Hour Finder, The Best of, etc. editorial packages.


> 5. From the blog section. Awesome - except I'd like to use a small graphic
> for the first post, and then just headline links for the others. Let's cap
> it at 4 for now - until we get more content into the blog. This way, I can
> again make updates and keep it fresh, rather than not have new stuff on the
> page.
> 

This is a question back to you, I recommend not leading with an image, because until you have the image content strategy locked down, you might find that it doesn't work on the page and that it competes too much with the lede image and the faces from the facebook facepile. If you have a stream of high-quality images then I'd go for it, but if that's still being worked out there's reason enough not to overpopulate that space with another image.


> Which makes me wonder - should this be an RSS feed from the blog? Rather
> have it editible so I can choose the content that matches with the overall
> theme of that time. (Not all the posts will be front-page material.)
>  

As a phase 1, this will be an automated feed. We can make the top post "sticky" so you can always have control of that single item.

> 6. Firefox on Facebook - Awesomesauce. I'd like it to be the social plug in,
> so people can "like" us from this page.

OK


> 7. i'd prefer not to link out to Planet stuff to start. Most of that is so
> technical and "inside baseball" and this is going to be easy-peasy stuff for
> end users. Perhaps we can make this a "tip box?" Where we can take a
> SUMO-like tip and put it here, like the email newsletter does? I'm thinking
> of ways to fill the space.

This will be a text unit that you can put 3 items into, regardless of where you want to pull the content from. What you need though is the name for the unit. 


> 8. Campaign promotion 1 - Woo hoo! Good to go.

OK

> 
> 9. Many of the campaigns will also get blog posts, so let's keep the promo
> spot to just one. Plus, less work for graphics team right now.

OK

> 
> 10. I like the idea of "About" - but we could re-purpose it to be brand
> messaging. 

Either is fine. About is very useful for accessibility, screen readers, and SEO - that would be the item that I would recommend using.

> 11. Email sign up = yay.
> 
> Thank you so much for making up this wireframe. Way to jump start us!
> 
> Next step: Do you want to incorporate these changes into a new wireframe?
> Would you like me to take that on?

I will make the updates to the comp, as soon as you provide answers to the outstanding items above. 

Thanks!

Comment 4

[Carmen]

(In reply to mcbmoz from comment #3)
> (In reply to Carmen from comment #2)
> > Oooh. I like. :)
> > 
> > Mostly to scale it back a little (I know! This coming from the person who
> > wants it all!) here are my thoughts.
> > 
> > I'll go number by number
> > 
> > 1. no change. All good. 
> 
> OK
> 
> > 
> > 2. I like the subhead, but I'll want to change the text. Can do that later -
> > I think Matej had some ideas around clarifying "The Den" and content.
> 
> This should be done as soon as possible, so it can go into design finalized
> as it might inform some of the design.

I've got Matej on it! Should have by mid week next week
> 
> > 3. I'd like to keep the Twitter and Facebook items together in one social
> > space. Can we move this to the right side under the FB social plug in.
> 
> Of course. My advice is to leave it where it is, because depending on the
> Twitter strategy, I've seen the single space as a much more effective and
> readable unit v. the vertical space with multiple tweets. Since you won't
> always have fresh content in the lede, it's great to show readers that there
> is fresh content as quickly as possible.
> 

You have a point. My concern is that we use Twitter differently than Facebook sometimes, and there are Tweets that I would prefer not show up right under the header. Also, I thought there might be nice consistency with the blog design, if the right side of the landing page looked similar to the right side of the blog page. So people get used to where to find things. How about for first run, we move under Facebook on right, and then, as we track things, we'll see how it goes?

> > 4. Main graphic - woot! However, to start us off, a slideshow might be too
> > much. Just one, static graphic for now. Mostly because I just found out that
> > we're outsourcing graphics to an agency, and each one will cost us. I'd
> > rather save each outsourced graphic for a new update when needed, and not
> > have them rotate and not change as frequently.
> > 
> 
> This will be built to accomodate up to 3 units, but 3 units don't have to be
> used. Think of it as the "Feature Well" of the publication. It's where you
> would put evergreen content like: 100 Very Best Restaurants, Happy Hour
> Finder, The Best of, etc. editorial packages.
> 

Great. There if we need it. Don't have to use it. +1 - Do I need a name for this section? If so, it's "Top Story"
> 
> > 5. From the blog section. Awesome - except I'd like to use a small graphic
> > for the first post, and then just headline links for the others. Let's cap
> > it at 4 for now - until we get more content into the blog. This way, I can
> > again make updates and keep it fresh, rather than not have new stuff on the
> > page.
> > 
> 
> This is a question back to you, I recommend not leading with an image,
> because until you have the image content strategy locked down, you might
> find that it doesn't work on the page and that it competes too much with the
> lede image and the faces from the facebook facepile. If you have a stream of
> high-quality images then I'd go for it, but if that's still being worked out
> there's reason enough not to overpopulate that space with another image.
> 

I'm fairly confident that we'll have enough "hero images" from the "already created" pile that if we have the sticky post with a small graphic that we'll be fine. And then, to your point, we'll let the other posts be just headline text and blurb.

> 

> > Which makes me wonder - should this be an RSS feed from the blog? Rather
> > have it editible so I can choose the content that matches with the overall
> > theme of that time. (Not all the posts will be front-page material.)
> >  
> 
> As a phase 1, this will be an automated feed. We can make the top post
> "sticky" so you can always have control of that single item.

Good plan

> 
> > 6. Firefox on Facebook - Awesomesauce. I'd like it to be the social plug in,
> > so people can "like" us from this page.
> 
> OK
> 
> 
> > 7. i'd prefer not to link out to Planet stuff to start. Most of that is so
> > technical and "inside baseball" and this is going to be easy-peasy stuff for
> > end users. Perhaps we can make this a "tip box?" Where we can take a
> > SUMO-like tip and put it here, like the email newsletter does? I'm thinking
> > of ways to fill the space.
> 
> This will be a text unit that you can put 3 items into, regardless of where
> you want to pull the content from. What you need though is the name for the
> unit. 

I'll think on the name of the section. I'm leaning toward "Tip Jar" but for now, let's just go with "Tips"
> 
> 
> > 8. Campaign promotion 1 - Woo hoo! Good to go.
> 
> OK
> 
> > 
> > 9. Many of the campaigns will also get blog posts, so let's keep the promo
> > spot to just one. Plus, less work for graphics team right now.
> 
> OK
> 
> > 
> > 10. I like the idea of "About" - but we could re-purpose it to be brand
> > messaging. 
> 
> Either is fine. About is very useful for accessibility, screen readers, and
> SEO - that would be the item that I would recommend using.

Okay - let's call it About - and I can still use it for brand messaging. So it should be a text field, with the ability to link off.
> 
> > 11. Email sign up = yay.
> > 
> > Thank you so much for making up this wireframe. Way to jump start us!
> > 
> > Next step: Do you want to incorporate these changes into a new wireframe?
> > Would you like me to take that on?
> 
> I will make the updates to the comp, as soon as you provide answers to the
> outstanding items above. 
> 
> Thanks!

Does this give you enough for round 2? I have my 1:1 with Jane on Mondays, if that's not too ridiculous of a deadline. If it is - just let me know when you can work it in and I'll schedule a separate session with Jane.

Thanks!

Comment 5

[mcbmoz]

(In reply to Carmen from comment #4)
> (In reply to mcbmoz from comment #3)
> > (In reply to Carmen from comment #2)
> > > Oooh. I like. :)
> > > 
> > > Mostly to scale it back a little (I know! This coming from the person who
> > > wants it all!) here are my thoughts.
> > > 
> > > I'll go number by number
> > > 
> > > 1. no change. All good. 
> > 
> > OK
> > 
> > > 
> > > 2. I like the subhead, but I'll want to change the text. Can do that later -
> > > I think Matej had some ideas around clarifying "The Den" and content.
> > 
> > This should be done as soon as possible, so it can go into design finalized
> > as it might inform some of the design.
> 
> I've got Matej on it! Should have by mid week next week

Terrific! I'll cc him on this bug.

> > 
> > > 3. I'd like to keep the Twitter and Facebook items together in one social
> > > space. Can we move this to the right side under the FB social plug in.
> > 
> > Of course. My advice is to leave it where it is, because depending on the
> > Twitter strategy, I've seen the single space as a much more effective and
> > readable unit v. the vertical space with multiple tweets. Since you won't
> > always have fresh content in the lede, it's great to show readers that there
> > is fresh content as quickly as possible.
> > 
> 
> You have a point. My concern is that we use Twitter differently than
> Facebook sometimes, and there are Tweets that I would prefer not show up
> right under the header. Also, I thought there might be nice consistency with
> the blog design, if the right side of the landing page looked similar to the
> right side of the blog page. So people get used to where to find things. How
> about for first run, we move under Facebook on right, and then, as we track
> things, we'll see how it goes?
> 

Moved to the right rail.


> > > 4. Main graphic - woot! However, to start us off, a slideshow might be too
> > > much. Just one, static graphic for now. Mostly because I just found out that
> > > we're outsourcing graphics to an agency, and each one will cost us. I'd
> > > rather save each outsourced graphic for a new update when needed, and not
> > > have them rotate and not change as frequently.
> > > 
> > 
> > This will be built to accomodate up to 3 units, but 3 units don't have to be
> > used. Think of it as the "Feature Well" of the publication. It's where you
> > would put evergreen content like: 100 Very Best Restaurants, Happy Hour
> > Finder, The Best of, etc. editorial packages.
> > 
> 
> Great. There if we need it. Don't have to use it. +1 - Do I need a name for
> this section? If so, it's "Top Story"


No name needed, it's just silently considered The Lede, which is pretty standard :-)

> > 
> > > 5. From the blog section. Awesome - except I'd like to use a small graphic
> > > for the first post, and then just headline links for the others. Let's cap
> > > it at 4 for now - until we get more content into the blog. This way, I can
> > > again make updates and keep it fresh, rather than not have new stuff on the
> > > page.
> > > 
> > 
> > This is a question back to you, I recommend not leading with an image,
> > because until you have the image content strategy locked down, you might
> > find that it doesn't work on the page and that it competes too much with the
> > lede image and the faces from the facebook facepile. If you have a stream of
> > high-quality images then I'd go for it, but if that's still being worked out
> > there's reason enough not to overpopulate that space with another image.
> > 
> 
> I'm fairly confident that we'll have enough "hero images" from the "already
> created" pile that if we have the sticky post with a small graphic that
> we'll be fine. And then, to your point, we'll let the other posts be just
> headline text and blurb.

Updated per request. I'm still not a fan of putting so many images up there. When you leave that area as just text, it balances out the lede and the facepile. Otherwise, it starts to look like an older aol home page or yahoo news.

> > 
> 
> > > Which makes me wonder - should this be an RSS feed from the blog? Rather
> > > have it editible so I can choose the content that matches with the overall
> > > theme of that time. (Not all the posts will be front-page material.)
> > >  
> > 
> > As a phase 1, this will be an automated feed. We can make the top post
> > "sticky" so you can always have control of that single item.
> 
> Good plan
> 
> > 
> > > 6. Firefox on Facebook - Awesomesauce. I'd like it to be the social plug in,
> > > so people can "like" us from this page.
> > 
> > OK
> > 
> > 
> > > 7. i'd prefer not to link out to Planet stuff to start. Most of that is so
> > > technical and "inside baseball" and this is going to be easy-peasy stuff for
> > > end users. Perhaps we can make this a "tip box?" Where we can take a
> > > SUMO-like tip and put it here, like the email newsletter does? I'm thinking
> > > of ways to fill the space.
> > 
> > This will be a text unit that you can put 3 items into, regardless of where
> > you want to pull the content from. What you need though is the name for the
> > unit. 
> 
> I'll think on the name of the section. I'm leaning toward "Tip Jar" but for
> now, let's just go with "Tips"

I would avoid Tip Jar, as a non-profit it seems contradictory to what we stand for. As for the section, it's renamed Tips. I think if you revert to Featured Stories you will have more flexibility, as stories could be tips.


> > 
> > 
> > > 8. Campaign promotion 1 - Woo hoo! Good to go.
> > 
> > OK
> > 
> > > 
> > > 9. Many of the campaigns will also get blog posts, so let's keep the promo
> > > spot to just one. Plus, less work for graphics team right now.
> > 
> > OK
> > 
> > > 
> > > 10. I like the idea of "About" - but we could re-purpose it to be brand
> > > messaging. 
> > 
> > Either is fine. About is very useful for accessibility, screen readers, and
> > SEO - that would be the item that I would recommend using.
> 
> Okay - let's call it About - and I can still use it for brand messaging. So
> it should be a text field, with the ability to link off.

This will be a fixed field, so you need to nail down your messaging before we proceed to design.

> > 
> > > 11. Email sign up = yay.
> > > 
> > > Thank you so much for making up this wireframe. Way to jump start us!
> > > 
> > > Next step: Do you want to incorporate these changes into a new wireframe?
> > > Would you like me to take that on?
> > 
> > I will make the updates to the comp, as soon as you provide answers to the
> > outstanding items above. 
> > 
> > Thanks!
> 
> Does this give you enough for round 2? I have my 1:1 with Jane on Mondays,
> if that's not too ridiculous of a deadline. If it is - just let me know when
> you can work it in and I'll schedule a separate session with Jane.
> 
> Thanks!

Comment 6

[mcbmoz]

Attachment: Landing page wireframe #2

Revisions attached!

Comment 7

[Carmen]

Jane and I met yesterday, and here is our feedback

Overall, we'd like to create the page so that it doesn't scroll on most browsers, so we've made some recommendations in each section to accomplish that.

1. Good
2. Matej finalizing tagline
3. In this spot, instead of a graphic slideshow where the text is embedded in the graphic, we'd like to have a graphic with headline text underneath, and space for blurb text. Mostly for localization purposes going forward and graphics/brand direction. 
5. From the Blog - we'd like to have the top graphic sticky post, and then 3 headline/text items underneath. At the bottom, instead of "subscribe to feed" let's have text that says "Read more from the blog."
6. Great
7. Let's call this "Featured" as you suggest, but make it only 2 links, editable by me (or whomever)
8. Last Twitter post - need to make this only posts that come from @Firefox, not the replies. William tells me this code exists elsewhere, so we shouldn't have to recode it.
9. Campaign promo - good. Is It a graphic spot? Or graphic and text spot like a snippet (so we don't have to recreate images?)
10. About - let's represent this smaller. Can we make the text editible, so that we can change it each quarter with the new "theme" that Chris wants us to push?
11. If email sign up is in the universal footer, if we make the page not scrollable, the email sign up isn't needed as a separate entity. 

Thanks - I think we're well on our way!

Comment 8

[mcbmoz]

(In reply to Carmen from comment #7)
> Jane and I met yesterday, and here is our feedback
> 
> Overall, we'd like to create the page so that it doesn't scroll on most
> browsers, so we've made some recommendations in each section to accomplish
> that.

A significant amount of traffic that will come to this page will be coming from mobile devices, so scrolling is part of a great experience. That said, we can shoot for more of a landing page that's shorter, but I just want to design with mobile in mind here and shoot for making something that scales well for scrolling.

> 
> 1. Good
> 2. Matej finalizing tagline

Cool, can you drop it into the bug here when it's ready?

> 3. In this spot, instead of a graphic slideshow where the text is embedded
> in the graphic, we'd like to have a graphic with headline text underneath,
> and space for blurb text. Mostly for localization purposes going forward and
> graphics/brand direction. 

Sounds good.

> 5. From the Blog - we'd like to have the top graphic sticky post, and then 3
> headline/text items underneath. At the bottom, instead of "subscribe to
> feed" let's have text that says "Read more from the blog."

Sounds good.

> 6. Great
> 7. Let's call this "Featured" as you suggest, but make it only 2 links,
> editable by me (or whomever)

Sounds good.

> 8. Last Twitter post - need to make this only posts that come from @Firefox,
> not the replies. William tells me this code exists elsewhere, so we
> shouldn't have to recode it.

Sounds good.

> 9. Campaign promo - good. Is It a graphic spot? Or graphic and text spot
> like a snippet (so we don't have to recreate images?)

We can make it both.

> 10. About - let's represent this smaller. Can we make the text editible, so
> that we can change it each quarter with the new "theme" that Chris wants us
> to push?

The text will be editable, but only by a developer - trying to make this more manageable in terms of customization. Updating this quarterly will not be heavy lifting dev-wise.


> 11. If email sign up is in the universal footer, if we make the page not
> scrollable, the email sign up isn't needed as a separate entity. 

We defn want to make the page scrollable, because the different types of devices used by our users will need it to be flexible. In Q2 we learned from an eye tracking study that the email sign-up in the footer goes largely un-noticed by users, so you may have more luck integrating it on the right rail of the page. Let me know your decision. Here's a link to the heatmap http://www.flickr.com/photos/chrissiebrodigan/6192864391/ and the study's results: http://blog.chrissiebrodigan.com/2011/09/gazehawk-mozilla/
> 
> Thanks - I think we're well on our way!

Comment 9

[Carmen]

Thanks,

Here's the tagline

Blog Name: The Den
Blog Tag: A cozy corner of the Web filled with content just for you.

Shorter landing page = good. Let's add the email widget back in - right rail.

Yay - moving right along. :)

Comment 10

[mcbmoz]

Carmen, not sure where you are with this now that the blog has launched. Would you like me to update the wireframe with feedback from comment 8 or are you thinking about not doing this in Q4?

Thanks for the update!

Comment 11

[Carmen]

Chrissie - thanks for the nudge on this. I brought this up to Mike on another call, and he's pondering the Q4 resources. Also, Laura M and Laura F had some thoughts about this page, so I'm pondering those. A lot of pondering going on. :) But hopefully on Tuesday's call with you, Mike and Craig we can get an idea of feasibility.

Comment 12

[Carmen]

Mike,

Could you tell me if we will be able to move forward with this, with Craig, in Q1. I'd like to start talking through it with him soon, but I didn't know what you found out about resources. (Apologies for the response time here, November's MozCamps, then the holidays, then the email outage have thrown me off :) )

Comment 13

[mcbmoz]

(In reply to Carmen from comment #12)
> Mike,
> 
> Could you tell me if we will be able to move forward with this, with Craig,
> in Q1. I'd like to start talking through it with him soon, but I didn't know
> what you found out about resources. (Apologies for the response time here,
> November's MozCamps, then the holidays, then the email outage have thrown me
> off :) )

Carmen, we should also finalize the ux, see comment 8 and comment 11. TX!

Comment 14

[mcbmoz]

Carmen, gentle nudge on this, can we close as won't fix? or did you want to move forward in Q2?

Comment 15

[Carmen]

Hi Chrissie

Thanks for the nudge. I'll close. I have another bug in to sort of combine this idea with the current blog so as to not make a whole new page - with featured articles, etc.