Foundation.mozilla.org: Design: Replace splash page with expanded notice

[hannahkane]

Estimate is for design and engineering + extracting editorial from people

100-150px height

Rationale: bounce rate is too damn high

[xmatthewx]

@jessevondoom - want to take a stab on content for notice bar across the site? to replace welcome splash?

note:

• there are some concerns about this appearing on every page and on mobile. we will likely need a dismiss button (perhaps to minified bar with feedback link).

[jessevondoom]

No problem. I'll work something up that could be split responsively. A minimalist statement and one we can expand on larger screens.

[jessevondoom]

Made two versions of the copy. One for desktop and one for mobile. Desktop version may be a bit much for 150px but I think we're okay if that pushes even as far as 250-300px. As long as there's a healthy slice of the site below I think the cue to scroll will be understood.

_DESKTOP_
This is a Barn Raising
There is a movement to keep the Internet healthy taking root around the world. Mozilla is a part of this movement and wants to help it grow.

We're building a home for people who care about the health of the Internet, hand in hand with the community that emerged from MozFest and events around the world. It’s a space for us to learn, find resources, and connect to new people and ideas.

If you are a part of this movement for Internet Health then we want your feedback to help it iterate and grow. This is a barn raising.

_MOBILE_
This is a movement
We're building a home for people who care about the health of the Internet. This is a space for us to learn, find resources, and connect. If you're a part of the movement for Internet health, we want your feedback and help.

[taisdesouzalessa]

Here are the splash options:

V1: in V1 I kept the last paragraph in both expanded and minified version. I think it is a better user experience because it adds continuity between the 2 states.

• Desktop (you can click on the close button, it works):
  https://invis.io/NBC4CN8SY#/238463456_Desktop-Expanded
• Mobile (you can see this link on your phone and tap):
  https://invis.io/GKC4CTZN4#/238463781_Mobile-Expanded

For this proposal, I would recommend this animation here (we will need to tweak the speed):

V2: in V2 the message change between states:
Desktop (you can click on the close button, it works):
https://invis.io/KCC4D4O53#/238466047_Desktop-Expanded_-2-
Mobile (you can see this link on your phone and tap):
https://invis.io/7GC4D5JQN#/238464607_Mobile-Expanded_-2-

This is how this proposal can work - if animation is not possible:

V1 is a better experience, although it may be more work to implement.

[xmatthewx]

In collapsed view, can we go to a single line with ellipses...? To save space? I think that's preferable. At least in desktop.

On desktop, I think we should try this as multi-column to reduce line length. They could even columns (50/50) or something like (40/60) if that helps with line breaks. This will break any chance for animation.

I'm down for smooth animation if we can make the words that show in the collapsed state okay. I'm unsure whether "If you are apart of this movement for Internet Health..." will be odd for a returning user.

I edited my original comment. Let me know if this is still unclear. I confess I feel unsure of myself and what's best on this.

[jessevondoom]

Yeah I love the way it appears to condense itself as it shrinks, but I share @xmatthewx's concern re: messaging on return. So I think the second option with the current "Welcome to..." message is probably preferred here.

[taisdesouzalessa]

Good point on the messaging for the returning user. What if we used the following animation for changing the messaging? I find the fade out makes the transition less abrupt so it is clear to users we are shifting the messaging. Using 2 columns layout, as Matthew suggested:

The 2 column layout seems to work well for tablet mode as well (mobile view should be 1 column):

Here is the InVision:
https://invis.io/NHC4H7MEM#/238506265_Desktop-Expanded-2col

It bother me a bit the "raising" is alone at the end of the second column (desktop view) but we don't have too much control since screen sizes vary. Maybe we could add a word or 2 to the last paragraph to avoid this issue at least in the most common width?

[taisdesouzalessa]

One thing I noticed is that we have "Internet Health" in the messaging on the top while the main hero message says "internet health" - no uppercase. Should we use "internet health" on the top messaging as well to keep it consistent?

Another question is on desktop the title reads "This is a Barn Raising" while mobile says "This is a movement" - could we change mobile to "This is a Movement"? Upper case in "M"?

[jessevondoom]

If you want to try removing "iterate and" in the final paragraph to make the word wrap nicer, we can go with just "to help it grow" that should be fine. New animation looks really nice!

Re: "Internet Health" v "internet health" — that's my fault. I'm old and have "Internet" as a proper noun forever. I think either is actually fine. Let's do "internet health" in the header so it matches.

But for the record: do we have any kind of writing style guide? Feel like "Internet" v "internet" and the "Internet health" phrase should probably have an organization-wide standard.

[xmatthewx]

The current mozilla style guide says to capitalizes Internet. Lotta follows that in her WIP comms style guide. Yuliya says that with the new brand, internet will be lowercase, though it's not documented anywhere. I've tried to follow that, with mixed success.

edit: I guess it gets weird if we're trying to establish Internet Health as a thing, and it isn't capitalized. Maybe we should stick with capitalized until it's documented otherwise.

[taisdesouzalessa]

Here are the mockups with the latest changes:

• without "iterate and".
• Internet is capitalized (as per Matthew's suggestion). "Internet Health" has uppercase on both words but "healthy Internet" doesn't, correct? Please let me know if you need any adjustments.
• "Movement" is capitalized in mobile.

Desktop: https://invis.io/NHC4H7MEM#/238506265_Desktop-Expanded-2col
Mobile: https://invis.io/GKC4CTZN4#/238463781_Mobile-Expanded

Suggested animation:

@gvn could you please take a look at the animation above and let me know if you see any technical constraint on it?

[hannahkane]

@jessevondoom - do you want to run this by Mark?

[jessevondoom]

@hannahkane I'll mention to him that we're doing it but I think we can go ahead and proceed with this direction. There's a clear reason for it and he'll be fully supportive.

The only feedback I could imagine from him would be to make it somehow more obvious or bolder...but that may actually be moot if we're moving to the new hero design...the flat color would stand out considerably more next to the new design than it would at the moment.

[gvn]

This should work from a technical standpoint.

[hannahkane]

Closing this. #519 no longer blocked.