IA / Content collab: Sign-in widget situation for Order Medical Supplies

[kristinoletmuskat]

Overview

Description

We created this internal guidance for when sign in widgets vs action links should be used in a form/tool flow: https://app.mural.co/t/departmentofveteransaffairs9999/m/departmentofveteransaffairs9999/1697213811994/ac7d62d5057d551a31a09571ba9efbceb8026e67?wid=0-1709226879290&sender=ua67f17f1c416a96ea04d2476

However, we didn't realize that forms and tools have opposite implementations on the site today. Our decisions in the above guidance would necessitate a big shift in form sign-in, would require dev work to implement across the site, and would result in less control from our content team over static pages (I think). We need to revisit the guidance holistically, and then use our decisions there to make a decision on what to do with hearing aids and cpap.

Note: This work is currently holding up the migration of these pages into MHV on VA.gov, so perhaps we should prioritize it a bit higher!

Links

• Related ticket (see comments for conversation about the widgets)

Team

• Team Name: MHV Cartography
• Designer: Sara Sterkenberg
• Product Manager: Wes Rowe

Timeline

ASAP as soon as we can get OCTO to make a decision, which usually takes a long time because they have 1000 priorities.

Acceptance Criteria

• [x] Revised guidance for sign in widgets vs action links that takes forms vs tool current implementation into account
• [x] Plan for how the guidance should impact new vs existing forms
• [x] Implementation plan for the MHV Cartography team to migrate the hearing aids and cpap form

[strelichl]

@kristinoletmuskat is this still blocked by OCTO?

[kristinoletmuskat]

Hey hey we just figured this out!

Guidance: The sign in widget should be in the furthest possible location a user can access before they have to sign in

I've reached out to the CPAP team in their ticket to figure out next steps.

Documentation is in mural here: https://app.mural.co/t/departmentofveteransaffairs9999/m/departmentofveteransaffairs9999/1697213811994/ac7d62d5057d551a31a09571ba9efbceb8026e67?wid=0-1710516453375

[wesrowe]

Cartographers have a ticket to create the react widgets for the two entry-point pages: #79283. I'll attach it to this ticket as a blocker/dependency.

[wesrowe]

FYSA, @radavis is working on the widgets and is going to reach out via Slack about the publishing step any minute now.

[kristinoletmuskat]

Hey @wesrowe, just checking in to see if we need any more work on this ticket?

[wesrowe]

We put this aside for a sprint due to a change in priority coming from octo. Richard had an informational chat with Public Websites (Jill & Randi), and I believe we have to take the next action.

[radavis]

We are currently at step 7 of the following guide: Share the react widget ID with Sitewide CAIA team in the issue.

The following two PRs have been merged and released to staging and production environments:

• https://github.com/department-of-veterans-affairs/vets-website/pull/29499
• https://github.com/department-of-veterans-affairs/vets-api/pull/16579

The widget app-id is: ha-cpap-supplies

[laurwill]

Hi @radavis , I just peeked at the screenshots in the ticket you linked. It looks like the sign-in widget is breaking header heirarchy because of where it appears in the page structure. Can you confirm if the "Sign in" header in the widget is an H3?

[radavis]

@laurwill Currently waiting for content-build to build so I can verify.

It should be an h3 tag, as that's what it is by default.

It might be faster to add the CTA Widget code to a static page through drupal in staging to verify. However, I don't have that access.

[radavis]

@laurwill, it is a h3.

Is the CTA in the right place within content? If so, I'm assuming this should be an h4, correct?

[laurwill]

Hi @radavis ! I think the answer is actually to adjust the page content — we don't want the sign in header to be an H4.

And we had a related ticket to combine the cpap and hearing aid pages, so I took that opportunity to solve this header problem.

Here's the draft page in Drupal: http://preview-prod.vfs.va.gov/preview?nodeId=68659

We still need to put this through SME review and copyedit, but the general structure is there.

So this would mean that the header level on the "Sign in" line is correct, but the content needs to change to include both types of supplies: Sign in to order hearing aid and CPAP supplies

[wesrowe]

Hi @laurwill. I'm glad the header issues is resolved. FYSA it would have saved us some work and frustration if we knew you were going to combine these pages. [shrug]

So how does the SME review affect our timeline for getting this widget (just one now) into production? I have seen those reviews go slowly and quickly...

[laurwill]

I'm sorry about that Wes — I didn't think that combining work was happening anytime soon, and I was mistaken!

This page is mostly reusing previously approved content from the 3 existing pages, so fingers crossed this goes fairly fast. I'll put it through CAIA copyedit at the same time.

My other question here is how this widget will work with the MHV-related sign-in flow. Since this is going in My Health, will this need the full sequence of health-related sign-in, verify, register with MHV widgets and alerts we're trying to get approved right now?

[laurwill]

Here's the preview in Drupal — I added the react code (I'm not able to test it in Drupal preview), but it should line up okay under the "Order hearing aid and CPAP supplies" H2.

http://preview-prod.vfs.va.gov/preview?nodeId=68659

[wesrowe]

Since this is going in My Health, will this need the full sequence of health-related sign-in, verify, register with MHV widgets and alerts we're trying to get approved right now?

Copying @sterkenburgsara, but I suspect the answer is yes. Best of your knowledge, has anyone talked about a standard implementation for those numerous widgets?

[laurwill]

Hi @wesrowe and @sterkenburgsara , I chatted with @DanielleThierryUSDSVA about this — we're hoping to have the new health sign-in widgets content finalized early next week (meeting with Carnetta on Tuesday). So assuming that goes as planned, we could use this page update to pilot the implementation of these widgets. Would that make sense in terms of your timing? I think we'll also need to partner with the identity team to make sure each widget is working as intended.

[wesrowe]

@laurwill, I believe you're talking about "the full sequence of health-related sign-in, verify, register with MHV widgets and alerts"... I see those as a fast-follow iteration on the basic sign-in widget, with the basic version going to Veterans in a first release. It's a matter of capacity, and it seems more impactful to me for Cartographers to add the "full sequence" to the MHV portal as a whole (which will soon include the reordering apps).

EDIT: and if CAIA needs to prioritize one or the other for finalizing content, I would suggest the MHV portal sequence.

[laurwill]

Hey @wesrowe ! I think we'd finalize content for these at the same time, because the MHV portal sequence and the sequence for individual tools and forms that live in the MHV portal will be very similar. I think the only difference would be the CTA in the widget headers — "Sign in to order hearing aid and CPAP supplies online" vs "Sign in to access My HealtheVet" (or something like that).

Let's check in on Tuesday after we (hopefully!) finalize content for these flows and see what makes sense for implementation.

[radavis]

@laurwill Unsure if you and @wesrowe had an opportunity to meet. Updates to the ctaWidget are now on staging.va.gov with the copy specified in this comment.

When you have the time, please verify and let us know if you require any changes.

[laurwill]

Hi @radavis , here's the updated sign-in widget content. The header is longer than ideal — could you see if this wraps onto 3 lines in the design? (We're trying to get "online" into the header because due to some page hierarchy issues, we won't have our normal "Order online" header above the sign-in widget. So we're including "online" in the header of the widget itself. But if it wraps onto a third line we may need to rethink.)

Sorry for all the back and forth on this, and thank you so much for updating again!

[header] Sign in with a verified account to order hearing aid and CPAP supplies online You’ll need to sign in with a verified Login.gov, verified ID.me, Premium My HealtheVet, or Premium DS Logon account. Identity verification helps us protect you by making sure the person creating your account is you—and not someone pretending to be you.

Don't yet have a verified account? Create a Login.gov or ID.me account now. Then come back here and sign in. We’ll help you verify.

Not sure if your account is verified? Sign in here. We’ll tell you if you need to verify.

{Button} Sign in or create an account

[text link] Learn about creating an account

[laurwill]

Oh and realizing this would be more of an issue on mobile, could you screenshot what the mobile version would look like?

[radavis]

@laurwill How soon do you need these changes?