Build Codepen Header/Footer Prototype screens

[laflannery]

Description

Work with Amanda and Cindy to determine and build out the screens needed for Phase 2 Header/Footer research sessions.

Screens & actions

• Screens
  • Deciding how much Life Insurance to get
  • Find VA Locations
  • Eligibility for VA Disability Benefits
  • How to apply for the GI Bill and related benefits
  • Find a VA Form
  • Careers at VA
  • Contact Us
  • Welcome to Ask VA
  • VA Chatbot
  • Freedom of Information Act
  • My VA
  • Dummy page (this is a page that every other page, not part of the conversation guide will direct to)
    • Link everything in the header and footer to this screen
• Functional VA Benefits & Health Care navigation menu
  • Disability with Eligibility link going to Eligibility for VA Disability Benefits CodePen screen
  • Education and Training with How to apply link going to How to apply for the GI Bill and related benefits CodePen screen
  • Careers and Employment with Find VA Careers and support link going to Careers at VA CodePen screen
• Sign in flow
  • Click on Sign in button
  • Something happens
  • Logged in view with User Name
  • Signed in Dropdown menu now available with:
    • My VA
    • My HealtheVet
    • Profile
    • Dependents
    • Letters
    • Sign out
• Functional Footer links
  • VA forms - Links to Find a Form CodePen screen
  • FOIA - Links to FOIA CodePen screen
  • Careers at VA - Links to Careers CodePen screen
  • Chatbot - Links to ChatBot CodePen screen
  • ASK VA - Links to AVA CodePen screen
• Functional Mobile search dropdown
  • Find a VA Location
  • Find a VA Form
• VA seal - Links to Insurance CodePen screen

We also need to make sure these screens connect, example the contact links in the header and footer need to link to the codepen screen NOT the VA.gov page

Acceptance Criteria - Sprint 101

• Determine which screens will be needed for the research sessions (these should be determined from the conversation guide)
• Build out all necessary screens and items in Codepen
• Send everything to Cindy and Amanda (or PO) for review

Acceptance Criteria - Sprint 102

• Implement any final feedback prior to research sessions

[laflannery]

Flagging that this should be completed by Jan 17 per @aklausmeier so that means it should be slotted for sprint 101. Capacity wise, I can do this if needed, I think the blocker here would be the conversation guide - I'm not sure if that is completed yet

[FranECross]

@jilladams I've added information to the ticket two additional links for Liz/Travis. cc @andaleliz @mtcA6

[andaleliz]

I'll be following along with this ticket, but want to drop a note here to call out that we'll be interested to see the prototype as soon as anything is available to check out (even if it's still a WIP) so we can plan for our side of research.

[FranECross]

@andaleliz Here's the original ticket with links to what's been built out so far in CodePen. Feel free to take a look and/or export! cc @jilladams

This story (16573) is for the engineers to continue and tweak what Laura has already prepared.

[laflannery]

@FranECross We should talk about this:

Also, add two links to the dropdown a user sees when logged in and they click their name, per a request from Liz Lantz & Travis Cahill (Claim status and Disability rating - see below). Note that we won't be 'wiring up' the links e.g. when they are clicked, nothing happens. Liz's team will then use what we've built to add to it.

If I'm reading this correctly I'm not sure it belongs in this ticket, it probably belongs either in the header ticket or in a completely separate ticket. These are not screens (again, if I understand) but rather it's continuing to build the header and make sure the sign in dropdown menu functions.

[FranECross]

@andaleliz Update on the ask to add two links... Amanda needs to confer with MIkki, who is out this week, so I'm going to remove the two new links from this original CodePen story, and then will create a new story after Amanda has a chance to chat with Mikki. Conversely, we can see about exporting the code for you so that your team can get started on it sooner. Thanks! cc @jilladams @laflannery

[mtcA6]

I thought Mikki was back this week (tomorrow 1/3). But also, cross posting Cindy's comment from slack as I think having the updated menu across both the AE team's research and the sitewide research would make sense to me. If Mikki is in fact back tomorrow, maybe we check back in tomorrow on the addition of the two items to the menu?

Cindy Merrill
14 minutes ago
I was out last week so just catching up on this now and have some questions…

1. After Jan 17, there may be tweaks to the CodePen prototype based on my review of it and pilot testing before Phase 2 usability testing starts. So it might make sense to wait a little longer before forking the prototype--like right before Phase 2 research sessions start? Otherwise any revisions will need to be made in both the Sitewide and the Auth versions of the prototype.
2. I would think that Auth menu changes could be made before Phase 2 usability testing if we can get Mikki’s input before Jan 17. Is that not true, @Amanda Klausmeier? If I’m testing the Auth task from Phase 1 research, I’d like to have the Auth menu as updated as possible. I think it’s more important to have the menu items there than to have each of them navigate to a page.
3. That makes me wonder whether the CodePen will be able to indicate to a screen reader that something is a link without actually going to a new page. This might be a question for @Laura Flannery; I’d like for research participants to tell me what they want to click on even if the link doesn’t go to a new page. Is that possible to do--make something “look” clickable to a screen reader but not actually go anywhere?

cc: @Samara-Strauss @pamela-drouin

[jilladams]

Decision re: auth menu:

1. We need sign in to do something to give the impression that user has signed in.
2. Auth menu needs to drop down
3. Auth menu should contain same links as Figma & be clickable

New links should not be added for Phase 2. We will provide our CodePen to the auth team / Liz Lantz to add those new links to the menu, for their purposes, as a fork. We will not provide our own CodePen to be modified, so as not to disrupt Phase 2 research session.

[cindymerrill]

The prototype screens needed are listed at the top of this document in Sharepoint, which includes the following items that weren't mentioned explicitly in the Description above, though I haven't seen the CodePen to see if they actually have been implemented:

• VA Benefits & Health Care links for Education and Training, and Careers and Employment
• Sign in button
• Menu button in mobile header
• Footer links: VA forms, FOIA, Careers at VA, Contact us, Chatbot, ASK VA
• Mobile search (magnifying glass) and links on that panel: Find a VA Location, Find a VA Form
• Mobile footer accordions open and close
• Mobile footer links in accordions: VA forms, Careers at VA
• VA seal (should open the first page of prototype)

Here's a link to the new conversation guide for Phase 2 research, which currently has the exact same tasks as Phase 1. This hasn't been reviewed by @aklausmeier yet, but my understanding is that we want to test the same prototype functionality as we did in Phase 1.

[cindymerrill]

@aklausmeier Are we going to leave "Cameron" as the name in the Auth menu?

[cindymerrill]

Adding onto @jilladams 's comment above, ALL of the Auth menu items need to look clickable to screen readers (and screen magnifiers), even if they don't take the user to a new page (I can explain that to participants during research sessions if it comes up). FYI @laflannery

[cindymerrill]

@aklausmeier Are you talking with Mikki about the names of the accordions in the mobile footer (also the column headers in the desktop footer)? 4 of 5 participants on phones in Phase 1 research had difficulty differentiating them and understanding what's in them (Information for, More resources, Connect with us, and Contact us).

[aklausmeier]

@cindymerrill I am working with Danielle and Mikki to get content and IA revisions by end of this week.

[laflannery]

@cindymerrill Thanks for your comment above on the screens and actions you need, I moved it all into the description so that I don't miss anything. I have one question, you said that you need the mega menus for "Education and training" and "Careers and employment" to work but I also think that I remember you having specific links within those menus being actions (for example Eligibity?). What are the specific links within those 2 mega menus that you need to be functional?

[laflannery]

Sorry I now have another question @cindymerrill -

The Life insurance page - I found it on VA.gov but it has a lot more content than the Figma prototype. Do you want it to look exactly like the Figma page did? with just that small intro amount of content?

And also while I'm at it, if this happens to other pages (if whats on the VA.gov page is different than Figma) should I default to just matching Figma?

[cindymerrill]

Hi @laflannery ! To answer your questions...

• Here are the megamenu links that should work for the research tasks:
  • Disability > Eligibility
  • Education and training > How to apply
  • Careers and employment > Find VA careers and support
  • ON SECOND THOUGHT, will screenreaders be able to read ALL the other links? It's important for participants to be able to perceive that ALL links on the page are links--just like in the Auth menu. Otherwise, they'll just choose the ONLY link that works in the menu, rather than deciding which one relevant to the task at hand.
• The life insurance page is purposely short so that participants don't get bogged down in it and instead focus their attention on the header and footer. @aklausmeier decided to make a shortened version of the page for that reason. I assume we should do that again, but Amanda should confirm this.
• I don't know whether any of the other screenshots were truncated in Figma, but I'm fine with matching Figma, unless Amanda wants something different.

[laflannery]

@cindymerrill Thanks for the above, I'm going through it, but I have another follow up from the first comment:

Footer links: VA forms, FOIA, Careers at VA, Contact us, Chatbot, ASK VA

There is no "Contact us" link in the footer, only the other 2 specific links for Chatbot and AVA. Was there something else you were referring to here?

[cindymerrill]

No, the Chatbot and AVA links are under the Contact Us category in the footer, so of course that accordion in mobile needs to be openable. No other links. Maybe I was thinking about the Contact link in the header when I wrote that. Sorry! @laflannery

[laflannery]

@cindymerrill and @aklausmeier If you have availability and want to start reviewing, you can use the list in the ticket description to see what is complete and ready for review. Anything checked can be reviewed on desktop and mobile. Here's the link to the "start" of the Prototype.

[cindymerrill]

@laflannery The prototype looks great so far!

I don't see the new USA logos yet at the top or bottom, nor do I see them listed in the Description checkboxes above. Is that tracked somewhere else?

[laflannery]

@cindymerrill You can review everything except the Sign in flow (as indicated by the checkboxes that was my best idea ever) and if I understand correctly that should be everything in the conversation guide except the last task. This can also be reviewed on both desktop and mobile.

A few notes:

• If you have an android, that would be spectacular, because I have an iPhone so that way we would have both covered. If not let me know and we can track someone else down to review/test on android
• Any link in the header/footer that is NOT part of a particular task should go to the dummy screen. If you are able to check some of those (doesn't have to be all) to confirm and check me that would definitely be appreciated
• The map on the Find a locations page is not interactive. Our license for mapbox doesn't allow for us to use an actual map in CodePen but because we aren't asking folks to use this I don't think this will be an issue. Let me know if you think that will cause problems.

The sign in flow is in progress but will take me another day or so to complete so I wanted to get you started on this. Let me know if you find issues or updates you need me to make. Thanks!

[andaleliz]

Lurking and getting caught up from being OOO - just wanted to say how much I love how you all are handling the "dummy page" that asks to wait for the facilitator. Brilliant!!

This is looking great and I'm feeling lucky our team will have such a solid start on our own prototype. Thank you!

[laflannery]

@cindymerrill Done! Get Excited!

Please review everything on all devices/browsers - Prototype. I'm going to spend some additional time testing and QA-ing. I have access to:

• iPhone
• iPad
• Mac (Safari, Chrome)
• Windows (Chrome, FF, Edge)
  Please send me and edits/updates as soon as possible and I will get those completed.

Notes regarding Sign in:

• A decision was made by Amanda and me that once "logged in" the user will be taken to the MyVa screen, to be more clear that they have logged in.
• During each session, the authenticated menu name and the name on the My VA page will be updated to the participant's name (by Amanda or myself prior to each session)
• The sign in process is different from what is in Figma - This was made by me and will be reviewed by Dave tomorrow (1/12). I will make changes if this is not approved The process is as follows:
  • The user can "log in" from any of the prototype screens
  • User selects sign in and gets the modal as usual
  • They can then select ANY of the login options
  • They will be shown a basic login form with Email address and password. Both fields are required, but they can enter any info they want (as long as email is formatted as an email address)
  • Once they hit submit they will be redirected to the MyVA page as a "logged in" user

[cindymerrill]

@laflannery WOW, great!! I'm also excited about you/Amanda updating the participant's name before each research session!

Amanda asked me to not review the prototype until it was done next week, but I can take a look earlier now that it's done :)...

Please let me know ASAP if the sign-in process changes, per Dave. From the My VA page, it appears that the Auth menu is visible (so my research task goal stays the same). Is it possible that the sign-in process of going directly to the My VA page could be like that for launch? Has anyone on the Auth team (Samara, Liz Lantz) heard about this and approved? I'm cautious about addressing the "can't tell that I'm logged in" problem by changing what we show users--unless this is a possible way forward for launch.

By the way, I have an Android phone, so I could also review the prototype on there.

[cindymerrill]

P.S. I LOVE your checkboxes for features implemented, too! I have been peeking at progress in the ticket. @laflannery

[laflannery]

Is it possible that the sign-in process of going directly to the My VA page could be like that for launch?

I don't think I understand this question? The MyVA page is currently on prod, I took it directly from VA.gov. This is the first page that folks see when they login, all I changed was that I removed any non-generic information (i.e. Possible pending claims listed, any dollar amounts that showed, etc.)

[andaleliz]

I think @cindymerrill is asking is if a page could redirect to My VA after a person signs in, when these header/footer updates are launched on production.

Currently, the only page that redirects to My VA after logging in is the homepage, and I don't see that changing (though I haven't discussed this explicitly with Samara). We don't redirect on other pages because there are many instances where a person signs in on a page because they want to do something there, like view a claim status or fill out a form. It would be frustrating for them to be redirected away from that page when that is the case.

For our prototype, I prefer to mirror the production behavior and was planning to keep people on the life insurance page after signing in so that it would more closely match production. I personally think that would be best but know that your team's focused isn't the auth experience and assumed your team had a reason for setting yours up in that way.

[cindymerrill]

@laflannery : @andaleliz 's interpretation of my question is correct. If there's no way that we would in Production redirect people signing in to My VA (unless you're logging in from the homepage), I would NOT do this in the prototype. Then we'll also be able to more directly share research findings between phases 1 and 2 research (i.e., how many people could/couldn't tell that they were signed in).
FYI @aklausmeier

[cindymerrill]

@laflannery I've reviewed the CodePen prototype on my computer (a MacBook) and also on my Android phone (Google Pixel 6a). Below are the problems I found...

MacBook

1. The chatbot and Ask VA pages that are on the Contact page that you get to from the header appear to be on VA.gov, not in CodePen. They should be the CodePen pages, just like the contact links in the new footer.
2. Auth menu options should all show the dummy page if clicked, not the current 404 error.
3. The Sign out button brings you to Staging.va.gov, which seems bad.
4. How is Search supposed to work? Is the search button a button that you click but nothing happens?
5. The footer links should ALWAYS act like links--they need to work so they show up for screen readers. None of them worked at one time while I was playing with the prototype--not sure which page I was on, and I haven't been able to reproduce it.
6. "US Dept of Veterans Affairs" should be text, not graphic--somewhere I saw this, but later I only saw text versions of it. Is there a graphic version left somewhere in the prototype?

Android

1. From the header menu "Contact us" link, the Ask VA and Chatbot links don't work.
2. When you're on the Find VA locations page or the My VA page, the header menu "Contact us" link doesn't work at all.
3. The Sign out button doesn't do anything. Is it coded as a button?

[cindymerrill]

@laflannery Is this the alt-text for the USA Government logo at the top of the prototype?
alt="USA Government Logo, Official Website"

If so, we might want to consider removing "Official Website" because it doesn't say that and we're trying to see if participants can figure that out themselves...unless we want to tell screen reader users that explicitly vs. see if sighted users figure it out themselves.

In contrast, the USA logo in the footer says "an official website of the US Dept of Veterans Affairs", which looks like a graphic (not text--is this correct, @aklausmeier ?). Its alt-text says "official website", which seems OK to me: alt-USA Logo, Official Government website

[laflannery]

@cindymerrill answers to the items you noted in your first comment:

MacBook

1. The chatbot and Ask VA pages that are on the Contact page that you get to from the header appear to be on VA.gov, not in CodePen. They should be the CodePen pages, just like the contact links in the new footer.
   • I was only told that links within the header and footer would need to direct to Codepen as these were part of the conversation guide. If links within body content need to change, please give me a full list of every link on each screen that needs to be updated.
2. Auth menu options should all show the dummy page if clicked, not the current 404 error.
   • Fixed, I had missed desktop
3. The Sign out button brings you to Staging.va.gov, which seems bad.
   • I forgot to update this but after looking at mobile (from your question below, I am questioning the update I just made. I am going to ask in my meeting today where this should go.
4. How is Search supposed to work? Is the search button a button that you click but nothing happens?
   • The dropdowns function but the user can't perform a search. This was the same in Phase 1 and I wasn't told that needed to change.
5. The footer links should ALWAYS act like links--they need to work so they show up for screen readers. None of them worked at one time while I was playing with the prototype--not sure which page I was on, and I haven't been able to reproduce it.
   • The footer is a single file, and will always look and behave the same for every page so if the links didn't work on one screen, they wouldn't have worked for the entire prototype.
6. "US Dept of Veterans Affairs" should be text, not graphic--somewhere I saw this, but later I only saw text versions of it. Is there a graphic version left somewhere in the prototype?
   • Same as above. Besides the My VA page, the header is a single file and will always look and behave the same for every page. If the logo is text (which is is), it is text across the entire prototype.

Android

1. From the header menu "Contact us" link, the Ask VA and Chatbot links don't work.
   • If this is the same as 1 above, and I suspect that it is, again I will need a full list of body content links that need to update.
2. When you're on the Find VA locations page or the My VA page, the header menu "Contact us" link doesn't work at all.
   • Please retest this. Again, this is the same header file so if it works for one screen, it has to work for other screens unless there is something odd going on with Android specifically.
3. The Sign out button doesn't do anything. Is it coded as a button?
   • I am going to ask about what to do with this in my meeting this afternoon.

[laflannery]

Met with Dave C to review the prototype and he gave his approval/sign off. I also got approval/clarification on the few outstanding questions:

• I did update the alt text for the USA logo, so you shouldn't see "Official website" there any more
• Sign out link goes to dummy page everywhere
• Sign in process is correct and approved (what I discussed with Amanda prior to her OOO as well as the simplified form I made)

@cindymerrill if you have more feedback let me know and I will update. If it's a significant amount we can address it in anther ticket.

@aklausmeier I would imagine you will review when you get back as well and and feedback you have I can address next week as well.

[cindymerrill]

@laflannery Thank you for making revisions! I reviewed the changes you made, and I have comments for you below...

Desktop

1. All links to the Chatbot and Ask VA pages need to stay in CodePen, no matter whether they're clicked on from the header or from the footer. All paths listed in the conversation guide need to work, which includes these. These are the only additional links that need to be coded, so it would be great if you could please make them go the same places within CodePen as the footer links.
2. The dummy page that you get to from the Auth menu options has a "Sign in" button, which doesn't make sense because you're already signed in. I think this should be a different version of the dummy page that has a generic name or "Sign out" button instead of "Sign in".

Android

1. From the header menu "Contact us" link, the Ask VA and Chatbot links need to work within CodePen, for the same reason given above under Desktop.
2. When you're on the My VA page, the "Contact us" link still doesn't do anything. (However, it now works when you're on the Find VA locations page, which it didn't before. Did you update anything that affected this?)
3. Now the "Sign in" button doesn't work when you're on the Find VA locations page. Later I tested it again, and it did work. Seems like the behavior is non-deterministic, which is problematic for running user research.
4. Now when I open the VA Benefits and Health Care menu, I can see the top-level menu items, but nothing happens when I try to click into any of them. Later I tested it again, and it did work. Seems like the behavior is non-deterministic, which is problematic for running user research.

Both

1. The Sign Out link in the Auth menu should go back to the unauth version of the page, not to a dummy page.
2. Is the "An official website of the US Dept of Veterans Affairs" supposed to be a graphic? If so, doesn't it need alt-text? Before you had "Official Government website" for the logo + seal + official text, but that appears different now.
3. I'm still concerned about opening the My VA page when you sign in, if that's not what's really going to happen (see my comment above). I want to discuss this with @aklausmeier .

A few other thoughts

1. I think it's great that Dave Conlon today approved the prototype, the flow, and all the other things you mentioned in your comment, but I don't agree with some of what's in the prototype (per my comments above), so I hope that you and I and Amanda can discuss things together next week and make additional tweaks. I would have liked to have participated in the review meeting you had with Dave.

2. @laflannery Please don't create a new ticket because this ticket contains all my feedback from reviewing this prototype. It's OK if the ticket extends into the next sprint as many UX tickets do--I think it's important to keep the history of design/prototype revisions in one place.

[jilladams]

I think we can handle this as we've done with other UX tickets, and have ACs per sprint. I'll update in ticket body. (FYI @FranECross )

As far as which changes suggested from Cindy are Must vs. Should / Consider, I think it's fair to let Amanda make that call if there's any question once Laura's had a chance to review these notes.

[cindymerrill]

I would like to discuss the prototype changes with @aklausmeier and @laflannery next week, which may result in additional tweaks to the conversation guide.

[aklausmeier]

@laflannery and I discussed in our 1:1 sync:

Confirmed in testing on staging that @andaleliz's understanding of what page the user is redirected to after sign in is accurate, CodePen will reflect this behavior.

Currently, the only page that redirects to My VA after logging in is the homepage

We will also have a Signed In version of the "TY, hold for instruction page" this will be used for Auth menu links so if they click on an unintended path, user will not lose access to the Auth menu.

[laflannery]

All the updates that Amanda and I discussed are completed. Let me know if anything else is needed

[cindymerrill]

Thank you for all the revisions, @laflannery ! Retesting all the paths in my convo guide works perfectly for Desktop, but I found one issue with Mobile:

• When you're signed in, if you tap on the magnifying glass, then "Find a VA location" brings you to VA.gov instead of staying within CodePen. In fact, ALL navigation links on the search panel bring you to VA.gov instead of keeping you within CodePen. (This doesn't happen on Desktop because there's no search panel.) Could these links go to the CodePen pages that they go to when you're not signed in? I know that this isn't a user task (navigate after you've logged in) but it may come up during sessions, and we really don't want people landing on VA.gov--especially if we can't see their screen (which might be the case for some screen reader participants if it can't be shared).

Re all the links last week that I reported were sometimes broken on Android and working other times: I didn't encounter this when testing today. Did you update something that might have fixed this, @laflannery ? If not, then it might happen again. What is your best advice for how to fix this if it happens during a session? Reload the prototype?

FYI @aklausmeier

[cindymerrill]

@laflannery @aklausmeier Seems like I do NOT have to reload the prototype before signing in (as I had to do for the Figma prototype). Is this your experience, too?

[jilladams]

Noting: authed mobile link updates are currently the main AC updates that'll happen in Sprint 102, for closing this.

[cindymerrill]

@jilladams I don't understand your comment. I thought that any tweaks that we need to run research sessions will be included on this ticket, including anything desktop or mobile that we learn from piloting next week.

[aklausmeier]

@laflannery I am noticing the same and it directly impacts the task related to Find a VA location.

When you're signed in, if you tap on the magnifying glass, then "Find a VA location" brings you to VA.gov instead of staying within CodePen. In fact, ALL navigation links on the search panel bring you to VA.gov instead of keeping you within CodePen.

[laflannery]

These links have been updated - there are no "Signed in" Find a locations or Find a Forms pages. @aklausmeier do there need to be?

[aklausmeier]

@laflannery did a quick review of the CodePen, links are working great, no need for signed in versions of Find a Form/Find a location

[laflannery]

Prototype is ready for research next week