When approaching the redesign of thestar.com’s navigation, on top of wanting to change it to display content in a way that aligns to the Star Newsroom content pyramid, we wanted the new design to reflect our strategic direction. We also needed to confirm the changes made sense to our readers and that they would be able to find the content they were after. As a secondary objective, we wanted to create a more contemporary navigational experience that is more consistent with other industry-leading sites.
We knew we wanted a full horizontal navigation system for the desktop experience and that we wanted the hamburger gone. We also knew that since most of our traffic comes from mobile, we needed to optimize the mobile nav to better serve our readers.
The menu above provided only a glimpse of all the content we have to offer. The rest of the categories could be discovered only by clicking See More and then clicking All Sections or as a last resort, by accessing the Site Map in the footer (we will come back to the significance of site map clicks later).
Additionally, there was a lot of unvalidated and legacy content that had to be weeded out. And the way the See More > All Sections functioned was an unexpected user experience.
Here we have a user test where the tester calls the whole experience clunky. Not exactly what you want to hear when you are in the process of asking users to start to pay to access content (which was where we were at when we were doing this testing)
At the same time as we were validating current state with customers, we created wireframes to validate future state with internal stakeholders
Included here we have top level nav items that are based both on what is at the top of our content pyramid and statistics of user interaction on the Star’s most popular content. There is no Hamburger on the desktop view and we made sure that the Primary and Secondary navigation elements made sense to our users and aligned to our business objectives.
And now have this beauty:
Again, we have our user-verified top level nav items based on both top of pyramid content and usage statistics, no Hamburger on desktop
We have user-verified Mobile nav uses common expand/collapse pattern
It looks great, but what is even more exciting is how the new design has improved site performance.
The stats are showing increased activity in areas where we want to see increases, and significant decreases where we want to see decreases. The changes are working.
On mobile, sitemap usage has been reduced by a whopping 61% . Why this is particularly exciting is when we see that the reliance on the site map is diminished, it tells us that people are actually finding what they are looking for.
We are continuing to monitor site navigation usage and will optimize the experience as we see ways to improve the experience.
