Create preliminary wireframes

[flukeout]

Create preliminary wireframes based on this content doc.

Main Goals

• Determine navigation style
  • Side-menu with different sections like the Clubs Guides
  • Fixed header when page scrolls
  • None - just a long scrolling page
• Determine order and placement of content
  • Desktop & mobile
• Identify any missing content or asserts

Questions

• What is the primary objective of the site?
  • To get people to Sign Up?
• What is the main title of the site?
  • Women and Web Literacy?
  • Is there a tagline to go with that?

Assets & copy needed

• Large hero image
• Partner org logos

[flukeout]

I made wireframes
Please check them out here - https://redpen.io/p/re61bf6212ad72653e

• Option 1 - Rough content placement layout that follows the source content doc closely
• Option 2 - Rough content placement that puts the 3 main calls to action higher up
• Option 3 - More accurate content placement with more emphasis on calls to action

Please leave your thoughts, comments & feedback either here on in redpen, I'll also try to schedule a meeting to we can go over this in person.

Navigation
This is a one page site, but it is quite long, so we might want to have some navigation aids built in, the options are...

• No navigation, people will just scroll
• Side-navigation (good because it's already familiar to our audience
• Sticky header navigation - we don't use this on our properties, but it seems like it might work well here

In particular, please review Option 3 carefully as it has the latest content - it's a good way to gauge if anything is missing, or if the copy is too dense.

cc @jvallera @amirad @kaythaney

Up next

• After an initial found of feedback, I'll refine the wireframes again
• When we have agreement on the wireframes, I'll start creating some options for the final design

[hannahkane]

Nice job, @flukeout! I left some my two cents on the redpen.

[flukeout]

Questions

• Are there other ways to "Get in Touch" besides an email?
  • Twitter account?
  • Discourse forum?
  • Facebook page?
  • Github repo with issues?

[amirad]

Right now, there aren't any other ways to get involved. Maybe in the future? Or can we point to existing places were women and girls are joined into like @mozlearn on twitter or https://www.facebook.com/groups/mozillaclubs/

Left notes in redpen @flukeout - it's looking great, really love the #3 option with a move around of that get in touch.

I'm not sure if navigation is really needed but if so I would vote for sticky header navigation.

[hannahkane]

Ah, forgot to comment on the nav issue. I don't think the page warrants navigation just yet, but agree with @amirad that sticky header nav would be preferable.

[kaythaney]

Thanks, all!

On the "Get in touch" part - would suggest yes to setting up a GitHub repo
with a README on the project (@amirad, can also put the reports + resources
there in the interim) + starting a mailing list for people to sign up for,
and cross pollinate updates, reources + blog posts.

On Fri, Aug 12, 2016 at 11:56 AM, Amira notifications@github.com wrote:

Right now, there aren't any other ways to get involved. Maybe in the
future? Or can we point to existing places were women and girls are joined
into like @mozlearn on twitter or https://www.facebook.com/
groups/mozillaclubs/

Left notes in redpen @flukeout https://github.com/flukeout - it's
looking great, really love the #3
#3 option with a move
around of that get in touch.

I'm not sure if navigation is really needed but if so I would vote for
sticky header navigation.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#4 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAh17_F064xHmYBwoU2zw2biaH-9IfwPks5qfJe4gaJpZM4JhkwN
.

@kaythaney http://twitter.com/kaythaney/
@mozillascience http://twitter.com/mozillascience

[chrislarry33]

love the repo idea, +1

[flukeout]

I made updates based on the comments in the redpen and posted a new version called Version 2, available here...

https://redpen.io/szea2be8ce4f04074c

The pink areas called out in the wireframe either need content or a decision..

1. Hero image tagline
   • I think we should add one, do we have anything already?
   • Something like... "Working towards for gender equality on the open web."
2. Intro paragraph
   • Is the text too dense, too many references to Mozilla?
3. Start a Club call to action
   • We need some copy here
   • First stab: "Start a Mozilla Club in to advance our principles and mentor women in your community."
4. "Resources" heading
   • Seems a little plain and short
   • How about: "Learn more about our work"
5. "Collaborators" heading
   • Should have something like "We are Supported by"
6. Copy under Collaborators heading
   • Should we get rid of it? Content doc suggests we might want to

cc @amirad Can you please look over the Version 2 wireframe and advise on the points above?

[amirad]

Hero image tagline
How is.....Working towards an open, safe and innovate web for women every where.
Intro paragraph
Should we take out the last sentence? the "that's why in 2016..."
Start a Club call to action
Mozilla Clubs are regular, in-person gatherings of individuals working to create an open, accessible and equal web. Start a Mozilla Club to teach and connect with other women.
"Resources" heading
Super plain. I like "Learn more about our work" or "See more of our work"
"Collaborators" heading
Should have something like "We are Supported by" - how about "We are working with"
Copy under Collaborators heading
Should we get rid of it? Content doc suggests we might want to - I personally like it as it gives some framing, otherwise looks like they are our funders.

[hannahkane]

Additional two cents from me:

• Very minor edits to tagline: Working towards an open, safe and innovative web for women everywhere.
• Definitely vote for removing "That's why in 2016..."
• CTA: I'd recommend just "Mozilla Clubs are regular, in-person gatherings of individuals working to create an open, accessible and equal web." + the button
• Resources heading: I like either of Amira's suggestions.
• Collaborators: If they are not funders, I'd definitely go with, "Collaborators" or "Our Partners" or "We are working with".
• Copy under Collaborators: Amira has convinced me!

[amirad]

Thanks @hannahkane

We are working with funders and non-funders so either "Collaborators" or "We are working with"

[flukeout]

All of the changes above are reflected in Version 3, available here...
https://redpen.io/ak70c95248a85ebe37

The only outstanding issue is what to put in the footer, our options there are...

• Email - "Email Us" - emails Amira
• Twitter - "Say hi on Twitter" - links to MozLearn account
• Github - "Check out our repo" - links to Github repo
• Legal - Link to our Terms of Service (https://www.mozilla.org/en-US/about/legal/)
• ...anything else?

cc @amirad can you look over this list and advise?
cc @hannahkane anything 'standard' that I'm missing?

[amirad]

Email us should go to womenandweb@mozillafoundation.org

Looks great @flukeout

[hannahkane]

Can't think of anything else to add. Thanks, @flukeout.

[flukeout]

Closing this ticket and moving to #11 for visual design.