Foundation.mozilla.org: Design About pages

[xmatthewx]

(unblock redirect of moz.org/foundation)

Identify critical legal content on mozilla.org/foundation. Move to bottom of foundation/about.

Then: Redirect https://www.mozilla.org/en-US/foundation/.

Note: follow up with full About page revision.

[kristinashu]

@natalieworth is doing design https://redpen.io/p/zqf14b11910982f63a

I've added content to Wagtail but there's a lot of styling that needs to be done first.

Content is from here.

cc @alanmoo

[xmatthewx]

Designs are here: https://redpen.io/p/zqf14b11910982f63a

[kristinashu]

Initial CMS pages are live! https://foundation.mozilla.org/about/

@natalieworth please continue to improve on these pages. Some illustrations would go a long way! If you're feeling stuck try benchmarking some nice about pages.

[xmatthewx]

wah?! onward and upward!

[natalieworth]

I'll do some benchmarking for it this week @kristinashu :D

[natalieworth]

So benchmarks weren't great. 😟 They're either pretty text heavy or they've got photographs. I tried 1 illustrated version (which I don't like but included anyway). And then 2 photo version https://redpen.io/p/zqf14b11910982f63a

cc @kristinashu

[kristinashu]

Cool, I've added one of the images to the page https://foundation.mozilla.org/about/

For the illustration, don't feel too tied by what is on the site now. You can play around with the banner space you have in your new nav comp and the style you come up with can influence the rest of the site. So... it's good to have a mix of some quick improvements we can make (like adding the photo) but also some bigger pie-in-the-sky stuff!

[taisdesouzalessa]

Not sure if useful but posting here: MailChimp has a great About Us page, I really like the amount of pictures there and the fact that they highlight "Community" as well, which makes this page very human-centered. I also like this one (500px) because the timeline is super engaging. Twitter's is also very interesting (and different...)

[kristinashu]

Adding note from Jesse's wireframe slide:

We want to make the mission, manifesto, and strategy/theory of change come alive and show how they drive our work.

@jessevondoom please confirm but I think we're wanting to either: add the manifesto to our site (in a unique way, probably some illustrations but also possibly explore some different layouts and interactions) OR have some sort of unique CTA to link out to the manifesto.

[jessevondoom]

To @kristinashu's point:

I think centering the about section on the manifesto is a key to making it both more interesting and to explaining how/why we're focusing on the core IH prinicples.

I'm guessing we'll need a brainstorm style kickoff to really move things forward, but a few basic thoughts:

• We don't need to show all the original 10 manifesto points at the same time like the manifesto page does now — maybe we could use them in a similar style to the larger quote call-outs we've been playing with? Maybe something more stylized with links to key pages on the foundation site that show the work we're doing in that particular manifesto item?
• The four manifesto addendum points feel like meta-issues encompassing all our IH issues as well as the original manifesto points. We could maybe anchor the main page of the about section around a simplifed mission statement and those four points?
• Working in some kind of social share button like the one on the manifesto page could be powerful. "Show your support of a healthy internet by sharing the Mozilla manifesto..."
• Because they're bite-sized chunks it seems like we could probably do something visual with the manifesto points
• Feels like we could establish a design hierarchy that goes something like manifesto > IH issues > theory of change

All of those are just random thoughts. Let's study the current content of the about section and the manifesto and come up with some rough/early ideas on where we can go with this. After we have some initial concept we can move forward with additional wireframes and start understanding the content needs this section will have.

[taisdesouzalessa]

To add to the points above:

"...we could probably do something visual with the manifesto points"

and

"Working in some kind of social share button..."

an idea of exploration path could be to make them like cards, ready to share on Twitter (I think they call them Twitter Cards?). So if people click on the "Share" button, the full card goes with it and people can share the principle that is closer to their heart instead of the full manifesto. We could link the full manifesto in the card. Something like this:

[natalieworth]

Cool, thanks @jessevondoom @kristinashu @taisdesouzalessa I'll take a look at the About page content and do some rough ideas/ concepts that we could implement.

[natalieworth]

@kristinashu @jessevondoom @xmatthewx I put together rough thoughts here https://redpen.io/p/zqf14b11910982f63a based on some sketches (for the interim About page—the overview/strategy page).

Based on some benchmarks, there are some cool things we could do (e.g. timeline, video, images, and Tais's suggestion of the twitter cards)—but I feel like they don't currently fit the style or other interactions throughout the site. I want to add these options to a 'blue sky' version of this though.

I haven't explored the 'impact' section yet, but I feel that it would be beneficial if there was content instead of linking out to a page that feels off brand?

[kristinashu]

Yes! I would love to avoid having external links in the nav and I am really liking your Strategy page.

Let's all get together at All Hands to review these in person and decide on a final direction.

[kristinashu]

Next steps: (comps)

• [ ] Jesse to confirm final copy (Kristina)
• [ ] Create illustration (@natalieworth)
• [ ] Jesse to confirm final design (Kristina)
• [ ] Once confirmed, write specs/redlines (@beccaklam)
• [ ] Gather and crop images (Kristina)

[Pomax]

@kristinashu had this work completed? From what I can tell the current https://foundation.mozilla.org/en/about matches the work outline in this issue.