Design high fidelity mock-ups for secondary nav - Githubissues

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:

https://depo-platform-documentation.scrollhelp.site/index.html

281 stars 201 forks source link

Design high fidelity mock-ups for secondary nav #67086

Open sterkenburgsara opened 12 months ago

sterkenburgsara commented 12 months ago

User story

As a UX designer, I want to create a high-fidelity mock-up for proposed secondary navigation so we have a clear example to follow for developing prototypes for user research.

Description

Following the feedback gathered in ticket #66770 and based on work done in ticket #65677 (low fidelity design ideation), the design team should high-fidelity designs for the 3 designs (on mobile) to inform prototype development. These three designs all vary significantly and will help us better understand what is working or not working for users, and should point us to the best strategies for findability across the health portal experience.

Sketch file with mock-ups shown below.

Tasks

[ ] Develop high-fidelity prototypes in sketch based on the lo-fi designs agreed upon in ticket #65677
- @fmccaf1 - will mock-up designs A & B (flat navigation & nav with sections for all of the my health portal and with expand/collapse functionality)
- @Jenny-yw - will mock-up design C (navigation limited to "in this section" content)

Acceptance Criteria

[ ] we have high-fidelity designs ready to inform prototype development

fmccaf1 commented 11 months ago

First hi-fi menu mock. Small visual changes are possible/likely but functionality is expected to remain the same.

Private Zenhub Image

fmccaf1 commented 11 months ago

Here's the next mock-up. This one is different in two important ways: hamburger menu instead of a dropdown menu and the nav is completely flat (all options are visible at all times)

Private Zenhub Image

fmccaf1 commented 11 months ago

Some visual updates:

Private Zenhub Image

Private Zenhub Image

sterkenburgsara commented 11 months ago

@fmccaf1 re: the dropdown menu button - I think the design system team would flag the double arrow icon since it is not used on VA.gov - do you think this is better than a single dropdown arrow? Do you have any concerns on the white menu dropdown button competing (visually) with the primary site mega menu?

I think we should take this to design intent and hear ideas before we fully engineer prototypes. Do you have thoughts on that?

fmccaf1 commented 11 months ago

@sterkenburgsara I actually used that double arrow because it was the dropdown I saw amongst the VA's library of symbols in Sketch. I'll see if there's another one I can grab that has just the one arrow.

I do have concerns with the white menu competing with the primary site mega menu, both with the dropdown and the hamburger menu. We could try to add text like "menu" to make it more prevalent... I'll be trying to come up with other ideas.

fmccaf1 commented 11 months ago

Putting this back in the backlog.