Foundation.mozilla.org: Full page welcome on first-time visit

[hannahkane]

problem: people will visit a WIP site that requests/requires lots of engagement and feedback; notice is useful, but we need a space for more content

• full page at /welcome (not a modal)
• First time visit only
• This will include a long message Mark crafted
• Includes a couple of buttons or links to: "Preview site" (homepage) | "Help us build" (new page or gdoc) | "Name the network" (form or gdoc from 270) | "Join the network" (site's page)
• we will keep tiny notice at top of site (though probably suppressed on this page)
• Design should be simple! Like fellowship landing page. Nothing bespoke.

Estimate is for both design and engineering.

[xmatthewx]

made some edits to initial comment to clarify a bit further.
filed an engineering task so that underlying work can begin.

[xmatthewx]

Here is copy: https://public.etherpad-mozilla.org/p/network-site-welcome-page

[xmatthewx]

We will try and CMS made landing page for the welcome page. Reduces design task and let's us focus on engineering the redirect.

Note: a page is better than a pop-up. Why? Because we can link to it from Member Preview emails, making it visible even after first visit.

[taisdesouzalessa]

@xmatthewx we currently don't have the ability to build this page via CMS. For this reason, I worked on the mockup, following the same process as in the other pages.

In V1 I did as requested:
V1: https://invis.io/ZJ9YTAGEA#/228593983_Welcome-1st-Time-Visitv1

V2 is a suggestion to integrate the links to the copy (4th paragraph). Those links fit better into the context of the paragraph and the interface is less busy, helping users to take the actions. In this proposal I also removed the Mozfest link, since it seems to be distracting users from the goal of the page (which is related to the network and taking actions towards it).
V2: https://invis.io/ZJ9YTAGEA#/228593984_Welcome-1st-Time-Visitv2-jpg

Matthew, @hannahkane let me know what you think and if you need any revisions.

[hannahkane]

My two cents: I really like v2 with the integrated links, for the reasons you mention.

[xmatthewx]

Agreed. I like v2.

I was hoping we could use the CMS (#293) for this. In that case, it would have those other header elements. If we can't, let's have engineers build this minified header _only if it's trivial_. I really don't want to start creating overrides and new components for this.

[xmatthewx]

We'd like to build this page with the CMS. Thought that landed. But seems blocked. Any info? cc @gvn

[xmatthewx]

Update: preference from Mark/Chris is for a modal/popup. It sends a certain signal. I agree, though had hoped to avoid the design/tech required.

This revises the design and engineering requirements a bit. We can/should still build page with CMS as landing page, but would need to pull that content into popup.

[xmatthewx]

Follow up from stand: My instinct is that we should do modal _without_ an X-dismiss icon at top right. User tap a button or link to proceed. We don't want people to skip this view. They should enter site deliberately.

[taisdesouzalessa]

I agree with you Matthew. It is a bit of friction but a necessary one for first time users.

The person won't see this notice in their second/third visit right?

[gvn]

CMS-ifying the "page" as a modal will probably be a little tricky, but it's hard to say how difficult without research. I'd suggest we start with static content and see if it's sufficient.

[taisdesouzalessa]

What if we did a modal that occupy the whole available space in the screen but only the middle (main body copy) scrolls? In this way the "Preview Site" and "Join the Network" buttons are always visible - it works for fist time users since it is clear there is a lot of content there (on scroll) and also if the same user see this site on more than one device they can quickly dismiss it if they need to.

NOTE: we would remove the "X" button as Matthew mentioned above.

Working example: https://jsfiddle.net/jasny/ZcLSE/

@xmatthewx @gvn @sabrinang what do you think of this idea?

[gvn]

I'd prefer to do a full page takeover (like the primary nav) to a smaller modal.

[xmatthewx]

I think @taisdesouzalessa is just proposing a fixed container with buttons, so these are accessible without scroll. So people don't get stuck. I don't think she's proposing that we do a smaller modal.

Work for me if we keep it all simple.

[taisdesouzalessa]

Yep, my main concern is having the buttons hidden and users have to scroll to access them (in case they see this screen more than one time). If we are adding some logic to it (users will see this screen one time only) then this is not a concern. I will do the mockups with full page takeover, as Gavin suggested - with fixed buttons on the bottom and without so we can decide.

[taisdesouzalessa]

Here are the versions:
V1:

V2:

V3 (fixed buttons in the bottom):

V4:

@sabrinang and I were discussing those options and we both felt the V3 and V4 (dark background, as the menu) are very dark and together with the copy and buttons it gives the users a feeling of caution (which is not a feeling we would like to them to have when they first see this page, we would like more of a welcoming mood). I feel V1 seems the best option, considering the amount of copy we have.

Curious to see what others think.

[xmatthewx]

I agree that the dark is too intense. We will still go with full-screen pop-over rather than a redirect to a page. It can have the design of v1 if you want, without the footer. But I also think v2 works fine.

How about v2, whitebox filling the screen, with fixed buttons at bottom?

[taisdesouzalessa]

@xmatthewx here is the latest iteration based on your comments. When I was doing the mockup for mobile I realized that a fixed bottom may take a big space there since the buttons have to stack.

I would like to reconsider having the fixed buttons since it doesn't seem to fit well for our mobile users. I feel the cost of it is greater than the benefit - what do you think?

I am still concerned with users seeing this message again and again though - @gvn are we implementing this component for first-time visitors only, right? If so, I feel our problem is solved in most cases.

I also think it is important to keep our logo at the top because it seems more official and trustworthy for a first impression.

Let me know what are your thoughts on it.

DESKTOP: https://invis.io/ZJ9YTAGEA#/228593983_Welcome-1st-Time-Visitv1

MOBILE: https://invis.io/ZKAIKN1MN#/229356576_MOBILE-Welcome

[xmatthewx]

@taisdesouzalessa

• People won't see this every time. We'll note their visit and skip it when they come back.
• Let's proceed and build this without fixed buttons. I'm going to file a follow up ticket to discuss more. I'm concerned that buckets of people will bounce before they see the buttons.

[xmatthewx]

We should put analytics on this welcome screen to capture views and button taps to continue so we can see and address a high bounce rate.

• [ ] welcome page analytics

[gvn]

I think we should do analytics in a follow-on ticket since we'll need to get specific actions set up in GA to wire in on the front end code.

[gvn]

@xmatthewx – Where do "name the network" and "help us build the site" link to?