Create clickable Prototype of VBA RO page

[davidmpickett]

Description

Blocked by Midpoint review Blocks conducting usability sessions

Design

Sketch file Figma file (to view structure of prototype) Prototype only

Acceptance Criteria (Sprint 90) - 5pts

• [x] I expect that the prototype reflects any must design recommendations that are raised in Midpoint review
  • [x] midpoint review feedback will be available EOD 8/2
• [x] I expect that the prototype supports the user flows specified in the conversation guide https://github.com/department-of-veterans-affairs/va.gov-cms/issues/13724
• [x] I expect that the prototype includes the closed accordions for all service terms marked as "Include in prototype" in the VBA services working document
• [x] I expect that the prototype is designed for mobile
• [x] I expect that a new design for accordion interiors that uses the card-with-border DS component is created and reviewed with team

Specific Interactions

• [x] I expect that the 3 top task links go to screenshots of the relevant pages
• [x] I expect that the on this page links jump the user to the correct section
• [x] I expect that the facility operating status can be expanded
• [x] I expect that all the Prepare for your Visit accordions can be opened and closed
• [x] I expect that the prototype includes the open accordions for some service terms as needed to support research plan
• [x] ? I expect that "don't see the service you're looking for" link goes to a screenshot of facility locator?
• [x] I expect that the prototype has a floating "back to top" button ala Vet Centers
• [x] I expect that a link to search for nearby VA locations in the "Other nearby VA locations" section is added, e.g. https://www.va.gov/reno-vet-center/locations/, and should point to a screenshot

Specific content

• [x] I expect that the Helpful Documents content is incorporated: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/14351
• [x] I expect that the content of the 3 open service accordions is incorporated sent to SCAIA for review
  • [x] @davidmpickett to assist

Reviews needed to go into Usability Testing

• [x] I expect that the Facilities PM/PO have signed off on the prototype
• [x] I expect that the Facilities research team has signed signed off on the prototype
• [x] I expect that the Accessibility Specialist has signed signed off on the prototype
• [ ] Engineering review required?

Documentation follow up

• [x] Once the prototype is approved, I expect that the Midpoint Review feedback tickets are updated with evidence of how their recommendations were incorporated
• [ ] I expect that Midpoint review feedback tickets are closed once all actionable feedback has incorporated

Acceptance Criteria (Sprint 91) - 2pts

Follow up

• [x] I expect that Midpoint review feedback tickets are closed once all actionable feedback has incorporated

Jordan is waiting on a response in the design Midpoint Review ticket to determine if our combined accordion/card component needs to go through the experimental design process, since it technically isn't in the design system.

Answer: This doesn't need to go through the experimental design process.

• [ ] Implement change suggested by the Accessibility Specialist

Laura's feedback that we need to address: Because of the new, updated external link guidance, I think the text for the "Get Updates..." links should be a bit clearer that they will be opening in a new tab, especially the first subscribe link. (More detail in comments below)

Answer: I made some copy updates to this section, but we still have a question on how to properly word the "Subscribe to VBA news" link. That link is going to point to a page similar to what the VAMC pages point to, which is the GovDelivery website page. I asked CAIA this question in our open content ticket we have with them.

[cindymerrill]

More ideas for the prototype, which I documented while I was working on the research plan and conversation guide:

1. Make the 3 action links at the top of the page go somewhere
2. Make the links under "On this page" work
3. Include some content under the "Limited services and hours" additional info component, if including it
4. Be able to open more than one service accordion

[davidmpickett]

FYI - I listed out some specific interactions we've been discussing just so they're documented for the future

[kmariepat-cityfriends]

waiting on site wide content review to finalize designs and unblock this to finish prototype

[davidmpickett]

I just updated the VBA services working document to prep for prototype.

1. I added "Direct deposit information" to "Other Services"
2. I adjusted the sort so that all the services we want to include in the protype are listed first and the ones mark don't include are listed second. Much easier to verify that the prototype matches

[jilladams]

Per https://dsva.slack.com/archives/C0FQSS30V/p1690313218806759, pulling into sprint and assigning. @thejordanwood add points when you get the chance.

[thejordanwood]

End of sprint update:

I've started on this work and have checked off what I've accomplished so far. I should be able to finish this after Midpoint Review on 8/1.

[davidmpickett]

@thejordanwood FYI slack thread from @laflannery and @mmiddaugh about Back to Top component https://dsva.slack.com/archives/C0FQSS30V/p1690919441581479

[davidmpickett]

I added points and additional acceptance criteria

[cindymerrill]

@davidmpickett I assume that the Back to Top component should be a link, not a button, as it is on Vet Center pages (example).

[laflannery]

I had tracked this down because I wasn't sure why it changed - the DST changed this into a link so yes, this should be using the component and it would look as it does on the Vet Center pages now.

[davidmpickett]

@thejordanwood Can you add a link to the Figma prototype to the top of the main comment so it's easy for everyone to find?

[thejordanwood]

@davidmpickett Links have been added!

[ALogsdon3]

@thejordanwood I gave you edit access to the Word doc in Sharepoint for Helpful docs, but I am also sharing the content here for ease of access:

What to bring

Some of the documents and information listed here could be helpful during your visit.

Documents you may need

• A non-expired photo ID
• A copy of your discharge or separation papers (DD214)
• Medical records

Personal information

• Social Security number
• Direct deposit information

Information about your dependents

• Dates of birth
• Social Security numbers

We can help you find out what documents to bring to your visit or request documents on your behalf. Call the office for more information.

[cindymerrill]

@thejordanwood I have a few comments about the prototype, which I know you're still working on:

• The "on this page" links jump the user to the correct section, but clicking the back arrow exits the prototype. I would think it should bring you back to the "on this page" links
• The "back to top" link is missing the text. Is that how it's supposed to appear on mobile?

[cindymerrill]

Re the second item above, mobile shows an arrow without words (the words are only shown in desktop)--per Jordan in UX Refinement on 8/3. So no change needed.

Re the first item above, this may be a problem with Figma and needs to be looked into. I don't recall seeing this in any previous prototypes for research, but maybe they weren't in Figma. Clicking on these links during research can't exit the prototype.

[davidmpickett]

Updated the VBA services working document with a new tab for the content for the interior of the 3 service accordions.

[cindymerrill]

My feedback on the Disability and Burials/memorials accordion content:

1. Should the hours perhaps vary somewhat across the 3 accordions so they're not all the same? Or maybe because all 3 accordions go to the Public Contact Office, it makes sense that they have the very same office hours, phone number, and appointments blurb?
2. The Burials/memorials tasks look the same as Disability, which doesn't seem correct. I thought that "checking a claim status, updating direct deposit" may not be relevant. Maybe you're still working on this, @davidmpickett ?
3. If many open accordions are going to have the exact same info about the Public Contact Office, maybe it would make sense to move some of it out of the accordions and up above before all the accordions?

[davidmpickett]

1. Should the hours perhaps vary somewhat across the 3 accordions so they're not all the same?

2. If many open accordions are going to have the exact same info about the Public Contact Office

This content is based on the actual mapping of services to Service Location. If we want variety, we could change one of these to be located in the VR&E Office at the Boston Regional Office rather than the Public Contact Office and give it slightly different hours. We'll just have to be clear to stakeholders that we're intentionally mismatching them for testing purposes

[davidmpickett]

2. The Burials/memorials tasks look the same as Disability, which doesn't seem correct. I thought that "checking a claim status, updating direct deposit" may not be relevant. Maybe you're still working on this, @davidmpickett ?

Long answer

I'm going to overexplain myself here because I want to call out some general decisions I made that might not be immediately evident, but may be intertangled with this specific example.

My thinking here was that benefit-specific task keywords (burial allowances, memorial items, Certificate of Eligibility) should live in the National service description, and the Service location brief description should use generic task descriptions (filling out paperwork, checking claim status, etc.). This is a different approach than the previous "top tasks" list which interwove both types of task content. This also reflects the fact that when there are multiple service locations, one of the main distinguishing features is often the task that can be accomplished.

National service description = Did I open the right accordion? What's disability compensation vs veterans pension?

Service location brief description = What can the staff at this service location help me with?

Also, unlike the previous top task list, which was strategically narrowed down because it was in a prominent position, I'm thinking the Service location brief description might benefit from being slightly more exhaustive list, since it's deeper in the details. Might even be powered by a checklist on the back-end which concatenates into a sentence on the front end. (Especially long-term as the VA Benefit taxonomy and Facility locator evolve)

Short answer

All that being said, I'm not 100% sure that Public Contact staff can assist survivors with checking claim status for burial allowances, or that burial allowances are paid by direct deposit, but I have compelling evidence that both of those things might be true that I thought it was worth putting them in for now.

[mmiddaugh]

I'd encourage varying the details for locations and modalities as needed to allow testing of more variations, even if it isn't entirely accurate for the real-life Regional office in the prototype. We can caveat with Veterans and advise the Regional office staff that we're experimenting.

Is there any chance that the hours of availability, address, or method for scheduling is different for one modality vs another, (i.e. availability in office only on certain days while staff is available every day by phone)?

---

Given our current understanding of the range of service modality options, the following feedback on the service accordion interior is food for future thought, rather than actionable for the research prototype.

We may need to evolve labels and icons to differentiate between service modalities, once we know more about the possible options.

• [phone icon] Virtual appointments available
  • Appointment by phone (or more elegant label) might be more accurate or clear, especially compared to other virtual appointment options. (especially If the final/full list of service modality options includes both connecting via phone and a Virtual appointment offered via web meeting (either from home or in the office)
• [building icon] Visit our office, with or without an appointment
  • similarly, we may want a method for differentiating between Visit our office, appointments required and Visit our office, no appointments necessary

[davidmpickett]

I'd encourage varying the details for locations and modalities as needed to allow testing of more variations, even if it isn't entirely accurate for the real-life Regional office in the prototype. We can caveat with Veterans and advise the Regional office staff that we're experimenting.

I updated Burials and Memorials to reference the VR&E office rather than Public Contact office, created a different set of hours and set it to in-person appointments only.

I left Disability Compensation as Public Contact office, but removed the options for appointments.

The Burials/memorials tasks look the same as Disability, which doesn't seem correct. I thought that "checking a claim status, updating direct deposit" may not be relevant. Maybe you're still working on this, @davidmpickett ?

I took these two items off the description for variety's sake

[davidmpickett]

Re: Acceptance Criteria about sending content to SCAIA for review:

• Github comment
• Slack thread

[cindymerrill]

@thejordanwood I found some issues in the prototype:

• If you expand an accordion (e.g., What to bring), click Expand all (this works), and then click Collapse all, the original accordion that you opened stays open.

• Also, with Expand all I got text on top of other text:

  

• Sometimes the accordions don't work at all--when I first open the prototype, I'm unable to open any of the accordions. Are you making changes that are causing it to break? I didn't have this problem yesterday when I was playing with the prototype. UPDATE: This is now happening EVERY time I open the prototype, so I'm unable to test it anymore :(

[thejordanwood]

@cindymerrill

If you expand an accordion (e.g., What to bring), click Expand all (this works), and then click Collapse all, the original accordion that you opened stays open.

This is a limitation of the expand/collapse all functionality in the prototype. The Income Limits prototype had the same issue, and I was never able to find a solution to this. If we feel this is a blocker then we can remove the expand/collapse all functionality.

I was making updates at the same time you were testing this, so the other 2 issues you mentioned should be solved now.

[thejordanwood]

Changes that have been made since our UX refinement on 8/10:

1. Title of "Helpful documents" accordion was changed to "What to bring"
2. Title of "Direct deposit" accordion was changed to "Direct deposit information"
3. Phone icon for virtual appointments was changed to a calendar icon. Changed the copy on this from "Virtual appointment available" to "Schedule a virtual appointment" to tie in with the icon.
4. Back to top button now follows user as they scroll. Due to prototype limitations, the button had to be removed from it's original place in the footer to make this possible.

cc: @jilladams

[cindymerrill]

@thejordanwood Thanks for making the prototype work again!! Just confirmed that the 2 big issues are resolved, and I'm OK with leaving the Expand all functionality as is:

If you expand an accordion (e.g., What to bring), click Expand all (this works), and then click Collapse all, the original accordion that you opened stays open.

FYI @jilladams

[cindymerrill]

I just asked this on slack but will document my question here, too...

@davidmpickett @thejordanwood For Disability service in our VBA prototype, am I correct in understanding that you can get help only in person (not virtually or over the phone)? That's my understanding from the prototype, and I've updated my conversation guide to match this.

[cindymerrill]

The prototype looks good to me, pending any convo guide feedback from anyone today and any issues that come up during piloting next week

[thejordanwood]

Laura's comments about the Get Updates section from this slack thread:

Because of the new, updated external link guidance, I think the text for the "Get Updates..." links should be a bit clearer that they will be opening in a new tab, especially the first subscribe link.

Solutions:

1. We update VBA now because it's new and want to follow all current guidance and then we create a backlog ticket for VAMC following the same language that the approved VBA template uses, OR
2. We leave VBA as is, using current language because there is a chance we might slow down delivery and other processes if we try to send to content team to change things now. Then we create a ticket to update both VBA and VAMC at the same time.

[thejordanwood]

I'm waiting on a response in the Midpoint Review design feedback ticket on if our card component needs to go through the experimental design process, since it technically isn't in the design system.

[thejordanwood]

End of sprint update:

I have a couple of outstanding questions that we'll need to answer at some point, but neither should prevent us from testing the prototype. I'm going to go ahead and close this ticket.

Outstanding questions:

1. How should we reword the content in the Get Updates section?
2. Should our card component go through the experimental design process? Since this design was suggested by Matt, I don't believe we should be prevented from testing this.

cc: @jilladams

[jilladams]

Thanks @thejordanwood - Question 1, I think @xiongjaneg should help settle that thread. (IMO both options make sense, and we have some time, so since content isn't blocking research anymore, we could chase Option 1, if that's the right thing to do.) Question 2 is for the DS team, Jordan already following up.

My other 2 cents - action items without tickets = I get lost in the sauce. So: if you/Jane have it, lovely. If a ticket would help, I'm ok either cutting a new one, OR update ACs here / reopen, and call the current set of ACs "Sprint 90 ACs" and add a Sprint 91 section of ACs to get the follow ups.

[xiongjaneg]

@jilladams @thejordanwood For question 1, let's do Option 1. Let's follow the guidance going forward. I'll create a ticket to align VAMC with VBA in the future.

[thejordanwood]

@jilladams @xiongjaneg I'm reopening this ticket so we don't lose track of these 2 outstanding items. I'm repointing the ticket from a 5 to a 2 to reflect this work.

[thejordanwood]

@jilladams Not sure how to do this, but we probably don't need to have the high priority tag on here since the prototype is finished.

[jilladams]

Word - for future, just gotta click the Pushpin icon to remove / add that status. Removed! Thanks for the notes.

[thejordanwood]

In the Sketch mockups, I've changed the copy in the Get Updates section and commented in the file to call out the change.

This will not be shown in the prototype we'll be working with for usability testing, but will be implemented when this goes to development.

[laflannery]

@thejordanwood I took a look at the new text in this section - are we also going to change the "Subscribe to VBA news" as well?

[thejordanwood]

@laflannery I was wondering about that. I think it's going to point to a page similar to what the VAMC pages point to. I'm not sure what to call a page like that.

Maybe we could change the wording to "Subscribe to VBA news on our email updates page?"

[laflannery]

We would usually want to clearly name the website we are taking folks to (i.e. GovDelivery website page) but that seems very weird. In the case of what you propose above, this wording could still be on the same domain, it's not very clear that it's going to open in a new tab. We might need CAIA and/or PO input on this one.

[thejordanwood]

@davidmpickett The copy in the Get Updates section is going to change because of the new, updated external link guidance. I've made some suggestions but we're wondering what to change the "Subscribe to VBA news" link copy to.

Do we still have a content ticket open with CAIA? If so, I was thinking we could add that question to it.

[davidmpickett]

@thejordanwood here's the CAIA ticket: https://github.com/department-of-veterans-affairs/va.gov-team/issues/58511

[thejordanwood]

@davidmpickett Thank you! I was having trouble finding that.

@laflannery I've added our Get Updates sections questions to the CAIA ticket so we can get their feedback on it.

[thejordanwood]

@xiongjaneg The Design System team has confirmed we don't need an experimental design ticket for the accordion design. I've implemented most of Laura's feedback, but have put our outstanding question in our open CAIA ticket.

I'm going to close this ticket because our follow up ACs are as complete as they can be at this time.