The Council on Foreign Relations

Try Try Again

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

Before. Members have their own navigation stacked on top of the main navigation.

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 alerted us to tweaks and other navigational features that would help to increase functionality.

Scrolling

Scrolling through the home page? Separation between the nav and page 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 as the user scrolled up. Before, if the user moved up by even 5px the navigation would appear and cover their view port. No longer! The user has to consistently scroll up for at least 150px before the navigation appears.

Orginal

Updated

Menu items

Each menu item has a featured module on the left side of the drop down. 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.

To address organizational needs we might need to keep the featured module. We’ll move it to the right which allows the menu to be in the primary position for users to quickly read.

There was also confusion about the difference between the navigational elements and what was tranding. 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.

Updated

Navigation tiers

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.

Re-implemented stick nav. 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 view port depending on the screen size.

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 reveals 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.

At all breakpoints 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 navigation.

Nothing changed for our mobile user. We adapted mobile for tablet and desktop use. I will point out 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.

Original

Team

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