Site Navigation Changes

[kaleygel]

Project Overview

This sprint is designed to explore quick wins for the website to better position the content for growth and with a focus on user experience

To encourage easier wayfinding as well as position the site to support a growing product portfolio, we need to update the primary navigation, drop downs and footer.

Navigation Structure

Nav & footer structure can be found here: https://docs.google.com/document/d/1UIJV-ffpYLR_JaXu6cTEi8uAYvDMazRNxQDH2ALByzg/edit?tab=t.stt70gahfwa

Considerations

For development purposes, the new navigation should be designed so that a new tab section (usecases) can be added after launch, in the event we aren't ready to launch with them.

Resources

Example main nav prototype with dropdowns

Milestone design delivery date

Friday March 6

[olliemiller]

@kaleygel (CC @jacobsmith928) I wonder if this task could be picked up by @felixwidjaja / @ronggur? We have fairly established nav styles and components - so feels like a good candidate to go staright to development. What do you think?

[jacobsmith928]

@olliemiller i think so, i would just like to see some potential work on the dropdown for both Product and Developers. There is a lot in there!

[olliemiller]

@felixwidjaja has worked up a first version of the nav. I think it's looking great.
Nav v2

@felixwidjaja Could you suggest some icons for each of the sections please? You can find them in the figma file here 🙂

[olliemiller]

@felixwidjaja Can you also have a think about how best to layout the mobile menu? Looks like the one in Figma is a little out of date with what's on the live site (pic below). The challenge with the mobile nav is how we match the hierarchy we're using on desktop. 🤔

[olliemiller]

@kaleygel @jacobsmith928 I've designed a new version of the nav and menu style. For now, I've only covered xl (dekstop). sm (mobile) menu designs to follow soon.

Nav - Product - one line
dark
light

Nav - Product - two lines
dark
light

Nav - Resources - one line
dark
light

Nav -Resources - two lines
dark
light

[jacobsmith928]

@olliemiller thanks for this. I like the "two lines" for the product dropdown and "one line" for the resources, but i could be convinced to keep it consistent and drop the subtext for Product.

I think it is worth exploring a more compact approach that doesn't use icons everywhere and reduces spacing. What do you think?

[kaleygel]

Documenting the discussion from Ollie and my chat just now:

1. Moving forward exploring removing the icons and tightening up the nav
2. Our product drop down is "light" so he's going to explore a card-based approach (attachment below) to give more prominence
3. Explore how we can find continuity then between the heavier Resources section (no icons, tightened copy, + hover state) & the larger card-based exploration so they still family together (the inference reference is helpful, but it very much feels disconnected - something we want to avoid).

[olliemiller]

@kaleygel @jacobsmith928 Updates ready for your eyes! 👀

Product nav - card style
on dark
on light

Resources nav - textured style
on dark
on light

[kaleygel]

LOVE LOVE LOVE.

Let's ship it 🚀