Redesigned homepage - soft launch modal

[mmiddaugh]

Issue description

As a Veteran, I want to be given the opportunity to check out the redesigned homepage once per session so that I can know what's coming and offer feedback.

As the Sitewide Homepage team, we need a way to offer the opportunity to use the new redesigned homepage experience to Veteran and beneficiaries visiting VA.gov. so that we can gather feedback to determine readiness for cutover.

Technical considerations

• Ensure the modal only displays on VA.gov homepage (/)
• Ensure the modal doesn't display on injected sites
• Ensure our modal doesn't display if another modal is called on page load
  • The modal we know about is modal that appears for users redirected from explore.va.gov

Background and pros/cons for banners and modals

A similar need occurred during the original launch of VA.gov but was managed using a preview subdomain which is not an option for this launch.

Two options were evaluated during a design, accessibility and implementation discussion

• a banner, allowing a user to move between the existing and new experiences
• a pop-up modal allowing a user to "opt in" to the new experience.

The modal was determined to be the preferred approach.

Banners

• (+) avoid the risk of stacking modals
• (-) could unintentionally introduce user distrust
• (-) would create an escape route preventing data and feedback collection
• (+/-) banners are less prominent
• (-) banner blindness
  Modal
• (-) stacking risk presents usability and accessibility concerns
• (+) prominent display
• (+) making it dismissible will manage annoyance factor and various user flows

Expected behavior

• The redesigned experience modal is presented only on the VA.gov homepage.
• A Veteran or beneficiary can interact with the modal to agree or decline to use the redesigned homepage.
• The modal offering the redesigned homepage experience displays only once within a user's session.
• Regardless of previous opt-in or decline, the modal will be presented during the user's next session (which includes the homepage).
• If the Veteran or beneficiary opts-in to the redesigned homepage experience, the redesigned page opens in the same window and tab.
• The Veteran or beneficiary can return to the current homepage by using the VA logo and/or back button. The breadcrumb may also be an option, depending on the page.

Acceptable known risk:
Veterans or beneficiaries who opt-in to the redesigned experience may not be able to easily return to the redesigned page after navigating to deeper content pages. The user may be able to return to the redesigned page using the back button. This user will have another opportunity to opt-in from the homepage during the next VA.gov session.

Pending

• Final Design from Ryan (expected by 11/11)
• Final Content input (draft content now available)
• Resolution for stacking modals

Example Modal

Reference Design system modal: https://design.va.gov/components/modal

Design

• Slack thread with design system about approved ways to handle the 2 CTA links
  • NOTE: use design system components as-is, no special stying should be required. Mockup above was done in Mural so alignments, padding, sizing, etc is not accurate
• Sketch design (NOT FINAL as of 11/23 -- Sketchwas not caught up with the design system discussion above, so rely on the image here / slack thread for official guidance) outdated for the modal design

Draft content

[h1] Try our new VA.gov homepage

We're redesigning the VA.gov homepage to help you get the tools and information you need faster.

And we want your feedback to help us make it even better.

[cta1] Try the new homepage [semantic link, Primary action link from design system]
[cta2] Not today, go to the current homepage [semantic button, secondary button from design system]

Tasks

• Implement redesigned experience modal using cookies to govern display within a user's session
• Configure modal to report analytics
• Focus management and experience via keyboard, voice or screenreader should follow patterns established by other modals in use across VA.gov.

Acceptance criteria

• Modal must sit behind a Flipper for both Staging and Prod - Flipper: create flipper for exposing the modal on live homepage #11653 tracks creation of the Flipper
• When a Veteran or beneficiary arrives on the VA.gov homepage, a modal to opt-in to the redesigned homepage experience overlays the existing homepage.
• Selecting to opt-in with [cta1] link "Try the new homepage" opens the redesigned homepage URL (/new-home-page) in the same window/tab.
• Selecting to opt-out with [cta2] button "Not today, go to the current homepage" closes the modal, displaying the existing/current homepage URL in the same window/tab.
• Selecting the "x" will close the modal and the existing/current homepage URL will be displayed in the same window/tab.
• Pressing the ESC key will close the modal and the existing/current homepage URL will be displayed in the same window/tab.
• The redesigned experience modal only displays VA.gov homepage (/)
• The redesigned experience modal is displayed only once during a user's session, regardless how many times the user returns to the homepage.
• This modal IS NOT DISPLAYED if another modal should also be present (e.g., the Explore VA redirect modal)
• This modal IS NOT DISPLAYED on injected-header/footer sites

Analytics

• When a user opts in to the new homepage, the modal reports analytics with event: new-homepage-modal-click + modal-primaryButton-text: try the new homepage
• When a user declines the new homepage, the modal reports analytics with event: new-homepage-modal-click + modal-secondary-link: go to current homepage
• When a user closes the modal, the modal reports analytics with event: new-homepage-modal-close

Accessibility-specific ACs

See design system

• Modal should have the role=”dialog” attribute.
• Content behind the modal should not scroll while the modal is open.
• The modal and its interactive elements are accessible to all users, regardless of mobile, smartphone or desktop device.
• The modal and its interactive elements are visible onscreen, even if the page is viewed with zoom.
• The modal and its interactive elements are accessible to all users, regardless of screenreader, keyboard, voice navigation. or other assistive device.
• Modal should have an aria-labelledby attribute where the value is the ID of the modal title (you don’t need or want the #).
• Modal should have an aria-describedby attribute where the value is the ID of a div that contains a description of the modal (you don’t need or want the #).
• When the modal is closed, focus should go to the skip link at the top of the current/existing or redesigned page, based on user selection.
• Pressing the ESC key should close the modal and return the focus to the element that triggered the modal.
• "Try the new homepage" should semantically be a link
• "No Thanks" should semantically be a button
• Requires accessibility review (Laura Flannery)

[jilladams]

Currently blocked on design. Moved to Stretch, as we need to act on this as soon as we have design.

[jilladams]

Reassigned to Josh to help with build, so Bryan can focus on session logic when he's back online. Tradeoff: Deprioritizing Drupal footer for now.

[jilladams]

• As soon as deployed & flipper is on: VERIFY that modal doesn't appear on injected header/footer sites