682987 - Design WP theme for User Engagement Blog

Status: VERIFIED FIXED

(Marketing :: Design, task)

Description

[mcbmoz]

Tara,

This is a bug to design a theme, very similar to what was just done for Gary for a blog that Carmen will work from for her original content publishing needs.

I'll let Carmen and Jane chime in with their requirements in the next comment.

~cb

Comment 1

[Tara (musingt)]

Thanks, assigning to Ty since he's our blog theme-ing master right now.  Carmen/Jane, please provide some direction around content, and timing.  Thanks.

Comment 2

[Carmen]

Had a pow-wow with Ty this morning, to get some guidance on what I could do with the design. Here's some more information on the design of the blog category after our call. 

Base the design off of Gary Kovacs' blog. Bug 679171

Title - We're meeting tomorrow to talk branding, but I was hoping to add a little bit of a graphic design to the name of the blog. (similar to how Add-ons blog has their mascot) Some kind of graphic treatment to the name, since the audience will be end-users like our Facebook fans.

Post area - Date, title, comments. Don't see a current need to post the category. Would really like to add the Facebook Like button and Tweet This button (on the post level) to the top. Either in the header, or just above the text. 

Right column -
Top: Follow us on Facebook/Twitter buttons with text - Follow along!
Next: Email Subscribe field with text - Stay in touch, subscribe to our email.
Next: Download latest Firefox version buttons - 1 for desktop, 1 for mobile (the goal here is to make this page more of a funnel, so people don't plop themselves onto the blog and then not have a way to engage more.)
Recent Tweets: from @Firefox (just the posts, not the @replies)

Hopefully - these can all be above the fold on a laptop screen (with the recent tweets starting above the fold)

Timing: How does this sound? We meet tomorrow (Aug 31) to talk branding/naming, so can we start the rest of the design, I'll get the name dropped into the bug asap after we decide on a path and can we have it done pre- all hands? (I think the desired implement date is Sept. 30)

Thanks

Comment 3

[Tara (musingt)]

Hey Carmen, thanks for this.  Lets definitely see how tomorrow's discussion goes and then we can figure out the best next steps and appropriate timing.

Comment 4

[Tara (musingt)]

Quick update: Carmen is going to draft a quick sketch of the content she'd like on this page, we'll formalize that into a higher fidelity mockup (if needed), and have Ty crank out a design based on the existing templates.

Comment 5

[Carmen]

Uploaded my strawman wireframe - I am clearly not a designer. :) Let me know what I can do as far as next steps go. :)

Comment 6

[Carmen]

Attachment: mock up of what I'd like from the blog template for Clickables

PDF mock-up of what I'd like to see from the blog template for Clickables.

Comment 7

[mcbmoz]

Comment on attachment 562753 [details]
mock up of what I'd like from the blog template for Clickables

Ah! You went with my idea for "Clickables!" from the original wireframes, so cute!

Comment 8

[Carmen]

Yes! It was splendid! Matej and I brainstormed ideas, and always came back to that one.

Comment 9

[Ty Flanagan]

Attachment: UserEngagementBlog_TheFoxDen_Mockup

Suffered a Photoshop crash - had to redo most of the design today and the "Fox Den" graphic.

Comment 10

[Carmen]

Comment on attachment 566367 [details]
UserEngagementBlog_TheFoxDen_Mockup

Ty - LOVE IT :)

Just a few nitpicky things. :)

1. The name is just "The Den" - we're trying to keep "Firefox" and "Mozilla" out of the branding for now. But I think if we just changed the wording, the graphic is still fitting!

2. For the "Subscribe to Firefox & You" Can we make it "Subscribe to our Firefox & You Newsletter"

I'm going to ask Jane to take a quick look tonight and see if she has any extra comments.

Thanks for working on it so hard after Photoshop ate your homework. :)

Carmen

Comment 11

[Carmen]

Comment on attachment 566367 [details]
UserEngagementBlog_TheFoxDen_Mockup

Oh, and the subhead should remove Firefox as well. Missed that the first time.

Comment 12

[mcbmoz]

Comment on attachment 566367 [details]
UserEngagementBlog_TheFoxDen_Mockup

Please take this feedback with a grain of salt:

-add the main download button below the Firefox tab to fit in with the site (not depend on the affiliates button)

-include author's name and profile pic to humanize the content

-Subscribe to Firefox & You on the Fox Den blog makes it seem like different publications (which I think the are), can you include copy about what Firefox & You is for the user? Most blogs send their content out in a newsletter at the end of each day, so I can see this being confusing for users.

-search blog is good to have, but also important are the archives and tags (popular tags especially). 

-might consider adding a read more to each post, unless these posts are meant to be full posts v. excerpts

-might consider using one sticky post with full text and the rest on the page being excerpts

Comment 13

[Carmen]

Matej just finished the tagline, so let's make it say

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

Comment 14

[Carmen]

Ty and I had a phone conversation this afternoon and here's what we came up with.

1. We're changing the graphic and the title to The Den - adding the tagline from Matej listed above.
2. Ty is going to look into making the subheads on the right rail "pop" a little more. That font is the blog standard, but he's going to look at options to make it stand out a bit more.
3. We're going to rename the Firefox & You Subscribe section to "Subscribe to our Firefox & you newsletter"
4. Facebook social badge - we're going to remove the update portion of the widget, making it just the top section, with the logo, the "like" button, number of fans, etc. Because fitting it into the right rail is too squished.
5. We're going to add a tag cloud
6. We're going to add an archive
7. We're going to keep the "affiliates" button, but put a separator of some sort between the button and the text promo for affiliates.

Ty says he can have the changes done by tomorrow, Oct. 13th. :) Yay!

Comment 15

[Carmen]

(In reply to mcbmoz from comment #12)
> Comment on attachment 566367 [details]
> UserEngagementBlog_TheFoxDen_Mockup
> 
> Please take this feedback with a grain of salt:

Nope - thanks for the feedback!

> 
> -add the main download button below the Firefox tab to fit in with the site
> (not depend on the affiliates button)

Perhaps we can look into this for phase 2. I'm trying my hardest not to break the existing blog template to minimize time-to-launch. And that's breaking the template. We also wanted to promote the affiliates buttons (since it is a blog) but we're going to separate the button and the text for affiliates so people know they can click on the button to get the latest version.

> 
> -include author's name and profile pic to humanize the content

A note for phase 2. Right now, it's just lil' ol' me posting. I don't want to turn this into "Carmen's blog"

> 
> -Subscribe to Firefox & You on the Fox Den blog makes it seem like different
> publications (which I think the are), can you include copy about what
> Firefox & You is for the user? Most blogs send their content out in a
> newsletter at the end of each day, so I can see this being confusing for
> users.
> 
I think we all agreed that this was a little wonky, and we changed the text to be more clear.

> -search blog is good to have, but also important are the archives and tags
> (popular tags especially). 

Adding those in! Good catch. My fault for not including them in my mock.

> 
> -might consider adding a read more to each post, unless these posts are
> meant to be full posts v. excerpts

I think, to start, let's make them full posts. The posts shouldn't be more than a few paragraphs. A note to look at for phase 2

> 
> -might consider using one sticky post with full text and the rest on the
> page being excerpts

Another phase 2 to ponder. :)

Appreciate the input.

Comment 16

[Ty Flanagan]

Attachment: UserEngagementBlog_TheFoxDen_Mockup (revised)

Comment 17

[Carmen]

Comment on attachment 566916 [details]
UserEngagementBlog_TheFoxDen_Mockup (revised)

By George, I think we've got it!  :)

I'm going to show to Jane one last time.

I have a question - maybe it's for round 2 of this process. Is it possible, in our Blog, to add a "Like" button from Facebook beside the comment bubble? Curious.

C

Comment 18

[John Slater]

Nice work Ty!

Comment 19

[Carmen]

Jane has given her +1 so this is ready to roll!

Chrissie: Let me know next steps. :)

Comment 20

[mcbmoz]

Hey Ty,

Can you attach a zip of the final PSD, then I'll move things over to implementation.

Really terrific work on this, whimsical and classy!

Carmen, once we have the PSDs, we'll move over to Bug 683008 for implementation. This is something to be really proud of, it serves the user and the brand beautifully. You go girl!

Comment 21

[mcbmoz]

ping Ty :-) files por favor!

Comment 22

[Ty Flanagan]

http://mozilla.tyflanagan.com/artwork/TheDen/Moz_TheDen_Final.psd.zip

Comment 23

[Tara (musingt)]

(hello!) are we good to close this out?

Comment 24

[Carmen]

Hi Tara - the design is finished, but I wasn't sure if we keep this open until it launches, in case there are any last-minute issues? If not, we can close it.

Comment 25

[Tara (musingt)]

If it's already in implementation and files were transferred... I'd announce this bug closed, and we can always reopen or address changes when the time comes :)