IA Guidance: Document standards for benefit hub page template

[mnorthuis]

We need to establish standards for the existing benefit hub page template.

The short term goal of this work is to document the general standards and guidance we use to determine what content and links belong on the benefit hub pages, and where they belong. As well as guidance around how we decide if something should be added or removed.

An initial draft of this was done several years ago in Moqups, and a screenshot of that information has been moved into Mural to start the process.

https://app.mural.co/t/departmentofveteransaffairs9999/m/departmentofveteransaffairs9999/1694550504118/9ab9423b7a907602411017fd5a5fbff952ebc8bd?sender=u2aba00c97ab77c6ec1573123

For each section of the template, we need to establish

• a definition of each section, including whether it is required/optional, what constraints the section has, what elements should be included, and any other general information
• what content/links belong in the section and what does not
• what order should the content/links be in and how information should be prioritized
• any accessibility considerations with the features/functionality of the section

Final information should then be reviewed for placement within the design system, so the template page on design.va.gov will need to be reviewed.

Sources of information that can be used

• IA hub audits
• analytics
• content placement criteria

Note: This will establish a current state for this template. There is intention to evolve this for other work, and this will help establish what we are currently working with and where we think we need to evolve.

We will need to review the final information with various OCTO leads before implementing in the design system.

Tasks

Beta Give feedback

1. [a11y documentation] Benefit Hub Page Template: Review for Accessibility Considerations #74090
   12 of 12
   sitewide CAIA sitewide IA sitewide accessibility +3
   

[kristinoletmuskat]

Pulled this in and documented first pass here: https://app.mural.co/t/departmentofveteransaffairs9999/m/departmentofveteransaffairs9999/1694550504118/9ab9423b7a907602411017fd5a5fbff952ebc8bd?sender=ua641db233dc545173f8d9816

[kristinoletmuskat]

Blocked by Mikki getting feedback from Beth/Danielle/Matt Dingee.

[kristinoletmuskat]

Opening because need to add;

Also want to create a rubric for how we determine things that appear
Page views, but also other things like stakeholder or veteran journey importance
Because some tools are one and done, others are continuous, which would impact the analytics

[kristinoletmuskat]

Link to draft of proposed changes to VADS page: https://docs.google.com/document/d/1Ojr6OCIH3CGWG-auQf7N2Gk-D2_eaI1g0fpSoLpv0jg/edit

@erinrwhite and @mnorthuis this is ready for your initial review.

[mnorthuis]

@kristinoletmuskat I started reviewing this, got through the first spoke. The general changes I have made so far are mostly related to:

• Removed reference to the content placement criteria for now to avoid links to git hub, but eventually we will have an IA/site organization section on VADS that we can refer to where appropriate.
• Removed references to the foundations section, which seems less applicable to me than the actual component used. I believe when this was first created we didn't have a lot of components.
• Modified content to follow our writing guidelines - i.e. identity first language, removing "the" from in front of VA, etc. We could ask an editor to help with some of this when we are done.

Take a look and let me know if the changes make sense. Hopefully you can follow those through the other sections.

[kristinoletmuskat]

@mnorthuis just went through and made the suggested edits!

@erinrwhite I believe this is ready for your initial review! Feel free to leave comments directly in the doc.

[erinrwhite]

@kristinoletmuskat looking good! I made a few small formatting changes. For the spoke section guidelines, since we are including these bullets in each spoke, can we elevate this guidance on the page and say that it applies to the entire page?

• Link label should match destination H1, unless it needs additional words to clarify the context of the link for a screenreader user
• Only include links to Veteran/family member content

[kristinoletmuskat]

Hey @mnorthuis and @erinrwhite , I've reviewed and addressed all of the feedback so far. We got an a11y review on our initial proposal in Mural, but might be worth getting another one, plus a content review for style? Do those sound like the next steps to you?

[mnorthuis]

@kristinoletmuskat Added a few minor comments. Let's create supporting images similar to what's used in the forms section of templates. We can get design assistance if needed.

[kristinoletmuskat]

@mnorthuis I made updates based on your last round of comments. Do you mean a single image for the whole VADS page that's the same as the one I created in the WIP, but using the visual style of the one on this page? The forms template has a different image for each of the 4 pages in a form flow, and each of those images is a different type (2 different types of annotated screenshot and 1 wireframe).

[mnorthuis]

@kristinoletmuskat Finished reviewing and simplified a few things along the way. Take a look and let me know if there are questions/feedback. Once all changes are accepted/modified, let me know, I want to review this with a few OCTO peers next.

[kristinoletmuskat]

Just adding a note that we finalized a draft and Mikki is currently reviewing with OCTO

[mnorthuis]

Hub template guidance is good to go and final is attached below. Please add a mobile view of the hub page along with the desktop with the same numbered call-outs. Thank you!

hub-template-standards.docx

[mnorthuis]

Next step is for @kristinoletmuskat to create a mobile view to add to this and for @erinrwhite to create a PR.

@erinrwhite please reach out to @kristinoletmuskat and @samw-va if you need assistance moving this out of word and into markdown.

[kristinoletmuskat]

Hello @erinrwhite ! Here is the mobile version with callouts

[erinrwhite]

Starting work on the VADS page.

[erinrwhite]

Hi team, I have the draft page updated on my machine and I'm not quite sure about best placement for the mobile screenshot. It's very long, and I could align it left or right alongside the content but it seems a bit hacky. Recommendations welcome. @mnorthuis @kristinoletmuskat

[mnorthuis]

I think we should direct a question to the design system team on how they want screenshots like this to be handled. We need to include mobile view but I don't want to have to scroll for an hour to get to the guidance. @erinrwhite can you ask the DST their thoughts?

[erinrwhite]

Pull request submitted!

Updated, actual PR submitted after some help from the DST to get write access!

page available for preview here

I ended up breaking up the mobile screenshot into three chunks, to correspond with the sections (intro, spokes, right rail). Design as pictured below. Over to @mnorthuis for approval.