Patterns
Benefit applications
Benefit applications are where users can go to apply for benefits in any of the benefit hubs on VA.gov. The policies and regulations around these benefits are very complex, and users often have difficulty determining if they are eligible, what they need to provide, and what to expect after they've submitted their application. For this reason, benefit applications, as a pattern, are divided into four distinct "epics" that help users navigate the process from start to finish.
The four epics typically found within each benefit application are:
Structuring benefit applications in this way has, through rigorous usability testing, demonstrably improved how to educate users about the benefits and how to set expectations about the application process. For the Department of Veterans Affairs, this means that applications are more accurate and complete, so the Department to better serves its constituents.
Eligibility
For Veterans, determining whether or not they (or their beneficiaries) are eligible for a specific benefit is a difficult process. The policies governing those benefits can be complex, fraught with dependencies and variations that can be overwhelming.
The associated pattern of content and functionality designed to help users of the website understand their eligibility, therefore, needs to accomplish a few things which can seem at odds with one another. Manifested as a single page, it should:
- Provide a simple introduction to eligibility rules that covers the most common scenarios.
- Scale (expand) to represent variations in complexity.
- Prevent users from going to the wrong form.
- Provide the ability to announce changes in the law or availability of benefits that may impact their eligibility.
- Provide space to connect users to benefits that are likely to be related to their question about the benefit they are viewing.
- Guide users to the next logical step in determining their eligibility, ultimately concluding getting them to the proper benefit application.
Eligibility hierarchy
The hierarchy of the eligibility pattern allows it to be flexible enough to cover simple or complex benefit eligibility information while still feeling straightforward and easy to follow. Generally, the eligibility pattern manifests itself as a single web page. It sits within a benefits hub based upon the following rules:
- For benefits hubs with a single benefit (such as Health care), we link to a separate Eligibility page as well as How to apply page from the hub landing page.
- For benefits hubs with multiple benefits (like Life insurance), we link to the main options/Eligibility page from the hub landing page. From this page, the user can choose the option for which they want to explore their eligibility.
- For a benefits hub where there is only a single benefit available, such as Veteran’s Pension, we link directly to the Eligibility and page for that benefit from the hub landing page. We also link to pages for other, related benefits (Aid and Attendance, and Survivors Pension) from the hub.
The eligibility page consists of the following elements:
A. Title and statement of intent
The title should be “Eligibility for (Most Commonly Used Benefit Name).” The statement of intent should state the job the page will do for the user, by stating something like “Find out if you are eligible for (most commonly requested benefits, described in plain language). This allows a user to quickly assess if they are in the right place, and it helps search engines highly rank these pages for appropriate searches.
B. Critically important information (most common scenario)
The featured content component is used to present the user with the most commonly sought benefit eligibility scenario. Some benefits are complex and contain several optional paths to confirmation. It is not acceptable to repeat this element on the page; instead use the Additional eligibility information & scenarios element for other variations. Note: please do not use this pattern more than one time on the page as it decreases its effectiveness at drawing the eye to the most likely sought content.
Do
Use a single featured component for the most common scenario.
Don’t
Use two or more featured components for multiple scenarios, because there can't be more than one that is the most common. Use other page elements for this purpose.
View the featured content component.
C. Additional eligibility information & scenarios
Benefit eligibility or requirements information that is more nuanced than the summary placed inside the Common scenario overview (featured content component), including different requirements for sub-audiences, application assistance, etc. Group prerequisites logically by benefit type, and order benefit types from most common to less common.
D. Optional: Eligibility change announcement
When time sensitive content about a benefit — such as a new benefit being made available or a significant change in the laws around eligibility for a particular benefit — you can place an informational alert box on this page. Follow the recommendations governing alert box usage, including
- Use informational alerts to announce upcoming benefits
- Use inoformational alert boxes with expandable content to hide detail that may not apply to everyone visiting the page
E. How to apply heading and primary call-to-action button
A brief heading should precede and call attention to the primary call to action button. This heading can be followed by an optional single sentence of text or phrase if necessary.
The button will lead the user/applicant to one of two places: either the application flow for the benefit or a wizard mini-form interface allowing the user to self-select into (or out of) the appropriate benefit form.
Having a single green button on the page helps the user follow the most logical path. Note: never put more than one green button on the page. If you have a page that requires multiple benefit form links, use the wizard mini-form interface to create branching logic to get the correct benefit application (or prevent a user from applying to the wrong benefit).
The button can be followed by item 6, Additional Benefit-Eligibility-Specific Relevant Content, if necessary.
F.Optional: Wizard pattern for branching eligibility choices
In the case where there are multiple benefit options, the Wizard pattern allows a user to branch into the appropriate benefit application from the eligibility page.
The text on the primary green button should represent the job the wizard is performing, such as “Find your education benefits form.”
G. Optional: Additional benefit-eligibility-specific relevant content
Any additional content necessary that is connected to the primary benefit eligibility use case for the page can be added here.
H. Optional: Benefit eligibility frequently asked questions
Use the accordion component to present questions that are common about eligibility for a benefit.
I. Optional: Related benefits content
Any additional benefits (e.g. vocational benefits eligibility that is related to education benefit eligibility) can be added to the bottom of the page using the RELATED PAGES component.
How to apply
This is a high-level description of the “How to apply” page for benefit applications. The content recommended for the “How to apply” page may overlap with the “Eligibility” or “Apply now” sections.
Page title
The page title should be “How to apply for (Most Commonly Used Benefit Name).”
Introduction
The introduction describes what the page is about. For the “How to apply” page, the introduction text includes the following:
- The benefit(s) the application is for
- The type(s) of users the application is aimed at (Veteran, service member, qualified family member)
- A link back to the Eligiblity page to send users to the Eligibility page to ensure they’re eligible for benefit
- SEO keywords (See Writing for SEO.)
Preparing to apply (informational callout)
On the “How to apply” page, use the informational callout box to present chunked, scannable snippets of critical information needed by the majority of applicants. For example,
- Describe what a user needs to do before they begin the application
- List items needed to complete the application (SSN, military history, etc.). Required items should be called out.
Note: The blue informational callout box should only be used for the most important information on the page. Since it includes critical information, the callout should appear near the top of the page.
How do I apply?
The “How do I apply” section lists possible application methods. It should emphasize the optimal path for Veterans, (which may be how to get help from a human instead of online help.) Some common application methods are:
- Online
- Green CTA button The button will lead the user/applicant to one of two places: either the application flow for the benefit or a wizard mini-form interface allowing the user to self-select into (or out of) the appropriate benefit form.
Note: never put more than one green button on the page. If you have a page that requires multiple benefit form links, use the wizard mini-form interface to create branching logic to get the correct benefit application (or prevent a user from applying to the wrong benefit).
- By mail
- Link to the printable application form
- Instructions for mailing the completed, printed form
- In person
- Link to find nearest VA regional office
- With the help of a trained professional
- Link to get help
What happens after I apply?
The “What happens after I apply” section sets the user’s expectations about what will happen next in the application process. This section may include:
- Concise content or a link to a page describing what the user can expect after they apply
- A call to action (primary blue button) that allows the user to track the status of their application
- A card that sets the user’s expectation for how long it takes to receive a response
Optional: More information
Include the “More information section” if there is helpful supporting information about applying for the benefit.
- For many short content items, consider using the accordion component to reduce the content on the page.
- For longer content items, consider linking to a separate page.
Live page examples
- How to apply for VA health care
- How to file a VA disability claim
- How to apply for the GI Bill and other education benefits
- How to apply for a VA pension as a Veteran
Apply now
The “Apply” page is the start of the react app and indicates the beginning of the form. It isn’t a static page. This page is separate from the static “How to apply” page, and repeats some eligiblity and how to apply information in case users navigate to this page from somewhere outside of VA.gov.
Page title
The page title should be: “Apply for [benefit type]”. For Disability, the page header should be “File for disability compensation”
Under the page header is the VA paper form equivalency. This shows the equivalent VA paper form that the online application corresponds to.
For example: Equal to VA Form 21-526EZ (Application for Disability Compensation and Related Compensation Benefits).
Sign-in message
At the top of the introduction page, is a sign in message. There are two different messages depending if a user is signed in or if the user isn’t signed in to their account.
Message when a user isn’t signed in:
- Lets applicants know that by signing in some information from their profile account could be prefilled into the application and that they can save their work as they go.
- Gives time on how long the application will be saved for
- Blue CTA button Sign in to start your application
- Link to fill out the application without signing in. (For all online applications except for Disability Compensation)
Message when a user is signed in:
- Lets applicant know they are signed in and can save their work as they go
- Green CTA button
Subway map
Subway or process map shows the steps the users needs to take to apply for a benefit. The headings are action words, short and concise, and consistent across forms.
Prepare
- Gives the applicant the information they’ll need to fill out the form, such as if they need to submit any documentation or provide their SSN, bank information, military history, spouse information, etc.
- Items that are optional are called out.
Apply
We use the same language for this step across all forms:
Complete this [benefits] form. After submitting the form, you’ll get a confirmation message. You can print this page for your records.
What if I need help filling out my application? An accredited representative, like a Veterans Service Officer (VSO), can help you fill out your claim.
[Get help filing your claim]
VA review
The step tells applicants how much time it takes VA to review the application. The content under this heading depends on what type of benefit they’re applying for. For example:
- For Health Care form, the message is: We process health care claims within a week.
- For Education forms, the message is: We usually process claims within 30 days. We’ll let you know by mail if we need more information.
-
For Disability Comp form, the message is: We process applications in the order we receive them. We may contact you if we have questions or need more information. The amount of time it takes to review your claim depends on:
- xxxyxlxlx
- xxxyxlxlx *
VA decision
This step sets the user’s expectation for when they will receive a response. It tells applicants how and when they will be informed of the status of their application (if denied or approved).
OMB information
This appears at the bottom of the Apply page and shows:
- Respondent burden
- OMB control number
- Privacy act link
Need help?
This footer appears on the bottom of every page of the form. It includes phone numbers if an applicant needs more support or has questions about filling out the form.
Optional: Other components on the Apply page
Depending on the type of benefit, an alert box is sometimes included with specific inforomation or detail about that benefit.
This is an optional component and should only be used if there is an important benefit or application process to call out to the applicant.
Live page examples
File for disability compensation introduction page
Apply for education benefits introduction page
Apply for Pre-need eligiblity introduction page
Apply for Veterans pension introduction page
After you apply
This is a high-level description of the “After you apply” page for benefit application.
Page title
The page title should be: “After you apply for (Most Commonly Used Benefit Name).”
Introduction
The introduction describes what will happen next in the application process after an applicant submits an application. This section may include:
- What an applicant needs to do after they submit their application.
- SEO keywords (See Writing for SEO.)
When will I hear back about my application?
This section appears as card or gray alert box that sets the user’s expectation for how long it takes to receive a response, and includes:
- Content or a link to a page describing what the user can expect after they apply
- Time frame for how long it takes to receive a response
Health care:
Education:
Disability compensation:
Optional: Other components on the “After you apply” page
Below is a list of optional components that appear on the “After you apply” page.
Subway process map
View the subway map component.
Health care:
Accordions
Health care:
Call-to-action button
Disability compensation: