[nav] - Redesign navigation bar

[kristinashu]

Simply the main navigation and make it more scalable. Few things to think about:

• scalable so we can add badges (and eventually an About page)
• simplify icons and text
• how to login and show user profile (possible add profile pic to align with thimble)
• make it sticky
• possibly remove different colours for each sections
• how to show secondary pages
• rethink footer #1258

[kristinashu]

/cc @sabrinang planning this together

[sabrinang]

Some general IA I've been thinking about in some wireframes (https://redpen.io/upceaae7c440058962) that may inform this navigation bar redesign. Noting it here for now but could be filed as separate IA issue.

---

ABOUT

• Mozilla Learning and universal web literacy (mission)
• Web Literacy Map (framework)
• Teach like Mozilla (values)

CURRICULUM

• Database

COMMUNITY

• Directory
• Discourse

TRAINING / PROFESSIONAL DEVELOPMENT

• Badges

INITIATIVES / PROGRAMS

• Mozilla Clubs
  • Leadership Roles: Club Captain or Regional Coordinator
• Maker Party
  • Leadership Role: Maker Party Host
• Mozilla Hive
  • Leadership Role: Hive Member
• Mozilla Fellowships
  • Leadership Roles: Fellow (in Advocacy Open Web, Science, Open News or MDN)
• Mozilla Festival
  • Leadership Role: Space Wrangler

TOOLS

• Thimble
• Webmaker
• X-Ray Goggles

[kristinashu]

@sabrinang love this IA! I think it will be so much clearer for users. Any idea on how/when we'll be able to start implementing this?

[hannahkane]

I also like this a lot!

cc @chadsansing to comment on the placement of Teach Like Mozilla specifically. My sense is that, while we might have some of the current TLM content in the About section (maybe in a sub-section called "Our Values"), most of the TLM content would actually fit under Training/Professional Development.

Would like to test this IA with users before implementing.

[jgmac1106]

Off topic, but these are amazing. One of the greatest assets I have gotten out being involved in MLN in watching designers work. Not just designers but webby Mozillian designers. I have mentioned it before but their is a unique type of learning occurring that places design in a dance a with inquiry.

On Wed, Sep 16, 2015 at 5:38 PM hannahkane notifications@github.com wrote:

I also like this a lot!

cc @chadsansing https://github.com/chadsansing to comment on the placement of Teach Like Mozilla specifically. My sense is that, while we might have some of the current TLM content in the About section (maybe in a sub-section called "Our Values"), most of the TLM content would actually fit under Training/Professional Development.

Would like to test this IA with users before implementing.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/teach.webmaker.org/issues/1259#issuecomment-140901804 .

[chadsansing]

I dig these.

In the future (hopefully), TLM will be both a landing resource (brief, but extensively linked) and a curriculum category, largely for PD, so it may wind up with its own space, as well as on /activities as modules tagged TLM. I don't know if that helps, but that is what I'm thinking right now.

[hannahkane]

Suggestion for terminology (based on MLN team call that's happening right now): instead of "Professional Dev / Trainings," let's say "Leadership Development" and have "Teach Like Mozilla curriculum" and "Badges" as sub-items.

[sabrinang]

Also to note, resources like working open guide http://mozillascience.github.io/leadership-training/index.html (science lab put together for fellowships and was mentioned in whistler it might go on MLN?) could potentially have a home under "Leadership Development" as well

[chadsansing]

@sabrinang, definitely. cc @zee-moz.

[lauradereynal]

cc

[sabrinang]

we have mozilla fellowships considered in the upcoming nav but there are also ideas of it having its own home on https://github.com/MozillaFoundation/plan/issues/565

[sabrinang]

Mockups of how the structure of redesign could look on desktop Note: more content to be determined and to be added so there will be more on the menu and icons are placeholders In the menu you can expand a section at a time but this is how it would look if it was all was expanded to show items:

[hannahkane]

Nice. Would love to user test vocabulary and structure, to see if users can intuit the content in each section.

My instinct is to demote "About MLN" and maybe even "Tools" and maybe even "Initiatives." Could we consider an IA that has a secondary nav for items you'd visit less frequently?

[sabrinang]

redesign of navigation may be blocked by https://github.com/mozilla/teach.mozilla.org/issues/1260#issuecomment-140234632 as we think a distinct MLN logo or wordmark brand is needed

[kristinashu]

Come across this article on horizontal vs vertical nav, something to consider and keep in mind when we get to this ticket http://www.smashingmagazine.com/2010/01/the-case-against-vertical-navigation/

[hannahkane]

Interesting article. It definitely reminded me that we should focus our IA as much as possible. Looking at my comment above, I'm still very much interested in figuring out how to keep the primary nav limited to content that's likely to change or be referenced frequently. Static content should be easy to find, but isn't likely to be referred to by users very often. One possible exception to this is Clubs content, but only for Club Captains and RCs. Perhaps the experience is slightly different for those authenticated users who will likely want to get to, say, their Club reports very easily.

[hannahkane]

@kristinashu - we've done this, haven't we?

[kristinashu]

Yup I think so, closing!