EPIC: Federal standardized header and footer

[jilladams]

Top-line Description / Goal(s)

Adopt the federal header design. Improve performance of the Headers/Footer. Support the Platform Team's migration to USWDS 3.0 and OFCIOs identity initiative so that VA can provide better experiences to Veterans across the portfolio. 

Simultaneously tracked on DMC Board as https://github.com/department-of-veterans-affairs/digital-experience-products/issues/714

Project updates:

Decision log

2024-03-01

• Cindy finished drafting the header/footer research report and shared with @aklausmeier for feedback.

2024-02-29

• Cindy's goal is to have the synthesis and reporting completed before the end of Sprint 105, and will then start the research readout and post-research tasks.

2024-02-16

• Project placed on paus because the OFCIO wants to conduct a broadened research endeavor that will encompass more than just VA.gov
• Randi to finish working on the flattened injected header/footer; Design team to continue their work on the auth portion; will release only the injected header changes when the Design team is finished.
• Cindy to continue work on the synthesis and reporting.

2024-02-05

• Jill/Fran/Randi met with Amanda to chat about the slight changes to the auth menu
• Wes's team to work on the user's displayed name only
• Randi is slogging through the injected header with help from Micah on the auth portion

2024-01-22

• Decision log created regarding creating a flattened HTML for the injected header/footer.

2024-1-10

• Randi created tickets for preliminary (head-start) build-out of the header and footer. The header story will be pulled into Sprint 102

2024-01-08

• Header build out Ticket was able to be pulled into Sprint 101; it will most likely roll over to Sprint 102
• Footer build out ticket created, refined, and poised to be pulled into Sprint 102, if possible.
• Mega menu clean-up ticket created and will be reviewed with Dave to get approval for style/markup cleanup.
• CodePen completion is on track
• Research tasks are on track

Status week of 01/02/2024

• The Federal Header/Footer research topline summary has been revised by Cindy Merrill and is now ready for Dave / Amanda to share more widely.
• Cindy will be working on these two tickets during Sprint 101, which begins on 01/03
  • Draft Federal Header Footer Phase 2 research plan #16611
  • Draft Federal Header Footer Phase 2 conversation guide #16613
• Randi Mays and/or Chris Kim will be working on these two tickets during Sprint 101:
  • Review Codepen for Federal Header #16571
  • and then: #16573 Build Codepen Header/Footer Prototype screens

Status week of 12/27

• Cindy (on 12/22) met with Amanda K and wrote a research summary report that's somewhere between a topline and a full report
• Cindy will transition to planning Phase 2 of the research (in January
• Laura delivered the CodePen work she's done so far to Chris/Randi for review. Ticket to finish builing out the prototype is here

Status week of 12/4/2023

• Cindy submitted her research plan and convo guide to Shane on 12/6

• Research dates identified: Dec 15-22 (10 completed sessions with a 25% overage like Perigean requests).

  Meeting Notes from CodePen Meeting - 12/1/2023

  Attendees:

• Amanda Klausmeier
• Laura Flannery
• Jill Adams
• Cindy Merrill
• Jordan Wood
• Randi Mays
• Fran Cross

[Amanda] Phase 1 is the Figma Prototype (non-accessibility); Phase 2 is CodePen (accessibility)

• [Amanda] we need to decide if we need to purchase a license for CodePen. Question to Laura > what are the downsides if we don't have a license?
  • [Laura] Downsides are: it's public; when you build something, you don't get live mode or presentation mode, unless you buy a plan. The debug mode doesn't function unless you're logged in; CodePen could stop working at any time; sometimes the URL refreshes; It's not reliable without a license.
  • [Jill] Our project has a time and materials budget for our contract; we can't get approval to spend money unless there is no other way to solve the issue. If the VA already has licenses available to use, we should go that route. If we need to get a license, we need to offer a compelling reason and it if it's approved, it may still take a long time.
  • [Jill Action Item] Will follow up on what it takes to get a license... Jill will confirm if it's available via AdHoc, since other teams there are using CodePen. (Has Slacked Dave already).
  • CodePen Pricing Notes: https://github.com/department-of-veterans-affairs/va.gov-cms/issues/13722#issuecomment-1609871703
• [Amanda]: The coded prototype we need for PW is CodePen; the one for Facilities is Staging. ([FC] not sure I captured this comment accurately)
• [Amanda] The MegaMenu will be needed and clickable.
• [Amanda or Laura?] Us having our own CodePen account will give us reusable components for us to use in the future, because we can just keep building on it as more projects come up.
• Who will build it?
  • Laura has aa large chunk of it started; Randi can provide a supporting role, working with Laura in completing it, instead of the primary role. For the middle part of the screen, Randi might take the primary role, and Laura will support.
• Timing: When will be trying to have the prototype available for Phase 2, accessibility?
  • [Cindy] Phase 2 research sessions won’t start until sometime in February--not possible for late January
  • Mid-January for the prototype
  • End of Jan/Early Feb is projected timeframe for Cindy to start sessions for Phase 2.
• [Randi] Question: With Accelerated Publishing wrapping up; we'll be changing something structurally that they will have in their next build. Will this adversely affect them?
  • [Jill]: We'll have to work it out; we're doing this research to provide feedback to the Office of the CTO. I don't think we'll have anything shippable to prod in the timeframe that AP will be finishing their contract.
• [Amanda] End goal is we need to have the OFCIO to sign off on how this will look, and it's important we have their buy-in as it will also contribute back the US Web Design System for other agencies to use a similar framework (the current header footer isn't componentized).

Updates for Weeks of Nov 6 and Nov 13

• Footer Analytics gathered and provided to Dave Conlon, Cindy Merrill and Amanda Klausmeier (see Analytics section below for the artifact)
• Jill Adams and Fran Cross met with Amanda to discuss stages and upcoming tasks
• Header Analytics gathered and provided to Dave Conlon, Cindy Merrill and Amanda Klausmeier (see Analytics section below for the artifact)
• Cindy M has prepared her drafts of the following, ready for Amanda's review conversation guide and list of prototype screens needed are ready for your review.

Update 7/5

We will support injection of Fed Head/foot

• there will not be (hopefully; DC consulting DST) VA web components in the injected FedHead
  • Instead: we are hoping to build our own web component for managing the header that can be contributed to the USWDS
• we'll fork
• we'll update VAgov first, then make a plan to roll out to injected sites
  • note: this may be a complicated coordination effort, as it seems like injectee sites frequently had to alter their own css styles

---

Headlines

VA stakeholders -

OCTO lead - Dave Conlon

Is this project tracked to an upcoming event or congressional deadline? - No

Details

Which OCTO team should do this and what is currently on their roadmap? - Sitewide

Which OCTO priority does this work support? -

What is the user impact and scale of impact? -

Who would manage this product long term? - Public Websites

How much leverage will this create to solve more problems in the future? -

How great is the cost of inaction? (e.g., Can it wait? Must it be done by us?) -

---

Background

Product brief: https://github.com/department-of-veterans-affairs/va.gov-team/tree/master/products/header-footer/federal-standardized-header-footer

User Story or Problem Statement

AS A Veteran, Veteran's caregiver, or other user of VA.gov header and footer areas and associated links/components I WANT to experience enhanced/improved performance and usability SO THAT I can find the information, content or forms I need with the least amount of frustration and time

Affected users and stakeholders

Stakeholders

• Andy Lewandowski, Office of the Federal CIO
• Matt Dingee, OCTO Platform
• Web governance board
• Developers of Y teams

Users

• Veterans
• Veterans Caregivers
• Other VA.gov users

Hypothesis

We believe that _thissolution will achieve _thisoutcome. We'll know that to be true when this measurable outcome occurs.

Assumptions

• Tk
• Tk

(How will these assumptions be validated?)

Acceptance Criteria

• [ ] Testable_Outcome_X
• [ ] Testable_Outcome_Y
• [ ] Testable_Outcome_Z
• [ ] Requires KB article update

Analytics

Baseline Analytics

• Header Analytics:

  • Google worksheet
  • Excel worksheet VA.gov Header Analytics - August.xlsx

• Footer Analytics

  • Google worksheet
  • Excel worksheet VA.gov Footer Analytics Baseline & Other Info.xlsx

Artifacts

• Design in Sketch

Change management triage

The change represented by this user story will:

• [ ] Be a site-wide change to appearance or key functionality (such as log-in process)
• [ ] Be a specific change that requires more than 30 minutes of work by a user to meet a publishing requirement
• [ ] Remove a piece of functionality (such as restricting editing functions, or “hardening”)
• [ ] Require action by some or all users by a specific deadline
• [ ] Change the front end and be highly visible to the public
• [ ] Noticeable performance improvements (publishing speed, predictability)

If you selected an item above, use the Change Management Runbook to create a CM epic and associated tickets.

If you did not select an item above, update issues/PRs in GitHub but don’t plan for change management.

Design principles

Veteran-centered

• [ ] Single source of truth: Increase reliability and consistency of content on VA.gov by providing a single source of truth.
• [ ] Accessible, plain language: Provide guardrails and guidelines to ensure content quality.
• [ ] Purposely structured content: Ensure Content API can deliver content whose meaning matches its structure.
• [ ] Content lifecycle governance: Produce tools, processes and policies to maintain content quality throughout its lifecycle.

Editor-centered

• [ ] Purpose-driven: Create an opportunity to involve the editor community in VA’s mission and content strategy goals.
• [ ] Efficient: Remove distractions and create clear, straightforward paths to get the job done.
• [ ] Approachable: Offer friendly guidance over authoritative instruction.
• [ ] Consistent: Reduce user’s mental load by allowing them to fall back on pattern recognition to complete tasks.
• [ ] Empowering: Provide clear information to help editors make decisions about their work.

Runbook

## Labels (You can delete this section once it's complete) - [x] Issue type (red) (defaults to "Epic") - [ ] CMS subsystem (green) - [ ] CMS practice area (blue) - [x] CMS workstream (orange) - [ ] CMS-supported product (black) ### Team Please check the team(s) that will do this work. - [ ] `CMS Team` - [x] `Public Websites` - [ ] `Facilities` - [ ] `User support`

[laflannery]

I can't add this issue to this epic for some reason so I'm adding in a comment so I don't lose track of it

[jilladams]

Amanda working through the design, in her available time.

• Cindy has generated a research plan.
• Once design is reviewed by other agencies (happening nowish / soonish).
• Design will need a Sketch prototype, Amanda hasn't done before, may ask for Jordan's support.

When it's time to pull folks in, we'll need to work that time into sprints.

[jilladams]

A11y sync today covered what may / may not be in scope for this project on A11y grounds (Slack thread).

Notes:

• The visual look and functionality of the megamenu should not be changing
• The code of the megamenu is in scope to change. We do not want to bring over any current/existing accessibility issues
• Laura will be helping to make sure the prototype created for research has correct accessible markup and does not have any inherent issues.
• However, whether or not the megamenu will be part of research has not yet been decided. This is an existing question that we should answer with all interested parties (PW Product, Amanda, Laura, etc.)

[jilladams]

@aklausmeier This came up with Jordan / Cindy today in UX refinement. Of note: Previously, we have used Figma for prototyping. (Basically, taking Sketch designs into Figma, and built prototypes there.) This is largely because Sketch didn't have the capability to allow opening / closing accordions. This may or may not affect the Federal Header use case. Jordan did say she's happy to connect about prototyping, whenever you're ready.

Cindy also noted the research plan proposes screen readers users as a research goal, so prototype will need to be mindful of that (or we'll need to change the goal). As far as our team has tried this in the past, Figma / Sketch do not support that use case.

[aklausmeier]

@jilladams for clarification, the research plan "template" was generated by Cindy from a previous study with a few additions but I am in the process of modifying it for Fed H/F research goals. Will sync with @cindymerrill to review for additional edits in next few days. This research plan will most likely need to be reviewed by USWDS stakeholders as well, and Dave of course.

I've never created prototypes in Sketch but definitely in Figma. Good to know we need to continue to steer clear of Sketch prototyping. With this specific study, screen readers and accessibility testing is important and prefer to use a coded prototype for this study. @laflannery and I are meeting with devs today to determine better feasibility of coded prototypes... so more info soon. I don't want to compromise on not using a coded prototype for H/F. I'd like to overcome current accessibility issues and to ensure we work out all the bugs if this is being contributing back to USWDS as our due diligence.

[jilladams]

Perfect! Thanks Amanda.

[jilladams]

@FranECross to keep the Q1 document length manageable, I'm porting some older comments on status into comments here so we don't lose them, but don't need to carry them quarter-long in that doc.

---

• [01/08/2024 Fran] On Track. Stories in progress in current sprint:
  • Draft Federal Header Footer Phase 2 research plan #16611
  • Draft Federal Header Footer Phase 2 conversation guide #16613
  • Review Codepen for Federal Header #16571
  • Randi and Chris have finished their review; ticket reassigned to Laura to finish it up.
  • Build Codepen Header/Footer Prototype screens #16573
  • Stretch/Next Sprint: Synthesize Federal Header/Footer research & reporting #16374 and Prep for Federal Header Footer Phase 2 research #16614
• [01/02/2024 Fran] Laura created a new ticket: Update footer based on Phase 1 research insights"
  • Amanda won't have changes ready to share for a few days... consulting with Mikki and Danielle on content and IA tomorrow (01/03)
  • Ticket targeted for Sprint 101 (1/3 - 1/16) Update Codepen prototype footer based on Phase 1 research #16592
  • Phase 1 Research sessions concluded 12/21
  • Midpoint Goal completed
  • CodePen prototype almost completed

[jilladams]

@aklausmeier @davidconlon @FranECross Added a decision log to initiative files: https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/header-footer/initiatives/2024-federal-standardized-header-footer/decision-log.md. Feel free to add notes there if you all end up with decisions to track on the stakeholder / research side, etc.

[jilladams]

Per Fran:

This project is placed on hold... the OFCIO wants to extend the research/usability study across a broader spectrum than only VA.gov. Undetermined at this time which team or who will do the actual work. Moving to Blocked.

[FranECross]

Per Dave Conlon, the Federal Header/Footer improvement effort has been closed by the Whitehouse / 18f. All related tickets may be closed.