Moderated Usability Test for the top navigation design (mobile)

[AnyaStewart]

Overview

We need to perform usability testing to assess the functionality of the top nav menu (mobile) . We want to ensure that mobile users will be able to access website content using the accordion style navigation design.

Action Items

These are not an exhaustive list of tasks. There may be some important steps that have not been considered when writing this issue. Be sure to add task items and any other steps you've made and record them in this issue or a linked research doc.

• Determine how many hours this issue will take to be completed and replace the Size label with a Point label.
• Request a functioning prototype to test the top nav mobile design and add to resources below
• Create a detailed research plan of the research methods, goals, script/ questions, participant types, etc. (research plan template and guidance from How to Write a Research Plan)
• Present research plan for issue #2686 to design team for feedback.
• Finalize research plan and script for usability testing.
• Recruit participants.
• Conduct research. Be sure to appropriately record and document data for future use.
• Create a detailed research report.
• Present results to the team and add the doc to this issue.
• Send recommendations to design team to update the Design System with the new mobile menu designs.
• Present the updated Design System of the mobile menu to the team.
• Release dependency on Create mobile version of new top nav  #2513

Resources/Instructions

• Research Plan Document - WIP

Associated issue for the design work

• issue Create mobile version of new top nav  #2513

Resources for making a Research Plan

• Create a Guide/Template: Research Plan UI-UX#120 (use this to give feedback on template or guide)
  • Guide: HOW TO - WRITE A RESEARCH PLAN
  • Research Plan Template preview | copy
• Example research plan
• Informative article on accordion nav design
• Example TDM Calc Usability Research

HfLA Figma Prototype for Navigation Elements

Figma - New Top Nav

Figma - Mobile Navigation Audit

[sacamp]

Hi @AnyaStewart, this is a good start to the issue. One thing it needs are action items. What are the next steps required to make progress on this issue? Will we need a research plan? Are there any resources we can refer to for this research? @summerharveyux feel free to add your insight as well.

[AnyaStewart]

@IsaacDesigns would you pls elaborate on what you mean by taking the sitemap into account?

[IsaacDesigns]

@AnyaStewart Since there will be new pages launching soon the menu items will change. See Figma site map @ilashi is currently updating in this issue.

I've added copies to Figma's Top Nav page of the new homepage and sitemap for you to use. We can talk more about it in tonights design meeting.

This Top Nav redesign is also an information architecture issue so we will need to consider creating user flows and conducting card sorting sessions along with the research that is being planned and conducted.

For your issue #2513 we can just focus on preparing the mobile menu for the upcoming website relaunch.

[AnyaStewart]

@IsaacDesigns unfortunately, I got held up and couldn't make it to the meeting yesterday.

I see what you mean, but haven't the information architecture already been considered when designing the desktop version? Or at least it should have been considered at that stage?
Same goes for future pages - haven't this already been considered when creating the desktop version?

I thought that for the #2513 issue I need to focus on creating a mobile version of whatever the desktop version already has.

[IsaacDesigns]

@AnyaStewart I'm not sure about the process of how they designed the navigation but I will ask @bonnie about it on Sundays meeting. What confused me was that Bonnie had said that there is no "Get in Touch" page but they have made this issue to build this new desktop navigation.

[ExperimentsInHonesty]

@olivioso Please

• self assign this issue
• move it to the in progress
• make a screen recording of what we are experiencing
• sent Phuong the message below
• Review usability research plan example
• Revise the Research plan for this issue
• Review with Simone

@phuonguvan We need to have design work on a clickable prototype.  The one that is on the Figma page is not useable because when we go to it, it keeps showing the Figma menu bar on hover when  trying to hit the hamburger menu

[olivioso]

@phuonguvan We need to have design work on a clickable prototype. The one that is on the Figma page is not useable because when we go to it, it keeps showing the Figma menu bar on hover when trying to hit the hamburger menu (I'm having trouble adding the gif to this message. Hopefully the link below will work.)
https://drive.google.com/file/d/1kNGttL9EF71BIatwWhBPsef7psQrCdAp/view?usp=sharing

[olivioso]

Update Issue #2686
Progress: Received feedback on partial draft of research plan. Got access to informed consent form. Met with developer to discuss prototype issue.
Blockers: Awaiting functioning prototype to write script for testing. Developer creating issue and will send prototype once ready.

[olivioso]

Update Issue #2686
Progress: Reshared request for updated prototype.
Blockers: Awaiting functioning prototype to write script for testing. Developer creating issue and will send prototype once ready. (unfortunately, it was a few days before I saw a private slack email requesting that I resend info regarding the Figma prototype).
Availability: 6 hours in coming week
ETA: Hoping to review research plan at W meeting and then recruit participants for study. Should be able to complete stud and report findings within 2 weeks of receiving prototype.

[olivioso]

Update Issue #2686
Progress: No progress.
Blockers: Awaiting functioning prototype.
Availability: I will be unable to complete tasks associated with this issue. I must step away from volunteering due to an unexpected move.

[ExperimentsInHonesty]

We need to look at https://www.usdigitalresponse.org/ because they have solved the menu with multiple items vs the ones with just one page, by using a V icon