Create mobile version of new top nav

[IsaacDesigns]

Dependency

• Moderated Usability Test for the top navigation design (mobile) #2686

Overview

We need to create a mobile version of the new top nav bar so that it can be implemented and launched alongside the desktop version.

Action Items

• Familiarize yourself with the desktop version of the site’s new top nav bar
• Create a section to the right of the desktop version for the mobile design
• Review the Mobile Navigation Audit in Figma to familiarize yourself with the way mobile nav is designed across the rest of the site
• Create a design that translates the desktop version of this new menu design for mobile.
• Ensure your design is usable and intuitive for mobile, keeps consistent with Design System guidance and other usage across the site, and provides a good experience for users.
• Once accepted and closed, let development know to make an issue for updating the sitemap, and that they need to put it in the homepage feature branch until homepage launches.

Resources/Instructions

Figma - New Top Nav
Figma - Mobile Navigation Audit

[github-actions]

Hi @IsaacDesigns.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to read and interpret labels

[AnyaStewart]

The issue is awaiting review.

[IsaacDesigns]

Looks good to me. I will send I over for Bonnie to take a look at it and let us know if the issue was completed correctly.

[ExperimentsInHonesty]

@AnyaStewart Please add screen shots into the issue

[AnyaStewart]

[ExperimentsInHonesty]

@AnyaStewart Gave notes to Isaac during meeting. Happy to talk about it directly, if you come to team meeting

• white semi transparent background on menu does not work, with words showing through
• The red underline seems to be new to the site, we don't do black text with red underline any place else.
• I would like to see the other options

[AnyaStewart]

@ExperimentsInHonesty Thank you for your feedback! Sunday meetings are getting hard to attend for me, but I will try to this week. My comments are in bold.

• white semi transparent background on menu does not work, with words showing through. I agree, it was my concern as well
• The red underline seems to be new to the site, we don't do black text with red underline any place else. It is used in the desktop version of the top nav, so I thought we might carry it over to the mobile as well? It's used a bit differently in the desktop version, so I understand if it doesn't work.
• I would like to see the other options I showed other options to the team during our meeting and we had a vote. Attaching the screengrab with options. We decided on the Dropdown B and then I added the red color styling to it, because a chevron like that already exists in the design system. Let me know if you still want me to explore other options

Thanks,
Anya

[AnyaStewart]

Update

After the Sunday meeting with here are the next steps agreed:

1. Explore ways to incorporate the menu link turning red in a clicked state in accordance with the design system
2. Explore the ways to show the menu links in the top nav vs links across the whole site (it's ok if it differs)
3. Do research on the top navigation menu links: Our Work and Get in Touch have separate pages for them and the other menus links don't. How do we design it from the user perspective? (Question example: what do you expect when you see this?) @sacamp I will join the research meeting tomorrow to talk over this.

@IsaacDesigns @ExperimentsInHonesty feel free to add anything else you think is important for this issue

Thanks!
Anya

[AnyaStewart]

Progress: The issue requires research, new issue has been created for that #2686
Blockers: Research needed

any pictures of the visual changes made to the site so far."