When approaching redesign of thestar.com’s navigation in 2018, 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 on first tap 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 (second tap) and then clicking All Sections (third tap) 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. Plus the way the See More > All Sections functioned was an awkward and unexpected user experience.

We conducted usability tests that confirmed what we were worried about. One of the testers called the whole experience “clunky”. This became the first part of the experience to fix. When you are in the process of asking your audience to start to pay to access what they had been reading for free for 15+ years (which was where we were at when we were doing this testing) getting the information architecture simplified was a clear first step.

While we were validating current state with customers, we also 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.

Continuing to iterate

We continue to monitor usage and optimize the experience as well as incorporate new strategic initiatives. With the addition of My Local content and with the newsroom’s growing podcast and newsletter repertoire we needed to layer in access to that content.