Move How to Apply Wizards to Application Pages

johnhashva commented 4 years ago

Product Outline

Veterans learn about benefits and eligibility requirements from detailed content pages. These pages may include prerequisite questions potential applicants can answer before initiating the "actual" application process. Answers to these questions help determine where applicants are taken in order to apply i.e. which form or online tool is most appropriate.

Veterans typically land on these content pages while researching benefits. However, these pages may not always make it easy for Veterans to find these helpful in-content wizards -- and consequently some veterans are filling out the wrong forms -- e.g. there is a high rate of ineligible applications submitted online.

How might we make the Veteran experience of starting online applications more seamless and successful?

Original Discovery Product Outline

Solution

We want to move/consolidate these pre-requisite Wizard steps with the application tool landing page in order to:

1/ Make the Veteran experience of starting their online application more seamless. (Today, they have to find the Wizard on a content page, and from there, fill out the wizard and then are sent to the tool landing page.)

2/ Make apply online CTAs from tier 2 content and other content outside of the benefit hubs more clear and direct. Example: from our mvp form detail landing pages or from the modernized mvp form search results.

There are three benefits where the wizards (react widgets) will be moved from the content (e.g. How To and Eligibility) to the application introduction pages:

Disability https://va.gov/disability/eligibility https://va.gov/disability/how-to-file-claim --> Moving to: https://www.va.gov/disability/file-disability-claim-form-21-526ez/introduction

Higher Level Review
Invision mockup of new Wizard in development https://www.va.gov/decision-reviews/higher-level-review/ --> Moving to: URL TBD

Discovery Epic with Solution User Flows

Education https://va.gov/education/eligibility https://va.gov/education/how-to-apply --> Moving to: https://www.va.gov/education/apply-for-education-benefits/application/1990/introduction

Important to note for the Education application flow:

There are six different types of education benefits that the applying veteran may be qualified to receive via the Wizard
New functionality will need to be implemented (e.g. a cookie) to ensure that the Wizard does not display again on one of those application pages, if the veteran has already completed the Wizard process via the original landing page

Example:

1/ From the GI Bill content page, the user clicks on a link to go to the GI Bill application page. 2/On that page, I answer the Wizard questions. 3/ The Wizard determines that the user should actually be filing out the Post-9/11 education form and links the user to that application. 4/ The user clicks over to the Post-911 education application start page. The Wizard does not display on this page because the app page knows I've already completed the Wizard. 5/ The user fills out the correct education form.

Wizard to Correct Form Visual Guide https://app.zenhub.com/files/133843125/195a43c0-4a84-4611-a44e-4f9472e09135/download

Personalized Care & Planning Guidance (Form 28-8832) Of note, a new "gating wizard" is also being introduced on the new PCPG page. Here is a flow diagram.

High Level User Story/ies

As a user, I need to apply for the correct benefit online in a way that is quick, easy and ideally error-proof.

Requirements

Per @AZSchneider, ideally must preserve the ability to throttle traffic to impacted app pages via Flipper
For the content elements and structure on the Application page with the Wizard embedded, @andaleliz recommends the approach -- with H2's -- outlined by @sporeboy here.
Once a user has completed the wizard, the wizard should be hidden during their current session (e.g. based on MDN’s description of session storage here https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)

Hypothesis or Bet

If the Wizards are moved to the application page then there will be a reduction in the number of ineligible/incorrect applications received by VA benefits administrators.

OKR

Drive more online use of benefits applications as they are more discoverable, resulting in more correct or eligible applications received

Increase usage of how to apply wizards
Reduced bounce rate from wizards
Reduction in number of "incorrect" applications received (veterans are applying for the wrong benefits because they are not using the gating wizards.

Success Metrics Note: The Analytics team is recommending the tagging/tracking approach already taken with the education benefits wizard -- e.g. GA can report on “Started Education How To Apply - Did not Complete [Funnel Segment]” -- a good proxy for success if we apply this across the HLR and Disability wizards as well. The KPI would be to show reduced bounce rate on the Wizards – implying that a more informed veteran would then be prepared to apply (e.g. reduction in ineligibles).

Definition of done

The how to apply wizards are live in production across the identified pages, resulting in reduced Wizard bounce rates.

Take into consideration Accessibility/QA needs as well as Product, Technical, and Design requirements.

Screenshots

Mural board flow diagrams are available here.

Disability - New User Flow

Education - New User Flow

Higher Level Review - New User Flow

Status

Cross-product Implementation Tracker is here
Status meeting notes kept here.
Collab Cycle checklist here.

Take into consideration Accessibility/QA needs as well as Product, Technical, and Design requirements.

How to configure this issue

[ ] Labeled with Team (product support, analytics-insights, operations, tools-be, tools-fe,content-ia, service-design, vsa-*)
[ ] Labeled with Practice Area (backend, frontend, devops, design, research, product, ia, qa, analytics, contact center, research, accessibility, content)

andaleliz commented 4 years ago

I noticed we have another epic related to this, https://github.com/department-of-veterans-affairs/va.gov-team/issues/6315. Should we consolidate?

johnhashva commented 4 years ago

Agree @andaleliz -- @stephorkandatx I suggest we close #6315 in favor of this one as it's meant to guide the Development/execution phase.

mchelen-gov commented 4 years ago

a little extra context from screener project, we came to the conclusion that How to apply for a discharge upgrade (code) from https://design.va.gov/patterns/wizards was the closest thing to what we wanted.

however it didn't seem to be published in formation-react as a reusable component, and could use some additional documentation. we hadn't seen how-to-apply-wizards before. FWIW our definition of a wizard is that it is interactive but does not write data anywhere.

based on all this we requested a reusable wizard component in https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/192

andaleliz commented 4 years ago

Interesting, thanks for sharing that @mchelen! We looked at the discharge upgrade wizard too, but that was the outlier for our use case with this work. I did identify several a11y issues with that discharge upgrade wizard, just FYI.

A little extra context from us, if it helps - our epic doesn't involve redesigning or changing anything about the wizards. It's strictly moving them from one place to another.

mchelen-gov commented 4 years ago

@andaleliz Ah ok, thanks for the info! I thought there were some changes to the workflow being made because it said "New User Flow" which I see now means the flow for new users, not a new flow for users :joy: If you have a chance, any accessibility issues you found with the current wizard codebase(s) would be great to get documented in https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/192

department-of-veterans-affairs / va.gov-team