Hacks blog rebranding to MDN visual identity

RESOLVED FIXED

Status

Marketing
Design
RESOLVED FIXED
3 years ago
2 years ago

People

(Reporter: ali spivak, Assigned: Lee Tom)

Tracking

Details

Attachments

(2 attachments)

(Reporter)

Description

3 years ago
>>Project/Request Title:
Hacks blog rebranding to MDN Hacks

>>Project Overview:
Update the branding and WordPress blog theme to re-brand the Mozilla Hacks blog as part of the MDN product family, specifically using the MDN Logo but retaining the feel of Hacks as a unique developer channel. 

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

>>Creative Specs:
WordPress theme, design for Hacks logo that incorporates the MDN logo/branding while keeping a unique feel for the Hacks blog. 

>>CTA and Design:
Current Hacks site:  https://hacks.mozilla.org/

Initial, unbranded redesign treatment/direction:
http://testmozilla.wpengine.com/hacks/
http://testmozilla.wpengine.com/hacks/2015/04/peering-through-the-webrtc-fog-with-socketpeer/


>>Expected Launch Date:
2015-09-18

>>Mozilla Goal:
Org Support

>>Mozilla Creative Collective:
No

>>Points of Contact:
mclaypotch@mozilla.com,

Updated

3 years ago
Duplicate of this bug: 1192938

Comment 2

3 years ago
Some open questions:

* Do we continue to call the blog "Mozilla Hacks", or change the name to "MDN Hacks"? (It's a bit wordy)
* Featured post Hero treatment. The plan is to have a default style for featured articles, and then a few custom treatments for special kinds of featured posts (es6 series, release posts, etc)
* Not sold on Fira Sans for article copy, but loving it for headers.
* Where should, if at all, tabzilla branding appear at mobile sizes
* Mobile search placement (likely just under masthead)
* "Recent Articles" on homepage- grid or list? Current UX for grid feels a bit cramped.
* Should author avatars appear in post grid? should they get a rounded crop?

Comment 3

3 years ago
Hi Potch, 

I'm going to need info Sean and Matej to weigh in on your questions. 

Thanks!
Flags: needinfo?(smartell)
Flags: needinfo?(matej)

Comment 4

3 years ago
Most of these seem like questions for Sean, but if it's being rebranded to MDN Hacks, that's probably what we should call it. The other possibility is to call it "Hacks blog."
Flags: needinfo?(matej)

Comment 5

3 years ago
Thanks Matej. Our goal with the Mozilla Hacks blog redesign is to align visually and 'experientially' with Mozilla Developer Network (MDN) - so that the two sites are seen as companion resources (more like kissing cousins than conjoined twins). :-) 

We have NOT made a decision to rebrand the blog as "MDN blog" -- afaik, there's pretty strong consensus across both teams (MDN and DevRel) to maintain the "Mozilla" name and brand in the name of the blog -  Mozilla Hacks - it is well-recognized and well-regarded among the web dev communities which are our primary target audience.

Comment 6

3 years ago
(In reply to havi hoffman [:havi] from comment #5)
> Thanks Matej. Our goal with the Mozilla Hacks blog redesign is to align
> visually and 'experientially' with Mozilla Developer Network (MDN) - so that
> the two sites are seen as companion resources (more like kissing cousins
> than conjoined twins). :-) 
> 
> We have NOT made a decision to rebrand the blog as "MDN blog" -- afaik,
> there's pretty strong consensus across both teams (MDN and DevRel) to
> maintain the "Mozilla" name and brand in the name of the blog -  Mozilla
> Hacks - it is well-recognized and well-regarded among the web dev
> communities which are our primary target audience.

Thanks, Havi. Perhaps it's the title of this bug, which says "rebranding to MDN Hacks," that's confusing me. Is that not actually what's happening here?
(Reporter)

Comment 7

3 years ago
oh, sorry, no the plan is to keep the Hacks name as is, but readjust the visuals to me more in linewith the MDN branding. I changed the bug title.
Summary: Hacks blog rebranding to MDN Hacks → Hacks blog rebranding to MDN visual identity
(Reporter)

Comment 8

3 years ago
Checking in on the status of this...
Flags: needinfo?(matej)

Comment 9

3 years ago
I unfortunately don't have any insight into this project.

Sean or Jenn, can you comment?
Flags: needinfo?(matej) → needinfo?(jbalaco)

Comment 10

3 years ago
Ali + Potch, 

Sorry for the delay here. This is a great start, but I'm wondering if we can take a pause. With Bradley Cohen starting and focusing on brand strategy for developers first, it seems like that might drive the conversation. Does this sound okay? 

If we need to get a refresh done immediately, we can continue with a review, knowing that most likely we will have to revisit the blog design again in the near future. 

Does that make sense?
Flags: needinfo?(smartell)
Flags: needinfo?(jbalaco)

Updated

3 years ago
Assignee: jbalaco → ltom
Status: NEW → ASSIGNED
Flags: needinfo?(aspivak)
Hi Jennifer - Potch and I met with Bradley yesterday about various things. He's all for us getting this shipped in Q3 as planned and roadmapped, and is comfortable with us moving forward on the redesign. Writing on behalf of Ali as well, since she's on PTO this week. 

Goal of this review request is to make sure we're not committing any visual design/brand *sins*! 

Thanks! TIA ltom :-)
Flags: needinfo?(aspivak)
(Assignee)

Comment 12

3 years ago
Hi Havi, Potch and Ali! 
Thanks for your patience. I've been hashing out some ideas for the Hacks blog with the Creative team. I realize you want to get a redesign out the door relatively soon (Q3 goal), so here are some recommendations I'm assuming won't be too hard to implement. Attached below are mockups. The two states basically shows the Search interaction at the top of the page. 

http://cl.ly/0L093m1a2o2F

Moz Hacks & MDN brand family: 
- Let's keep the basic backgrounds of the blog consistent with MDN - use of the 'blueprint' grid, similar Search/share interaction. 
- Let's employ Fira Sans fonts and weights styled more similarly to our other Moz/Firefox webpages 
- A new Mozilla Hacks mark in the upper left aligns the visual identity of Hacks closer with the MDN logo, but uses the 'dino star'  which nods to the older, red/yellow 'propaganda' logo we used to use. 
- simplified footer

Featured Article:
- I'm not sure how many opportunities we have to show a small graphic next to the Featured Article, but making the article the hero of the page would be a perfect place to do so.  It may be something to consider *not doing* if it's more unlikely (and non-sustainable) to have a graphic to show.  For the sake of mocking up, I just made the author's avatar, the main image. 
- Let's not repeat the Featured Article in list of Recent Articles
- If you'd like to cycle through say 3-5 Featured Articles, we could also introduce a small carousel in the hero area. We can designate which slide you're on with 3-5 dots etc. 

Let me know what you think of the mockups and if this is consistent to the type of refinements you had in mind. Also, let me know how else I can help - would it be easier to define all type styles? Is it helpful to have the PSD or would you prefer I provide assets for development etc. 

Hope you like it. Thanks!

Comment 13

3 years ago
Lee,

It looks great! Visually on-point. I was having trouble evoking the MDN brand but setting hacks apart from it, and I think this design does a great job with it. I'm not entirely sold on the hidden search box- perhaps only when the screen dimensions don't allow space for it? Also, is it possible to continue to use the MDN logo for brand? Those two nits don't really prevent me moving forward with the rest of the visual changes, so I'll get cranking on that. Thanks again!
(Assignee)

Comment 14

3 years ago
Created attachment 8662645 [details]
MDN_hacks_blog_04.jpg

I'm glad you like it, Potch! 
I was trying to mimic the interaction we use on the MDN homepage and de-clutter the header, but I can see how making the Search form more prevalent would be helpful to the user.  The share icons can float back up to the top next to Tabzilla and still look pretty clean there. 

Can you clarify what you mean about using the MDN logo here vs. a Mozilla Hacks logo?
Hi Lee, I think Potch is traveling, and we chatted briefly about this, so I'm jumping in: our preference is to use the existing MDN dino, rather than the dino in the star.

It felt to us too much like a Sheriff star, and not enough like the Hack star. Potch had done some experiments with the star earlier as well, and well, it felt like a Sheriff star then too... We ended liking the unstarred MDN style blue Dino better. 

Back to you, Potch....
(Assignee)

Comment 16

2 years ago
Created attachment 8663758 [details]
MDN_hacks_blog_05.jpg

Thanks for clarifying, Havi.  Take a look at the attached jpg and let me know if this is more in line with what you guys are thinking. Thanks!

Comment 17

2 years ago
Hi Potch, 

Is there anything else you need for this bug? I'm doing a bit of clean-up and want to make sure you're all set.

Comment 18

2 years ago
feel free to close this as the design is live :) we can manage follow-up tweaks here: https://github.com/potch/hax/issues/

Comment 19

2 years ago
Awesome! Thanks.
Status: ASSIGNED → RESOLVED
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.