Updates to Form introduction template

[laurwill]

This ticket tracks suggested updates to the Introduction template page in VADS. I referred to Danielle's Word document and the GH file from 2022.

[H2] About

The form introduction page introduces the process the Veteran or other beneficiary will follow to apply for a benefit or to complete a supporting form. The form intro page does 3 things:

• Sets clear expectations about the process of using this form
• Helps the person prepare to fill out the form by gathering required information and documents before they start
• Provides ways to get help and to find more information about the related benefit

Since people can navigate directly to this page from outside VA.gov, this intro page should include basic information they need to understand if this is the correct form.

[H2] Variations

There are 2 variations of the Introduction page:

• Application: Use this variation if the form is an application for a benefit or service.
• Non-application: Use this variation if the form is not an application for a benefit or service. For example, use this for supporting forms(https://www.va.gov/supporting-forms-for-claims/) that people need to submit along with their application and for claims for reimbursement under VA health care programs.

Both variations mostly follow the same structure. The only difference is the section after the intro:

• Applications use a process list
• Non-applications use a "What to know before you fill out this form" section

[H2] Structure

[H3] Title, subtitle, and intro

Plain language title

• For the H1, use a plain language CTA that starts with an action verb, like "Apply for VA health care" or "File for disability compensation"
• Aim for 52 characters or less, but exceptions to character length are OK if a slightly longer description adds clarity (like "Authorize the release of non-VA medical information to VA")

Subtitle

• Use the full, official name of the form, followed by the VA Form number in parentheses
• Example: "Application for Health Benefits (VA Form 10-10EZ)"

Intro paragraph

• Add a brief intro describing when to use this form (1 to 3 sentences, no more than 25 words per sentence).
• Try reusing the "When to use" blurb from the form detail page in Find a Form. For example, using the Veterans Pension blurb from the form detail page, this intro could be "Use this form if you’re a wartime Veteran and want to file a pension claim." Note: Guidance on this part of the template is evolving. Check back for updates.

[H3] For applications — process list

• Use a process list to describe the steps to apply
• Use this H2 above the list: "Follow these steps to get started"
• Use the numbered process steps listed here as H3s
• Add tailored need-to-know information about the specific form under each step, but aim to keep this section as brief as possible
• Consider how the information in this process list aligns with information on the related VA.gov pages for this benefit — if you need to add or update information on those pages, talk with the Sitewide content/accessibility/information architecture (CAIA) team that manages all benefit pages in the Drupal CMS

1. Check your eligibility

• Link to the static page that explains eligibility using link text "Find out if you're eligible for [name of benefit]"
• Variations: If the form is a decision review request, you can use the H3 variation "Check if this is the right decision review option for you" and adjust content in this section as needed Note: Guidance on this part of the template is evolving. Check back for updates.

Example:

Check our eligibility requirements before you apply. If you think you may be eligible, but you're not sure, we encourage you to apply. Find out if you're eligible for VA health care benefits

2. Gather your information

• List the information and documents needed to complete the form
• Aim for 5 bullets max, and consider separate lists for required and optional info
• If a form requires several different types of supporting documents, or different supporting documents depending on the user story, link to the static "How to apply" page for this information
• If the form requires especially private or sensitive information (like detailed financial or medical information), consider adding an additional info component with this header: "Why we need this information"

Example intros to bulleted lists of information and documents:

• Here's what you'll need to [apply/file your claim/submit your request]:
• We may also ask you for this information:
• You'll need to submit copies of these documents:

3. Start your application

• Use this exact text under the header: "We’ll take you through each step of the process. It should take about [estimated time burden] minutes."
• Include an additional info component at the end of this section with the header "What happens after you apply." Use this component to explain how we'll contact them with our decision and provide an estimated time to get a decision, if available.
• Variations: You can vary this H3 and other content in this section if the form is not called an "application." For example, H3 could be "Start your claim" or "Start your request."

Example:

What happens after you apply [additional info component header] We process health care applications within about a week. We’ll send you a letter in the mail with our decision.

[H3] For non-applications — what to know section

• Use H2 "What to know before you fill out this form"
• Use a short bulleted list (2 to 5 bullets) to explain the most important things people need to know related to the form, like who can submit this form, when submitting this form is unnecessary, or time limits to be aware of
• If you need an additional list with more information about this form, you can add a second bulleted list in this section, or add another H2 section for that information

[H2] Sign-in widget, prefill alert, or "continue saved form" alert

Dynamically display one of these options. Sign-in widgets and prefill alerts should appear directly under the process list or "what to know" section. The "continue saved form" alert should appear above the process list or "what to know" section, because the person has already gotten that information when they started the form in a past session. Note: The sign-in and prefill variations assume that the form prefills information for people who are signed in to VA.gov.

[H3] If the person is already signed in

If the person has no saved forms, use the standard prefill alert component.

If the person has saved forms, use the "Continue your form" alert.

[H2] You have a form in progress You last saved your [Full Name of VA Form (VA Form ##)] on [date and time]. You can continue filling out this form with your saved information until [expiration date]. If you don't submit your form by that date, you'll need to start over.

[button] Continue your form

[text link] Start a new form

[H3] If the person is not signed in yet

Choose the correct sign-in widget for your form. Note: The alert component page has examples of sign-in widget alerts, but we're currently updating our guidance for sign-in and verification widgets in online forms. Check back here for updates, and in the meantime reach out to the Sitewide CAIA team in our sitewide-content-accessibility-ia slack channel for support.

[H2] OMB information

OMB information is a component that appears at the bottom of the page. The information to fill the component is taken from the paper form (or provided by a VA stakeholder).

[H2] Need help

The Need help component is a footer that appears on the bottom of every page of the form. This content lets people know how to get additional help with the form or the benefits.

[laurwill]

Hi @DanielleThierryUSDSVA , these suggested updates to the form intro page template are ready for your review. Rather than putting the sign-in widget variations on this page, I linked to another ticket where I'm suggesting that we add sign-in widgets as a standalone component in VADS. Let me know what you think of that approach!

[DanielleThierryUSDSVA]

@laurwill This is excellent! I made some minor edits that we chatted about in slack and also dropped a Q for you in slack. And then this is good to go from my perspective!

[laurwill]

Thanks so much @DanielleThierryUSDSVA ! I made that tweak we discussed in the "check eligibility" section.

[laurwill]

Hello @humancompanion-usds ,

Here's the suggested updates to the form intro template page in VADS. I've left a note about adding guidance specific to the sign-in widgets — when the new sign-in component page is ready, we can replace that note with a link to that page.

Let me know if you need anything else!

[humancompanion-usds]

The updates to the guidance have already gone out so I'd like to prioritize this. Will put it into my list for Carol.

[megzehn]

Thank you for merging the PR for this, @humancompanion-usds!

I wanted to follow up with 2 more next steps before we close this.

1. I made some minor formatting and copy tweaks in this PR. Could you take a look and merge when you have a minute?

2. Could your team update the screenshots and Figma files for the first 2 examples on the introduction template page (Unauthenticated and authenticated application)?

Under the process list in the first 2 examples:

• Use this H2 above the list: “Follow these steps to get started”
• Change the first step to "Check your eligibility"
• Change the second step to "Gather your information"
• Change the third step to "Start your application"
• Use this exact text under the "Start your application" header: “We’ll take you through each step of the process. It should take about [estimated time burden] minutes.”
• Include an additional info component at the end of this section with the header “What happens after you apply.”
• Update the sign-in alerts on both unauthenticated examples with this copy.

If there's anything we can do to help with the second request, let me know. Thanks so much.

[megzehn]

Hi @caw310,

I saw Matthew mentioned you as someone who might be looking at this issue and wanted to loop you in.

Could you merge this PR with some minor copy edits to the form intro page that's live?

I also put updates for Figma in the comment above. Let me know if you have any questions. Thank you!!

[babsdenney]

@megzehn I approved the PR, thank you for submitting that. I'm working with the Forms team to figure out if we can get these Figma changes completed now or if we will have to work on it later.

[megzehn]

Thank you, @babsdenney!!

CC @laurwill for awareness

[babsdenney]

@megzehn @laurwill We are going to hold off making the changes to the forms introduction template till we have finished publishing the current changes to the templates and patterns library which should be complete by next week. We have this work queued up to complete in Sprint 9 or 10. Here is the ticket for the Figma work 3205

We will let you know once we are able to begin work on this and keep you in the loop for review once it is complete.