search

MozillaFoundation / Design

For all issues related to design at the Mozilla Foundation.
http://mofo.build/design
11 stars 5 forks source link

Impact Theme cms page #359

Closed kristinashu closed 4 years ago

kristinashu commented 5 years ago

We don't currently have a home for our new impact theme on our site. Let's start by designing a simple page and then explore other ways to expand it and integrate the theme through out the site.

Content

URL

Approvals

Future ideas

Once this basic page is up

cc @anilkanji @xmatthewx

kristinashu commented 5 years ago

Here are a couple rough comps we can use as a starting point (redpen is down but I'll upload these when it's back up).

Comp A

Unorganized list of projects (least amount of work and possibly all people would be interested in). Could be a sub page at /internet-health/IA. impacttheme copy 2@2x

Comp B

Group list, more like the internal PDF. impacttheme copy@2x

Comp C

Adding copy at the bottom of /internethealth. internet-health copy@2x

cc @xmatthewx @gideonthomas

gideonthomas commented 5 years ago

Based on https://medium.com/read-write-participate/consider-this-ai-and-internet-health-49209d71689a I would suggest the title - AI and Internet Health

xmatthewx commented 5 years ago

This all looks great. I think it's a great to start to help our wordsmiths dig in to compose the page.

kristinashu commented 5 years ago

I've updated the comps based on feedback from Lotta. We will add an intro section at the bottom of /internet-health https://redpen.io/jo68b087c3fcb1e905 that will link to the AI detail page https://redpen.io/fu12b47807cde36b5e.

Lotta is working on providing copy for these pages.

kristinashu commented 4 years ago

This is back in action and has a deadline of the Nov 14 board meeting.

Work has shifted so please reference this most recent working doc for goals and WIP copy.

kristinashu commented 4 years ago

Anil and Lotta are still finalizing the copy but I think it would be helpful to visualize it see it and see it laid out. @taisdesouzalessa could you please mockup a few different layout options (but sticking to existing Wagtail components)?

taisdesouzalessa commented 4 years ago

Sure! Will start this task now :)

taisdesouzalessa commented 4 years ago

Here are the options of layout for this page. Please note I didn't include any images yet (images are only placeholders) and I am still adjusting the spacing. I wanted to put the content into the CMS structure as soon as possible so you can visualize the structure and choose one of the 3 options.

Option 1:

In this option I explored the content divided in 2 pages. I find this version is the easiest to read and mobile-friendly.

https://mozilla.invisionapp.com/share/M4URKJ0G6D2#/392654752_Option1-Page1

Notes:

  1. you can click on "Overview", "Trustworthy Artificial Intelligence" and the on the button "Read more about Trustworthy AI". It is an interactive prototype to give you the closest idea to the live site.
  2. Click on "comments" on the bottom to see my notes. image. You can add yours there too.

Option 2:

In this option I added all the content to 1 page.

https://mozilla.invisionapp.com/share/M4URKJ0G6D2#/392667869_Option2-1pager

Note: I added all the content related to AI to the second half of the page. The goal is to create a clear distinction between the 2 main themes of content with no interruptions. So the copy that starts with "In 2018, Mozilla identified the explosion of devices,..." is now right above the content "For us, this means two things: human agency... "

Option 3:

In this option I added all the content to 1 page too. However the "Trustworthy Artificial Intelligence" copy blurb is in the middle of the page and there is an anchor link (if you click on "Read more about Trustworthy AI" the link will take you to an anchor down the page).

https://mozilla.invisionapp.com/share/M4URKJ0G6D2#/392667873_Option3-1pager

I'll be sending an email with the link for this GitHub issue as well.

@kristinashu @anilkanji @Lottarao

kristinashu commented 4 years ago

Nice Tais! I agree, the two page version is more digestible.

For the AI graphics, you can use the visual direction Sabrina set up in this ticket and the working files are here.

taisdesouzalessa commented 4 years ago

We are going for the Option 1 because it is easier for our audience to read it.

I am still working on the images for the page "Trustworthy Artificial Intelligence" but I would like to submit to stakeholders for content review, due to our approaching deadline.

https://mozilla.invisionapp.com/share/M4URKJ0G6D2#/392654752_Option1-Page1 https://mozilla.invisionapp.com/share/M4URKJ0G6D2#/392654753_Option1-Page2

Note: For the page "Trustworthy Artificial Intelligence" I feel we should have links for the 3 points we are raising at the end (e.g.: "Fellow Renee DiResta key in shifting...", "Following our evaluation of Google & Facebook’s... "). In this way, the audience can have more context if they wish (we could link to Rennee's Pulse profile or to an article about her in our blog...). Could you please provide the links you would like to add for each one of them?

@Lottarao @anilkanji could you please take a look at the mockup above and let me know if you need any modification?

cc: @kristinashu

taisdesouzalessa commented 4 years ago

Images are now updated and in place. Next steps:

  1. Move the content from my local machine to draft mode in the live site
  2. Gather design feedback
  3. Update content once I have the new version (expected by tomorrow) + design post feedback
taisdesouzalessa commented 4 years ago

Site was moved to DRAFT in production and design feedback was incorporated. Just waiting on copy edits from @Lottarao and the page will be published after that! 💯

Mockup: https://mozilla.invisionapp.com/share/M4URKJ0G6D2#/392654752_Option1-Page1

taisdesouzalessa commented 4 years ago

Here are the pages on "Draft" mode. Please make sure you are logged in to the CMS Admin in order to see it:

Main Page (please note this page doesn't have the nav yet, it will be automatically added once published) link here

Trustworthy Artificial Intelligence Page: link here

Next Steps:

  1. @kristinashu and Lotta to do the QA: could you please double check copy/links? Ping me if any issues. You can also do edits straight into the editor :).
  2. Kristina and Lotta to approve the page: they will reply to email with their approval.
  3. Once steps 1 and 2 are completed, Taís will Publish the page and link the tabs (I have to link the "Trustworthy AI" and "Read more about Trustworthy AI" to the published page.
taisdesouzalessa commented 4 years ago

Copy doc is updated with the latest copy changes - thanks to @kristinashu for keeping track of that!

Page is now live! https://foundation.mozilla.org/en/internet-health/