Tinker, tailor...

Posted in: Design, Development, User research

We've been working to a new set of principles in the Digital team since November.

As a result, we've increased our levels of user testing, based our decisions on data rather than assumption, and released web pages and sites more often.

There is still one area we haven't really tackled though - iteration.

As a small (but growing)  in-demand team, going back and fixing things can get overlooked in place of moving on to the next project. But a website is a living thing - and much like a garden, it can look unloved if it isn't tended to regularly.

With this in mind, we've iterated the navigation in the Research site.

Making the Research menu easier to find

Anecdotally, we'd heard that people weren't using the Research site's navigation, as they weren't aware it was there. When we checked this against analytics and heat maps we found that these anecdotes were borne out:

  • Google's in-page analytics showed that less than 5% of visitors were accessing the navigation when on the research homepage
  • A similar number clicked on the Research link in the top menu, presumably expecting this to provide them with further options

Research---inpage-analytics-2014-01-22-10-34-21

A similar picture was borne out with our heat maps.

Menu layout was also an issue

Event tracking within Google Analytics also highlighted that some menu items weren't receiving the amount of traffic we expected. So we also considered ways to create a clearer and more coherent menu structure.

The conclusion?

Iteration was needed to make the research site's navigation clearer and more obvious.

We'd used a three horizontal stripe (aka 'hamburger') icon to signal the existence of the Research navigation. While common in apps and sites designed for mobile devices, the icon didn't seem to represent a clear call to action in a desktop context. By changing the icon, we hope to have created a clearer call to action for users looking for more content within the Research site.

The icons

The old icon - works well on mobile, but less obvious in desktop view
The old icon - works well on mobile, but less obvious in desktop view
The new icon stands out more, and makes it clearer there is a potential interaction.
The new icon stands out more, and makes it clearer there is a potential interaction.

The menu layout

As well as working to make the existence of the menu more obvious, we wanted to improve the layout - introducing clearer groupings and headings for related items, and highlighting the hierarchy between menu items and submenus.

The original menu layout only featured one column heading, which made the other columns appear less focused in comparison.
The original menu layout only featured one column heading, which made the other columns appear less focused in comparison.
The new menu layout breaks related content into clearer groupings. And does a better job of visually highlighting menu item hierarchy.

Measuring the impact

We hope we've made the menu - and the links within it - easier to find.

But to make sure, as part of the project, we've added specific tracking and analytics to see if there is an improvement in use of the menu with the changes we've made.

We'll be reviewing the results in three weeks time. And planning our next steps.

Posted in: Design, Development, User research