UX Work- Recommendations for global navigation design

[UXBrendan]

User Story
AS an Orcasound user I WANT to navigate Orcahome SO THAT I can learn about marine bioacoustics, contribute to marine conservation, and listen to Orcasoud hydrophones.

Description
The intent of this story is to document the recommendations from the global navigation for Orcahome concept study.

Notes:

• Concept study report deck
• Concept study presentation

Recommendations

• Use Red concept- desktop

• Use Green concept- mobile

• Navigation items to include in this order:

  1. Logo- linked to Home, designed Orcahome page
  2. Home- designed Orcahome page
  3. About Us- designed Orcahome page
  4. Listen Live- linked directly to listening web app
  5. Learn- designed Orcahome page
  6. Get Involved- designed Orcahome page
  7. Blog- Wordpress blog platform page
  8. Support CTA- designed Orcahome page

• Logo

  • Navigation should indicate what page a user is on
  • Participants largely preferred the wave design
  • Past designs have used a ”wave” underline to indicate where users are in Orcasound- I recommend
  • Ue the black and white play button logo- Logo image files

• “Home” should also be a hyperlinked navigation item

• Listen Live

  • I do not recommend listing hydrophones as sub menu items
    • Increases our dev resource needs to keep updated as # of hydrophones scale in our network
  • I recommend all ”Listen” nav items written as “Listen Live”
  • Limited real estate on navigation bar
    • Make “Notify Me” nav item a sub menu item
    • Could be a CTA in the sub menu scheme designed for this concept

• No sub menu for “Learn”

• Get Involved

  • I recommend creating 3 distinct sub menu items to be anchor linked
    1. Volunteer
    2. For Developers
    3. Support

• Participants expected to see "Blog" in the header

• “Donate” CTA

  • Participants highly valued the “Donate” CTA
  • I recommend changing microcopy to “Support”
  • Location in header was not criticized

• Footer should not have all the same navigation items as the header

• The font of footer navigation items shouldn’t be bigger than the font of the header navigation items

• Participants expected the social media icons to be in the footer

• Based on marine theme, wavy line should be used

  • Match desktop wavy line to indicate location
  • Preference for line on the left, indented sub menu

• Header

  • As recommended for desktop, use play button icon
  • “Menu” hyperlinked text next to hamburger icon
  • Too much black space below “Donate”- remove
  • Confusion: “About Us” main nav item and “About” sub menu under Learn
  • Make sure all nav items have corresponding designed pages, not desired pages

• Header and Footer

  • Participants did not expect to have the same nav items mirrored in footer from the header
    • Nav items in footer must be written the same as desktop nav items- for example: "Listen Live" in both places instead of "Listen Live" in one and "Listen" in the other

• Please design desktop, tablet, and mobile header and footer navigation bars

• Please provide a testable prototype for desktop and mobile

Acceptance Criteria
GIVEN I browse Orcahome WHEN I want to take any possible action offered on Orcasound THEN I am able to navigate to information or action pages that help me meet my goals as an Orcasound user.