Foundation.mozilla.org: Design Health report Offering landing page

[xmatthewx]

A user will visit this page after tapping a featured offering on the homepage. This template will be kept simple and reused for different offerings with the same layout.

Internet Health is currently being designed.

[taisdesouzalessa]

Here is the wireframe of the Internet Health offering:
https://invis.io/ZJ9YTAGEA#/216715361_Interstitial-Internet-Health

[sabrinang]

I've iterated on 3 layouts of the interstitial offering page

1) 2 column
2) 1 column with "join us" at the bottom
3) 1 column with "join us" at the top

I think these pages have disconnected and competing CTAs if we direct them to separate or external areas so I was thinking instead of a separate thank you page we can display the message and share options where the form previously was. This will help keep the user on the page still to explore the offering.

[xmatthewx]

These are looking good. A few things...

• Page title – Small title at the top between logo and nav should be Internet Health Report. Let's remove "Game-changing Advocacy" and "Media and organizing...". All of it. This page should stand on it's own.
• Join form – As we talked about, let's try a join box that's between sections of copy. Maybe just a hairline border and smaller header?
• I personally prefer two column pages.
• Headers – I think we need more headers to break up content. Let's go with:
  
  
  
  • Internet Health ("Introducing..." is too long)
  
  
  • The Report (Insert after "Is the web thriving? ...essential questions.")
  
  
  • What's next?
  
  
• Let's drop the pull quote style. Bring it back later if needed. But right now, it feels very busy.

[sabrinang]

Here are some iterations of this page:

1) full width join us form between text with hairline borders
2) full width join us form between text with grey background
3) half page join us form with black bar divider
4) half page join us form with grey background

I am finding putting the form between text problematic with the copy we have on this page (comps have lorem ipsum) I think it would be helpful to revisit this copy to help this page feel less fragmented.

[taisdesouzalessa]

@xmatthewx this page needs review.

[taisdesouzalessa]

Solana added comments to the InVision page - adding the link here so we can keep track of revisions in this thread: https://invis.io/ZJ9YTAGEA#/216715361_Interstitial-Internet-Health

[hannahkane]

@taisdesouzalessa - can you please update the mockup to reflect Solana's edits? Then we can close this ticket and move to implementation.

[taisdesouzalessa]

@hannahkane some of the edits Solana requested require some re thinking of other parts of the site (like changing the label from "Join Us" to "Sign Up") - I'll add her feedback in the conversation I'll have with Matthew about staff's feedback and revisions in the site. It needs some discussion first. Does that sound good?

[hannahkane]

Sounds great. Thanks, @taisdesouzalessa.

[taisdesouzalessa]

Here is the latest template for this page, with the edits requested by Solana: https://invis.io/ZJ9YTAGEA#/216715361_Interstitial-Internet-Health

@xmatthewx please take a look and see if you think if this page works as a template for the others. I think we will have to go back to this page once we do the edits in the rest of the website to see it if aligns with everything else in terms of messaging (I feel the buttons "sign up" and "join us" on the same page gives a confusing user experience).

I had @sabrinang's eyes on this page as well. Sabrina, feel free to add more info here if I missed something.

[xmatthewx]

This looks great. Let's call design done and hand it over the engineering.

[xmatthewx]

@gvn – this issue is getting crazy long. feel free to open a new ticket for implementation.

Question for you: can we explore ordering of this elements? Instead of two chunks showing up as 1 or 2 columns, depending on screensize... let's see if we can apply css flex + order to 3 chunks. Goal: to put the form between the image and header (is internet getting healthier), earlier on mobile. Make sense?

desktop 2-column
[intro text (order:1)] [form (order:2)]
[detail text (order:3)]

mobile 1-column
[intro text (order:1)]
[form (order:2)]
[detail text (order:3)]

[gvn]

Yeah I believe that should work.

[hannahkane]

I'm confused about the status of this ticket. Is this now an implementation ticket?

I think I'd recommend we make separate implementation tickets for each instance of this interstitial page, since my understanding is there will be two or three.

• one for the Internet Health Report (content reflected in Taís's comment above
• one for the Trainings page (copy finalized in #44, but no comp yet - do we need one?)
• and likely one for the Fellowships page (content being worked on here.

[hannahkane]

OK, closing this ticket in lieu of new tickets, as described in the comment above.