Foundation.mozilla.org: Revised Projects + Get Involved component for Home Page

Created on 4 Apr 2017  路  16Comments  路  Source: mozilla/foundation.mozilla.org

Issue:
With the new required order ("Get Involved" component right after "People") our Network Home Page looks unbalanced and it doesn't flow very well, which can disorient our users.

Proposed solution:
We could add "Projects" inside the "Get Involved" - the rationale behind it is that by going to Pulse, people can contribute with the projects, which is a way to get involved.

Here are the proposed mockups:
Featured on the left
Featured on the right

The image would be reworked to fit more projects and look more polished if we go with one of those options (I just scaled it for now).

My questions are:

  1. Do you think it makes sense?
    _I find a bit weird the other 3 projects have an action attached to them while the projects are more "see projects", they take the users to a more exploratory than actionable page. Maybe it is something we can solve with copy? Maybe there is another alternative?_
  2. Featured project left or right?
    _I think the answer to this question is related to the decision on #237 since those two components will be close._
  3. Could we remove the "Projects" from home page if we all agree it doesn't fit where it is now?
    _In order to make this decision we need to understand the importance and role of "Projects" on this page_

Curious to see what you think or offer a new perspective to this that I may not be seeing.

@xmatthewx @hannahkane @sabrinang

engineering

All 16 comments

Suggested copy: "Open-source apps. Web literacy curriculum. Guides for fostering gender equality. Discover and collaborate on projects made by and for our Network."

Here is a screenshot with new copy and only 3 items applied on this section:
screen shot 2017-04-04 at 1 24 08 pm

I think I dig this. Curious what each of you think @hannahkane @taisdesouzalessa @sabrinang.

Together with the new people box above, news below, feels really balanced, approachable, and strong to me.

I definitely think this is a great place to start, and with analytics + member feedback, we'll be able to see what iterations are needed.

@taisdesouzalessa - Let's keep the Fellows CTA since applications are opening this month, and temporarily remove the Leadership Training CTA (we'll bring in back soon!)

I agree with the points here about being stronger this way, with less content and also about after when get analytics and member feedback we can iterate more on this component if we see opportunities to improve.

Here is the screenshot following @hannahkane's recommendation:

screen shot 2017-04-04 at 3 41 07 pm

Looking good. Let's wait before we move this engineering, see if we can get feedback from Mark/Chris

Revised estimate (5) based on newest feedback from Mark; includes both design and engineering.

whoops. wrong issue. deleting and moving to people box issue.

Forgive the sloppy doodle. Let's a do a mock up that uses Thimble or one of Coral's project.

@hannah do you mind adding Ask or Talk to Pulse if you have time today?

Join this project would go directly to the Project's get involved link.

get-involved-project

@xmatthewx here are the proposals for this component:

V1:
image

V2
image

One question: when user clicks on "Join this Project", would they go to https://thimble.mozilla.org/en-US/ ?

Looks good. Is the only difference between v1 and v2 the thumbnail/box treatment? v1 looks nicer to me, but no strong opinions here.

The Join link would be the contribute link on many projects in Pulse, not the visit link.

Let's swap in Coral for now. They have a strong contribute page.

The only difference is the box treatment. V1 is my favorite too - the component is more interesting there I think.

Here is Coral applied to V1:

get-involved-cms

  • "Join" link on project will use the Get Involved link from Pulse.
  • Thumbnail should link to "View link" or be static.

For this component, we will want to display a specific project rather than the latest featured. (Projects page will continue to pull latest.)

We can identify project by ID (api). We can update this ID initially in Github, but will need to add that as a thing in the CMS eventually.

Design in most recent comment above is ready for review by engineers. https://github.com/mozilla/network/issues/256#issuecomment-293647031

Note this requirement: https://github.com/mozilla/network/issues/256#issuecomment-293668330

Waht?! That was so fast. It looks great.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mmmavis picture mmmavis  路  4Comments

taisdesouzalessa picture taisdesouzalessa  路  5Comments

xmatthewx picture xmatthewx  路  3Comments

taisdesouzalessa picture taisdesouzalessa  路  5Comments

taisdesouzalessa picture taisdesouzalessa  路  3Comments