search

mozilla / community-development

Community Development Team planning repo
https://wiki.mozilla.org/Participation
Mozilla Public License 2.0
42 stars 23 forks source link

Volunteer Task - Community Education Portal Design #103

Closed emmairwin closed 9 years ago

emmairwin commented 9 years ago

Community Education Portal Design

We need to bring the Education Portal into design standards. Before we invest in LESS/CSS changes, it would be good to have a design mockup to work from.

http://education.mozilla-community.org/

Prerequisites

None, but assume you have comfort creating mockups/wireframes and have talent and personal interest in design.

Participation Steps

  1. Check out the Education Portal, and the Mozilla Style Guide.
  2. If you are interested in proposing a mockup, leave your name here so we avoid duplication of work (basically, if someone else is working on this, you can collaborate vrs working alone :)
  3. Submit your mockup here, if it's complete then it will be accepted and we will proceed with implementing it!
yofiesetiawan commented 9 years ago

Hi Emma,

I'm interested to submit mockup, but it will take sometime to do it...

emmairwin commented 9 years ago

Thansk @yofiesetiawan appreciate your time and interest! Do you want to have a chat first? Or just ping me when you have questions?

yofiesetiawan commented 9 years ago

Hi @emmairwin i would say, right now, we will need for logo design as well (first), which we expect Elio will help us on that. But while waiting for logo, i can start working on designing wireframe, will let you know when i already come up with result on this..

yofiesetiawan commented 9 years ago

Hi @emmairwin i've made a mockup for homepage, i consider to use smaller width for this site, since we have sort of little contents, so using wide kind of layout wouldn't be wise.

I've created a project on marvelapp, but i'll also share preview here...

mce-01-home

https://marvelapp.com/5ef7j3

emmairwin commented 9 years ago

@yofiesetiawan this is AMAZING , I will circulate it a bit for feedback but I have one question. Since most of the content will be curriculum ie: http://education.mozilla-community.org/modules/participation_design_thinking/workshop_preparation/ Do you still think narrow fits, that width? Or maybe when we do this, the side menu should be collapsible?

yofiesetiawan commented 9 years ago

Hi @emmairwin i'm proposing something like this for inside pages.

mce-02-inside

Mte90 commented 9 years ago

Little idea, add the social share button for improve the promotion? The mockup is amazing :-D

yofiesetiawan commented 9 years ago

@Mte90 Thanks! there would be 2 kind of social share, to the content detail page, and to share the site main url? or just the share button for the site main url?

Mte90 commented 9 years ago

I think that in the content detail page is better for share the focused content.

yofiesetiawan commented 9 years ago

This is an alternative for background, with contributors...

mce-02-inside-bgv2

emmairwin commented 9 years ago

Inside page LOVE. seriously this is so great. I'm torn on the contributor background, on one side I like how it feels - but worry it would be too busy? Others?

yofiesetiawan commented 9 years ago

Apply the new logo design from Elio...

mce-01-home-new-logo

yofiesetiawan commented 9 years ago

Adapting the new logo with increased width to 960px..

mce-02-home

yofiesetiawan commented 9 years ago

Try to be consistent on footer (from Elio) i put dummy for footer yet..

mce-02-home

geroter commented 9 years ago

Three pieces of feedback:

1) We should think about the purpose of the landing/home page and how content on this site will grow. My guess is that it needs content on the landing page. It also needs a more extensible menu of "curriculum" -- perhaps the teach.mozilla.org site design is a good example. Not sure if this is in scope of this project.

2) Please please the plain background. That other one is crazy busy.

3) I personally don't love the idea/proliferation of different logos for different things. Maybe this is a longer philosophical conversation, but my strong preference would be the Mozilla logo + a wordmark of "Community Education" (also need to think about that name!).

yofiesetiawan commented 9 years ago

Thanks @geroter

1) maybe @emmairwin can help to answer on this one.. 2) i think i also prefer the plain background.. 3) i have no comment about this, it depends...

emmairwin commented 9 years ago

1) This site has been an means-to-an-end and never full scoped to our needs, having said that it is built on P2PU's course in a box which partly funded by Mozilla for Teach Like Mozilla. (as background) For current purposes, I believe the front page is fine. I'm looking a lot at how it's put together, understanding we can swap images, button names etc. I prefer minimal where possible (for example badges should go).

2) Agree on no background tiles.

Having said that yes, the menu needs re-invented to allow for up to 8 top level items, with 2-6 sub items. Any ideas there?

on 3) I have to agree with George on Logo, I mean I like having it for branding within Mozilla (maybe that's something add on the footer of all curriculum), but that the site logo remain Mozilla which is recognizable as main content.

emmairwin commented 9 years ago

Lets put a hold on this until I have a chance to evaluate teach.mozilla.org (today or tomorrow), and then we can make decisions. thanks!

yofiesetiawan commented 9 years ago

Don't worry, we are now still only digging ideas with layout. I mean, when we already clear about the site content, sitemap, and structure, it'll be much easier and faster to decide what kind of layout that can fit best for this website.

elioqoshi commented 9 years ago

I disagree that there is no need for a logo here. Education is a big enough functional area to have its own subbrand. Also, its not like we are abandoning the Mozilla name in there. Just have a look at FSA, Reps, Mozilla Moderator, and Bug Sprints which work greatly like that.

geroter commented 9 years ago

I'm arguing the general and bigger point: I don't think it's good for our aims as Mozilla to have subbrands.

A few reasons:

Can you help me understand why they are important and desirable? On Aug 14, 2015 3:25 AM, "Elio Qoshi" notifications@github.com wrote:

I disagree that there is no need for a logo here. Education is a big enough functional area to have its own subbrand. Also, its not like we are abandoning the Mozilla name in there. Just have a look at FSA, Reps, Mozilla Moderator, and Bug Sprints which work greatly like that.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/participation-org/issues/103#issuecomment-131004087 .

emmairwin commented 9 years ago

Also are there examples of how other brands/especially in technology have handled this?

geroter commented 9 years ago

Let me ask the question another way: Do you have examples of other brands (particularly volunteer engaging organizations) that have the kind of mixed internal-external sub-brands that you see at Mozilla?

I don't have any examples, but that doesn't mean they don't exist :)

emmairwin commented 9 years ago

I did some testing on a fork of teach.mozilla.org which provided me with enough information to know it is a suitable substitute for the existing platform. Next steps before moving ahead with more mockups are:

full screen reps

yofiesetiawan commented 9 years ago

Hi, sorry, what are the things, that differentiate "teach.mozilla.org" to "education.mozilla-community.org"?

emmairwin commented 9 years ago

Hi @yofiesetiawan good question, here is a breakdown of the differences (cc/ @SOFTowaha this might help you too)

As far as design

From a technical standpoint the differences are

'From a 'launching style changes' perspective:'

From a maintenance standpoint:

emmairwin commented 9 years ago

Closing this one, as we start a new heartbeat next week. Once the technical decision is made on w hich platform will open a new one. Thanks for your patience and great work @yofiesetiawan

elioqoshi commented 9 years ago

@geroter I get your point, but then we are already too late. I for example believe that the Reps Polos have quite bad branding? Why? Because the only place you can read Mozilla is on the sleeve and on the neck. No one knows what ReMo is apart Mozillians.

jgmac1106 commented 9 years ago

I would have to agree with @geroter and @eliqoshi as a volunteer contributor I have no idea what the Mozilla acronyms mean (MoFo, MoCo, ReMo, MoPa, etc).

After awhile I started to infer what all these mean (if that is what you mean by internal brands) but when I got started it was somewhat intimidating. I needed a glossary.

yofiesetiawan commented 9 years ago

Sometimes, for new projects i like branding with something unique such as 'WebFWD' for example, that can just stand alone. Instead of something like Mozilla Community Education, Mozilla Webmaker (which now turns to an app), Mozilla Participation, Mozilla Learning Network, etc. In some cases, maybe it's proper, but maybe i prefer something new like code name 'Firefox', 'Thunderbird', etc. Just my personal thought. And we need to be careful when launching new project. We should research whether we can sync it to another existing project. And if we really launch new project, we need to be sure that it can be sustain. I'm wondering if we can just sync Mozilla Learning Networks, and Community Education to Mozilla Webmaker. Those are still about teaching the web...

asdofindia commented 9 years ago

@jgmac1106 does something like https://wiki.mozilla.org/Glossary help?

jgmac1106 commented 9 years ago

@asdofindia Yes it does. Thanks.

asdofindia commented 9 years ago

@jgmac1106 No, I mean there's some problem in documentation (in other words, we aren't using the Wiki properly), if a new contributor can't figure out what something means.

jgmac1106 commented 9 years ago

I think it was a symptom of a bigger problem that is being address across participation. I have been contributing for four years (last two years seriously) but everything I did was with webmaker.org and #teachtheweb. I just filled out mozillian.org profile (like ten minutes ago) as I did not know about it. Everything we did was through google groups (when I started), webmaker.org, twitter, and eventually discourse.

For the last few years a lot of educators followed a different contribution pathway that did not have us interact with resources (or people) that would help navigate the acronym alphabet soup.

I feel like much of this has been addressed since the Portland all hands last December. The emphasis on Git and the unifying of different contribution communities under a single banner seems to progressing well.

The terminology serves a purpose of signifying membership. When you know the specialized language of an affinity space like Mozilla you are basically speaking a membership card. We just have to make sure tools like the wiki are surfaced so language does not become a barrier.

On Sun, Sep 6, 2015 at 6:34 AM Akshay S Dinesh notifications@github.com wrote:

@jgmac1106 https://github.com/jgmac1106 No, I mean there's some problem in documentation (in other words, we aren't using the Wiki properly), if a new contributor can't figure out what something means.

— Reply to this email directly or view it on GitHub https://github.com/mozilla/participation-org/issues/103#issuecomment-138064423 .