Home Page Iteration - merging tickets

[taisdesouzalessa]

This is the iteration of the home page that surfaced as a result of tickets #91 and #92.

ACTION ITEMS for "People" and "Projects" components:

• @sabrinang to further explore image approaches, considering the following guidelines:

  • don't develop artwork that is too generic
  • design in an easy way to swap images as needed
  • keep bg neutral so it is dependent on what photo/logo we choose

• Taís to design structure of mobile component and polish desktop component in terms of spacing.

@xmatthewx for this new home page iteration we need Kevin's help in a creating a compelling copy for those new components (please note we will have "Lorem Ipsum" in the "Opportunities" component

cc: @hannahkane @gvn

[taisdesouzalessa]

Prototype of new iteration (integrated with the rest of screens):

https://invis.io/ZJ9YTAGEA#/216715355_Home-Page-Opt1

[taisdesouzalessa]

Prototype of the mobile version of the new iteration:
https://invis.io/ZKAIKN1MN#/220168109_MOBILE-HomePage

[sabrinang]

Iteration on collage options and tints:
People Grey Tint/Diagonals

People Purple Tint/Diagonals

Project Grey Tint/Circles with subtle Diagonals

Project Purple Tint/Circles

**In context: **

@taisdesouzalessa @xmatthewx I like the grey option as it is more neutral but would love to hear your feedback on collage format etc.

[xmatthewx]

Neat! Two boxes, similar but contrasting.

Do we need the gray? Does it help even the photos out and recede?

I also prefer the gray over purple. And... I'm curious what it would look like if there was a few different filter colors applied to different people and projects. orangish, purplish, etc. might be totally ugly, but could become fun like candy.

Either way, I think we're close.

[xmatthewx]

@KevZawacki – We've moved people and projects up to the top of the homepage. I think the copy in these two boxes is good. Would you adjust anything?

I wonder if we should say Diverse members, one mission movement. To signal network rather than organization.

[taisdesouzalessa]

Those look so nice! I think the grey looks better because it gives the feeling of realism and honesty (these are real people, not people from an image bank), which I think it is important for this project. Although the way you used purple was very nice because it still feels realistic.

I find the diagonal treatment stronger due to the connection with the rest of the site. I also like the idea of filter with colors or even different opacity treatment for different people. It may look a little busy so maybe removing the gaps between the diagonal frames?

[hannahkane]

Suggested copy to replace the Lorem Ipsum in the Opportunities section:

Under Fellowships: "At Mozilla, we’re committed to providing research funding, mentorship, and project-based learning opportunities for community leaders."

Under Trainings: "Learn the basics of participation, collaboration, and sharing on community-driven projects. Discover what working open can do for your project, and explore open projects from across the Network."

[taisdesouzalessa]

Thanks @hannahkane! Is there any way to reduce the number of characters for Training? It almost fits but ideally it would have more or less the number of characters as Fellowships. If not possible, no problem. Here is a screenshot:

[hannahkane]

Probably fine to cut the last clause. So, "Learn the basics of participation, collaboration, and sharing on community-driven projects. Discover what working open can do for your project."

[KevZawacki]

@xmatthewx I like the look of 'People' moved up!

I prefer "mission" over "movement," but am OK with changing if you feel strongly.

Only other copy edit: removing "awesome."
So perhaps just: "Meet and connect with Network members."

[sabrinang]

Color treatment exploration and reducing spacing on diagonal collage:

In context:

I don't think it is quite resolved but let me know what you think so far

[taisdesouzalessa]

Here is the mockup with the latest copy edits:
https://invis.io/ZJ9YTAGEA#/216715355_Home-Page-Opt1

2 things:

• In the first card "Diverse members, one..." - are we using "mission" or "movement"?
• In the "Other opportunities" section, the CTAs were written by myself. It would be cool if @KevZawacki could take a look at them and see if he thinks they are strong enough and help us with our story, open to any suggestions there.

cc: @xmatthewx @hannahkane

[xmatthewx]

@sabrinang – I think I like the mix of color for the people box. Feels less necessary for projects, but maybe good for consistency. What do you think? Should we try a slight opacity on the white box? Good idea, bad idea?

[xmatthewx]

@taisdesouzalessa

• Kevin says mission, let's go with mission.
• Your copy in Leadership Training looks good to me. Fellowships should sound epic. @KevZawacki can help. Or @hannahkane could as she works with team on that page.

[hannahkane]

@xmatthewx - not exactly sure what you mean by epic. "Opportunity of a lifetime"? "Go on a journey with us"? "Join our elite corps of Fellows"? I'm guessing those aren't what you mean. :)

How about something a little more descriptive:
We provide research funding, mentorship, and exciting project-based learning opportunities to members working at the intersection of media, science, security, advocacy, and technology.

[xmatthewx]

When I read bios on fellows and their work, I see game-changing impact. Fellowship can change their lives and lives of others. I think our description is accurate, but not evocative enough.

Our prior cohorts might have been a fresh college grad looking for learning opportunities, but (unless I'm mistaken) our current and future cohorts are professionals with big aspiration. I think this is one place where our inclusiveness doesn't emphasize people very early on their professional arc. I could be wrong, but I think we frame this around impact, not learning.

[hannahkane]

Ooh...I like "game-changing."

How about: We provide funding and exciting project-based professional opportunities to members doing game-changing work at the intersection of media, science, security, advocacy, and technology.

[hannahkane]

Slight tweak: We provide funding and exciting project-based opportunities to professionals doing game-changing work at the intersection of media, science, security, advocacy, and technology.

[taisdesouzalessa]

Home Page has 4 iterations:

1. Mockup - form in the homepage
2. Mockup - small CTA
3. Mockup - form in the homepage/news in the middle
4. Mockup - small CTA/news in the middle

Decision on which one to use is being discussed at #71

[taisdesouzalessa]

This is the home page we agreed on:
https://invis.io/ZJ9YTAGEA#/216715355_Home-Page-Opt1

@xmatthewx I discussed the copy in the newsletter box with Hannah following your guidelines and we have this copy as final. What do you think?

Stay Connected
Sign up to receive updates with action opportunities and news from across the network.

Thanks for your word crafting, @hannahkane

It is ready to build @gvn and @alanmoo. I'll update it in Google Drive shortly.

cc: @sabrinang

[taisdesouzalessa]

Closing this ticket. Discussion for this page is in #141.