1363889 - Update BMO to use new Mozilla branding

Status: RESOLVED FIXED

(bugzilla.mozilla.org :: User Interface, task)

Description

[alex_mayorga]

¡Hola!

This one is inspired by https://bugzilla.mozilla.org/show_bug.cgi?id=1351827

b.m.o still shows the mozilla logo not the moz://a one.

Hope I've picked up the right component.

¡Gracias!
Alex

Comment 1

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Hi Alex, 

Have there been updated guidelines for using our new logo on Mozilla web sites? 

We've had internal discussions about updating the logo but will need either guidance, and or support from marketing and graphics.

Now that the font is going live, this may be easier?

Comment 2

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Attachment: Current Mozilla.org header for comparison

Note that we switch between moz://a and m contingent on screen width.

Comment 3

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

Can we just do "bugzilla@moz://a" on the LHS in Zilla Slab, drop the old "file tab" and be done with it?

Comment 4

[alex_mayorga]

¡Hola Emma!

It doesn't look like https://www.mozilla.org/en-US/styleguide/identity/mozilla/branding/ is updated yet.

That very page still shows the old "file tab" at the top and the shiny new moz://a logo in the footer =)

I quite like your proposal to "just do "bugzilla@moz://a" on the LHS in Zilla Slab, drop the old "file tab" and be done with it" it would be exactly the kind of simplicity the new branding is aiming for and on the plus side would save everyone 4 KB in each page load for tabzilla.png ;-)

I'll say go for it or if you're willing to be nagged with lots of n00b question please mentor me into the change.

¡Gracias!
Alex

Comment 5

[Emma Humphries ☕️🎸🧞‍♀️✨ (she/they) [:emceeaich] (Pacific Time) use needinfo]

I've talked with the branding team and will be working with them on a plan for this.

Comment 6

[Dylan Hardison [:dylan] (he/him)]

Attachment: front-page.png

Comment 7

[Dylan Hardison [:dylan] (he/him)]

Attachment: front-page.png

wrong one, this one is the one with my notes

Comment 8

[Dylan Hardison [:dylan] (he/him)]

Attachment: bug-updates.png

Comment 9

[Dylan Hardison [:dylan] (he/him)]

Attachment: searches.png

Comment 10

[Dylan Hardison [:dylan] (he/him)]

Okay, attached are three places that I think could use some work. They are:


front-page.png:  https://bugzilla.mozilla.org
bug-updates.png: https://bugzilla.mozilla.org/show_bug.cgi?id=1363889 after making an attachment
searches.png:    https://bugzilla.mozilla.org/buglist.cgi?quicksearch=stuff&list_id=13636354

I have a resource available to make the changes to templates and test, just need some designer input/direction!

Comment 11

[Kohei Yoshino [:kohei]]

Attachment: header redesign mockup

The current branding guidelines are here:
https://mozilla.ninja/logosystem

Bugzilla@Mozilla could be designed by following the "Logo above" sample, however it will be 2 lines and won't fit in a narrow header. My idea is using the protocol icon suggested at the bottom of the page.

We can also apply the fixed header idea in Bug Bug 1330451, and reorganize menu items at the same time. See the attached mockup for how it may look.

Comment 12

[Kohei Yoshino [:kohei]]

Attachment: header redesign mockup v1.1

This one might be better.

Comment 13

[Kohei Yoshino [:kohei]]

Attachment: header redesign mockup v1.2

Using Material Icons instead of Font Awesome.

Comment 14

[David Lawrence [:dkl]]

(In reply to Kohei Yoshino [:kohei] from comment #13)
> Created attachment 8879866 [details]
> header redesign mockup v1.2
> 
> Using Material Icons instead of Font Awesome.

Woah that is really nice!

Comment 15

[Kohei Yoshino [:kohei]]

(In reply to Kohei Yoshino [:kohei] from comment #11)
> The current branding guidelines are here:
> https://mozilla.ninja/logosystem
> 
> Bugzilla@Mozilla could be designed by following the "Logo above" sample,
> however it will be 2 lines and won't fit in a narrow header. My idea is
> using the protocol icon suggested at the bottom of the page.

They have somehow removed the protocol icon example from the Logo System page today, though It still says "For sub brands, teams and special projects, iconic symbols can be used to represent the brand." I think it makes sense to use the [://] icon here to distinguish Bugzilla from other Mozilla sites serving end users.

If people would love the mockup, I'll implement the new header after SF All Hands.

Comment 16

[Dylan Hardison [:dylan] (he/him)]

(In reply to Kohei Yoshino [:kohei] from comment #15)
> (In reply to Kohei Yoshino [:kohei] from comment #11)
> > The current branding guidelines are here:
> > https://mozilla.ninja/logosystem
> > 
> > Bugzilla@Mozilla could be designed by following the "Logo above" sample,
> > however it will be 2 lines and won't fit in a narrow header. My idea is
> > using the protocol icon suggested at the bottom of the page.
> 
> They have somehow removed the protocol icon example from the Logo System
> page today, though It still says "For sub brands, teams and special
> projects, iconic symbols can be used to represent the brand." I think it
> makes sense to use the [://] icon here to distinguish Bugzilla from other
> Mozilla sites serving end users.
> 
> If people would love the mockup, I'll implement the new header after SF All
> Hands.

This has my full and overwhelmingly enthusiastic support -- predicated only marketing/branding folks being okay with it.

Comment 17

[Kohei Yoshino [:kohei]]

By the way, did Elasticsearch-based Quick Search (Bug 1184823) have dropdown results like this? https://twitter.com/BzDeck/status/667857793517391872

I thought I tried Elasticsearch somewhere once before but forgot how it worked. If such functionality is not included yet, I'm happy to implement it as part of the redesigned global header to wow people.

Comment 18

[Kohei Yoshino [:kohei]]

Attachment: header redesign mockup v1.3

Adding some comments, making Notifications/Requests button iconic.

Comment 19

[Kohei Yoshino [:kohei]]

See also: http://design.firefox.com/photon/

I'll develop more detailed design spec after All Hands, including the menu for signed-out users.

Comment 20

[Gervase Markham [:gerv]]

Do we need a "Browse" option? It would be useful to get figures on how much that option is currently used. I never use it. (I may, of course, be exceptional.)

Gerv

Comment 21

[Kohei Yoshino [:kohei]]

Attachment: header redesign mockup v1.4

I myself sometimes use the Browse page to find an appropriate component when I triage bugs, but yes, we could just put it in the Extra drop down menu because the quick search bar will integrate the component finder :)

Replaced the :// icon with the official M icon as discussed with b-team today. Updated comments.

Comment 23

[:Atoll]

What is the ETA for this?

Comment 24

[:Atoll]

(Sorry, I meant to not include that because I was wrong about the link.)

Comment 25

[Kohei Yoshino [:kohei]]

Sorry I'm late here. I think the blurry, obsolete wordmark should be replaced soonish rather than waiting for the complete global navigation overhaul. Nowadays Mozilla sites are having the new moz://a wordmark on the *footer*. I'm not sure if the footer would be retained during the upcoming design refresh, but we could probably follow the best practice for now. Will prepare a pull request.

Some examples:
https://support.mozilla.org/
https://addons.mozilla.org/
https://developer.mozilla.org/

Comment 26

[Kohei Yoshino [:kohei]]

As a bonus, the Cookies link could be added as seen on other sites, especially because we are reimplementing Google Analytics.

Comment 27

[Kohei Yoshino [:kohei]]

Attachment: pull request