Try Try Again

In January 2021 we released our new navigation in honor of The Council’s 100 year anniversary. It was the first step in putting the user first and encouraging the user to browse. One year later and it was time to take what we learned and iterate!

Findings

Data showed an increase of 20% in navigation use over the past year. But various user interviews over the year alerted us to tweaks and other navigational features that would help to increase functionality.

Scrolling through the home page? Separation was non-existent. At times it would look like there was a mistake because the navigation would flow directly into the content.

To fix this we added a drop shadow. It immediately elevated the navigation from the content below. We also adjusted the speed at which the navigation would come back down when the user scrolled up. Before if the user moved up by even 5px the navigation would come down and likely cover up what they were looking at. No longer! The user has to consistently scroll up for at least 150px before the navigation appears.

Each menu item has a featured module on the left side of the dropdown. Users are very confused by this. Product recommendation is to remove this completely. However, it’s important to the organization that we promote the work of our fellows, writers, and experts. With this in mind our secondary recommendation is to move the featured module to the right.

Removing the featured module allows the user to get straight into the second tier of the navigation.

In order to address organizational needs we might need to keep the featured module. We’ll move it to the right which allows the users to still quickly read the menu. This also puts the menu in the primary position as our primary user reads from left to right.

There was also confusion about the difference between the navigational elements and what was trending. Without the option to use “trending” as a label I needed to figure out how to differentiate it from true menu items.

The issue is most apparent on mobile. Tags have been updated to utilize what was defined for the design system based on the Backgrounder work.

Our most glaring overlook was how the new navigation would interact with other navigation tiers. When we updated the main navigation it was decided that the sticky nav should be deleted. And the member nav was left as something separate.

No surprise - we brought back the sticky navigation. As a site with primarily editorial content our users want to know what they’re reading and where they are within the article. As long as they have an easy way to get back to the main navigation that is sufficient.

Members are getting a full overhaul of their navigation. Our main nav is tall. If we add a member nav on top of that - well, the content may not be in the viewport depending on the screen size.

The before. Members have their own nav stacked on top of the main nav.

The after. As a product team we decided it was time to integrate it into the main navigation. Here you can see that the member can now add a photo and it will be clear when the user has a notification. This will prompt them to click on their image which reveal an updated member navigation.

The updated member navigation is only new to members who solely use desktop or tablet. Clicking on their avatar will open the member navigation allowing them to quickly get to where they need to go.

The member only navigation overlays the page the user is currently on allowing them to easily navigate all of their benefits. clicking on the close button or outside of the overlay will immediately close the member nav.

This didn’t actually change for our mobile user. We adapted mobile for tablet and desktop use. Note that tablet and mobile have the close button on the bottom right. As users are holding these devices it is easier to click from the bottom than to adjust their grip and close from the top.

Takeaways

Iterate. Just because it wasn’t perfect in the first version doesn’t mean you’re beholden to that design. As time goes by you’ll get more information from the user and the business. And sometimes information you did have was correct. But it changed. So long as we keep listening and analyzing we’ll keep iterating and making something as important as the navigation better every year.

Team

Senior UX | UI Designer: Victoria Brooks
Deputy Director, Product: Maria Teresa Alzuru