[Federal Header/Footer] Figma prototypes for desktop & mobile

[FranECross]

Description

Prepare a Figma prototype for the Federal header and footer.

AS A Researcher I WANT two prototypes (desktop & mobile) SO THAT I can do usability testing

Design

• Header/Footer Figma file
• Desktop prototype
• Mobile prototype

Acceptance criteria - Sprint 98 (8 points)

• [x] Feedback from Amanda and Cindy M to inform what's needed in the prototype.
• [x] Screens are implemented in desktop and mobile device prototypes
• [x] Amanda & Cindy reviews
• [x] a11y review by Laura

Acceptance criteria - Sprint 99 (3 points)

• [x] Implement feedback before pilot testing
• [ ] ~Implement feedback after pilot testing~

[aklausmeier]

@FranECross added "UX" label

[jilladams]

@aklausmeier do you have a sense of when you may be ready for us to pull this Header/footer Figma prototype work into sprint? Jordan's out today so we couldn't refine it, but if you'll need it before 11/21 / Thanksgiving, we should pull it in during planning today. (CC @FranECross @thejordanwood)

[jilladams]

Moving to stretch just in case, til we hear otherwise. Goal to talk to Amanda about it later today / tomorrow to clarify / confirm.

[aklausmeier]

@jilladams This will need to wait until footer and content is reviewed by Danielle and Mikki and pending any design changes. We do know that some footer links need to be moved from the Federal section to the VA section. Will let you know once we have design confirmed.

[aklausmeier]

@thejordanwood

Prototype review:

Desktop and Mobile: We will need a bit more to the sign in auth flow. One of the tasks is to discover if the auth menu is findable on mobile and desktop. So after users clicks "Sign in", hot spots to allow login on the modal, then screen updates to show user is logged in with auth "My Profile" menu accordion present. Links w/in auth menu accordion do not need to be clickable

Desktop and Mobile: Some of the seal logos are not clickable [discovered on open search desktop page]. They should all link back to the starting page of the prototype.

Desktop: Screenshot used on Find a VA form content is much larger than real content on VA.gov. Reduce screenshot size so it's comparable.

Desktop: Missing link for FOIA in Federal footer.

[cindymerrill]

@thejordanwood It's so much fun to play with the new header and footer!! Here's my feedback on the prototypes that @aklausmeier hasn't already mentioned:

Mobile prototype:

1. The Disability Eligibility page (a screenshot of it) should open when you navigate header > menu > megamenu > Disability. Sometimes it does, and sometimes it doesn't. Should be a hotspot on every page.
2. Header > search > Find a VA form should open a screenshot of Find a Form. This seems to work sometimes but not other times, depending on which page you're on.
3. Header > megamenu > Careers and employment > Find VA careers and support should open the Careers at VA page (like the footer link). Sometimes it does, and sometimes it doesn't. 4.Header > Menu > Contact Us > Ask our chatbot a question should open the Chatbot page
4. Header > Menu > Contact Us > Contact us online through Ask VA should open the Ask VA page
5. Header > megamenu > Service member benefits should do nothing or open the right page, NOT open FOIA page. I just tried it again, and how it's opening the Find a VA form page. Seems nondeterministic. Should always do nothing or open the same page.
6. Header > megamenu > Family member benefits should do nothing or open the right page, NOT open Contact Us page. I just tried it again, and how it's opening the Find a VA form page. Another time is opening the FOIA page. Seems nondeterministic. Should always do nothing or open the same page.
7. Footer > More resources > VA forms should open Find a VA Form page. Works sometimes and not other times.

Desktop prototype:

1. Header > megamenu > Careers and employment > Find VA careers and support should open the Careers at VA page (like the footer link)
2. Header > Contact > Ask our chatbot a question should open the Chatbot page
3. Header > Contact > Contact us online through Ask VA should open the Ask VA page

[laflannery]

No feedback that wasn't already mentioned

[thejordanwood]

@aklausmeier @cindymerrill I’ve set up a meeting to talk through expanding the authenticated experience and some of the issues I was unable to replicate. 



I was able to fix these issues:

Desktop


1. Screenshot used on Find a Form page has been resized.
2. Link for FOIA in footer has been added.

Mobile

1. In the header, selecting Service member benefits or Family member benefits now does nothing.

My guess is that the other issues may be on Figma’s end. This prototype is very complicated, which could be causing the system to not register links/interactions sometimes–especially when we’re trying out every link possible while testing. I’ve tried to simplify the prototype more to cut down on this issue. 



If you run into issues when testing, try refreshing your page to see if the links start working again. This could help me determine if the issue is on my end or Figma’s end. 


[cindymerrill]

@aklausmeier Is it only the VA seal that should be clickable, and not the "U.S. Department of Veterans Affairs" words next to it?

[cindymerrill]

@thejordanwood When I tested this morning, a refresh fixed the only page display problem I had. I'll let you know if that doesn't work with anything else I encounter...

All the rest of my requested revisions work today, except for the ones on the Contact Us page. I think that the chatbox and Ask VA links should both lead to screenshots. Do you agree, @aklausmeier ?

[aklausmeier]

@aklausmeier Is it only the VA seal that should be clickable, and not the "U.S. Department of Veterans Affairs" words next to it?

correct @cindymerrill

[thejordanwood]

@aklausmeier @cindymerrill Thanks for retesting!

1. I've fixed the Contact Us page links. The chatbox and Ask VA links both lead to screenshots now.
2. The VA seal is now the only thing clickable in the logo area.

[cindymerrill]

Super, that looks great, @thejordanwood ! Is the only pending revision the sign-in auth flow?

[cindymerrill]

@thejordanwood I'm going through the prototypes with my conversation guide again, and I noticed a weird problem...

If you have Find a VA form open in the desktop prototype, and then you try to open the megamenu, it doesn't display correctly (see below). And reloading the page doesn't help.

The same issue happened when the VA chatbot page was open, and I tried to open the User auth menu, which was hidden underneath (as shown below):

[cindymerrill]

Now I have an even stranger issue with the mobile prototype...Go to Magnifying glass > Find a VA Location, then hit the browser back arrow. Instead of being taken back to the first page in the prototype, I see the chatbot page, or google.com. Did you leave the prototype in a strange state when you left for the day, @thejordanwood ?

[thejordanwood]

End of sprint update:

I have a couple more updates to make for this and am hoping to finish up tomorrow. I'll let Cindy and Amanda know when this is ready to test again.

The updates I need to make:

1. Authenticated menu: I started working on the desktop auth experience yesterday, but still need to test it more. I need to build out the mobile auth experience today.
2. Desktop header secondary links: Currently, the secondary menus are screenshots and the links don’t underline when users hover over them. The plan is to get the links in health care, disability, and careers and employment to underline when hovered over.

[thejordanwood]

@aklausmeier @cindymerrill I've built out the authenticated menu for desktop and mobile, and have added hover states to some of the secondary navs on desktop. This is ready to test again!

[cindymerrill]

Looks good, @thejordanwood ! Here are a couple issues I found:

1. Wasn't the auth menu in Desktop going to say "Chris" instead of "User"?
2. When I sign in on Mobile, get through login.gov, then I don't see the Auth menu. Instead, the "Sign in" button is still there. I just tried a second time, and this time I see "Sign out".

[thejordanwood]

@cindymerrill

1. Thanks for that reminder! It now says Chris.
2. Mobile has a different experience. "Sign in" changes to "Sign out" and a "My Profile" accordion is added to the menu section.

[cindymerrill]

@thejordanwood Thanks for fixing 1. Re 2, I pointed out a bug. I know that the navigation path is different for Mobile, but when I do Sign in and go through the login.gov screen, then I still see the Sign in button sometimes:

[cindymerrill]

@thejordanwood @aklausmeier To reproduce the problem in Mobile, here are the steps:

1. Click magnifying glass
2. Click Find a VA Location
3. Click Sign in
4. Click login.gov, username, password, Sign in
5. Now still see Sign in at the top instead of Sign out. And Profile isn't in the Menu.

[thejordanwood]

@cindymerrill Thanks! I misunderstood the first time and appreciate the explanation.

I commented this in our Slack thread as well, but wanted to also include it here: I believe I've fixed this issue.

[cindymerrill]

@thejordanwood I'm still having this issue that I documented previously:

Go to Magnifying glass > Find a VA Location, then hit the browser back arrow. Instead of being taken back to the first page in the prototype, I see the chatbot page, or google.com.

When I did this just now in a new browser tab, I saw google.com. Is the browser back button just not going to work in these prototypes?

[cindymerrill]

@thejordanwood When you generate the prototype URLs with hotspots hidden for me to use during usability testing, could you please change the visible title in the title bar to be something that doesn't say "USA", "header", "footer", or "VA"? The words "mobile" or "desktop" are fine. I don't want to give away to research participants what we're testing in the prototype because I want to see what they notice about the pages.

[thejordanwood]

@cindymerrill @aklausmeier Here are the new prototype links that have hotspots hidden. I updated the links in the ticket as well to avoid any confusion.

• Desktop prototype

• Mobile prototype

  I also changed the visible title to something more generic. @aklausmeier This means I had to rename the file for now, but we can change it back to something more specific after usability testing.

[cindymerrill]

@thejordanwood I just tested both prototype links without hotspots, and they work great--thanks! The problem using the browser back button on my phone is intermittent--sometimes it works, and other times it exits the prototype. I assume I'll just deal with that and ask the participant to reopen the prototype if it closes.

Also, just to confirm, it appears that all the tasks can be done from ANY screen in the prototype, so I don't need to ask participants to start again from the first screen.

[thejordanwood]

@cindymerrill Correct, all tasks can be done from any screen of the prototype.

[aklausmeier]

@thejordanwood I think we can close this ticket. After the last pilot we made some adjustments to convo guide and we agreed we would leave the page content as-is. No additional changes are needed post-pilot.