The new Which? global navigation – or global nav – is now live on which.co.uk and available across all Which? digital sites. This is the 3rd iteration of the global nav and, as with the preceding releases, it is primarily aimed at making it easier for users to navigate around our web pages, whilst showcasing the breadth and depth of Which? services and content. The current version also aims to further raise the prominence of Which?’s Product Reviews (which is the primary user goal for most Which? visitors) as well as providing direct links to our comprehensive advice content and relevant services, in context.
THE EVOLUTION OF THE GLOBAL NAV
Prior to the release of a consistent global navigation asset, every Which? website was required to build navigation modules directly into their site, which meant updates were very difficult to manage and thus sites became inconsistent very quickly! As part of the initial global navigation project we built a central nav server, so all websites could dynamically consume the content and styles for the nav, thus making it easier to cascade updates.
The 1st release went live in mid-2013 and the 2nd iteration followed it around eighteen months later in early 2015. The second release incorporated some minor adjustments to positioning, execution and signposting, which managed to significantly improve way-finding for users, particularly to our all important Product Reviews content. (See Fig 2). Both members and non-members primarily look for Product Reviews when they visit Which? and thus the global nav is a crucial tool to help them find what they’re looking for (NB most users however will use Search as a first preference!)
The 2nd iteration was also coupled with a release of a local navigation feature on our Product Reviews pages. At that time it was necessary for the two to work in tandem, as we had only migrated under a third of our approx 8000 product reviews (and thus the content that had not been migrated featured an older and non-mobile optimised navigation system – the eponymous ‘megamenu’!) [See Fig 3]
Even though we managed to improve navigation and wayfinding from the 1st to the 2nd iteration of the global nav, members still rated us relatively poorly overall for navigation, with nearly a third having difficulty knowing where to begin when looking for Product Reviews – particularly from the homepage.
We had always planned to have a comprehensive ‘full’ global navigation system once the majority of content on which.co.uk had been migrated across to the new responsive templates (eg omni-screen optimised designs). As with most things, this actually took a bit longer than planned, but nevertheless the scoping and problem-solving for the 3rd iteration of the global nav started taking place almost immediately after the release of the 2nd version ( in early 2015).
KEY PERFORMANCE INDICATORS FOR NEW GLOBAL NAV
Our primary aspiration was to provide direct links to ALL our Product Reviews category listings (rather than in the first two releases which only linked to the sub-vertical groupings of categories such as ‘TV & home entertainment’ ‘Computing’ or ‘Home appliances’). We also knew that we’d need to scale to accommodate our growing suite of Which? products and services – and thus traffic to less well known services and high converting content needed to be improved. This in turn would deliver the highly desirable benefit of increased organic ranking in search engines.
Based on the business aspirations and user observations we had made over the previous 2 versions we set ourselves some target benchmarks for the 3rd release, namely:
- Increased visibility & better organic ranking in search engines
- Increased traffic to high converting pages
- Increased customer satisfaction score for overall navigation
- Decreased time on task for key navigation journeys
- Increased task completion rate for the key navigation journeys
RE-DESIGNING THE INFORMATION ARCHITECTURE
Obviously when presenting the vast array of content and services that Which? serves through its digital estates, getting the information architecture (IA) right is of critical importance. To thoroughly test with our end users we did a combination of closed card sorts and open card sorts as well as Tree-tests to validate the labelling and groupings of the main sections. These tests were conducted remotely using the Optimal Workshop set of online tools.
Initially we ran closed card sorts and tree-tests with a total of 500 Which? members & 250 non-members, and tried a variety of options for groupings (such as ‘Life Planning’ as a catch all for services such as Which? Birth Choice, Which? Elderly Care and even Which? Wills and Which? Uni) and labelling (such as the difference between ‘Money’ and ‘Money Management’ for our financial based advice content).
Following these tests we did further open and closed card sorts with 350 Which? members focusing on refining the ‘Home & garden’ and ‘Technology’ product vertical. These had the most significant numbers of product categories and sub-vertical groupings and therefore represented the highest traffic areas – and complexity of content – within which.co.uk.
Once we had completed these tests over the latter half of 2015 (and early 2016) we had a number of recommendations which were summarised as the following:
- Raise the Product Reviews ‘verticals’ to the top level (i.e. ‘Technology’ ‘Home & garden’ ‘Money’ etc) and show ALL categories accessible in the navigation (eg from ‘TVs’ to ‘Toasters’)
- Link to complex ‘life choice’ or ‘life planning’ content and services in the relevant verticals or sub-verticals in order to raise awareness of the breadth and depth of Which? content in context. Users were comfortable finding this content in relevant areas – for instance 79% of people put Mortgage Advisors in ‘Money’ (vertical) and ‘Mortgages and property’ (sub-vertical) as well as in the ‘Services’ section (see also Point 4).
- Deliver a consistent brand experience. The navigation design must align with current visual identity work and meet our omni-screen UI and accessibility standards across devices.
- Maintain a ‘Services’ section (vertical) for areas such as Which? Legal. When ‘Services’ is available at the top level, customers easily found our legal suite of services here (Legal, Wills, Conveyancing etc) (see Fig 4).
- Continue to display ‘Campaigns’ at the top level – individual campaigns are easier to find when presented here as opposed to groupings such as ‘Consumer Action’ which sought to combine ‘Campaigns’ and ‘Consumer Rights’.
- Re-shape the ‘Home & garden’ and ‘Money’ IA to include former ‘Energy’ content. Members and non-members easily found ‘Energy’ content (and services such as Which? Switch) in the relevant sub-vertical categories of ‘Home & garden’ and ‘Money’.
- Re-shape the target ‘Home & garden’ IA by categorising the Product Reviews around their function and where they would be found within the house (in the kitchen, in the garden etc)
- Remove ‘Travel’ from ‘Home and Garden’ – ‘Travel’ doesn’t comfortably fit in ‘Home and’ Garden’ and seemed to work better in a ‘Cars & Travel’ vertical. This would also have the added benefit of reducing the already overcrowded ‘Home & garden’ section.
TESTING THE USER INTERFACE
Obviously with the above recommendations, particularly a comprehensive set of links to ALL categories, meant that we were looking at a lot of links. Five times more to be precise. The sheer volume of links thus presented a problem with the user interface (UI) in an omni-screen execution – this coupled with the amount of top level navigation items ( 8 verticals + Search + Login / Signup ) gave us plenty of headaches. This was further complicated by the fact we had to accommodate both current and target IAs for the complex ‘Home & garden’ vertical.
In the end we settled on three variants of the UI and did some further lab-based qualitative user testing to validate the design assumptions we had made during the process of creating viable prototypes.
The lab tests consisted of one-to-one user observation using 12 Which? Members. All participants tested all three prototypes – as we needed to observe and understand whether the users were presented with the right level of detail within each grouping – and also how intuitively they could navigate the UI.
In reality the mobile resolution UI was straightforward as there were limited options with this many links, and luckily some robust and established patterns. A staged menu that presented options from the right seemed to work well – with some minor questions around interaction, feedback and affordances which we ironed out at the design stage. (see Fig 1 for eventual mobile UI design). We felt this should also work for standard tablet resolutions.
The laptop-desktop-supertablet UI was not so obvious and unfortunately we concluded the mobile pattern didn’t really work at these wider resolutions. Equally, presenting all the links in one huge panel also became unwieldy so compromises had to be made around volume of links and use of space vs complexity of the UI.
In essence these were the findings from testing:
- It was overwhelming for users with ALL products in one view – and a simpler panel without a comprehensive set of links was not liked by users (see Fig 5)
- A click-through type interaction (which to some degree mimicked the mobile) was felt to be too complex and would have some serious technical challenges for omni-screen delivery (see Fig 6 background panel)
- A sub-tabbed panel seemed the best compromise and was largely understood by all users. It also presented the best way to segue the contextual services and advice into the mix. (see Fig 6 foreground panel)
EDITORIAL & TECHNICAL CONSIDERATIONS
Once we had settled on the UI based on the winning prototype (see Fig 6 foreground panel) we further shaped the design to accommodate the full IA and designed out all the various tabs and states needed. While this process was going on, both technical and editorial teams were heavily involved in determining the technical requirements, refining some of the UI and IA choices, and defining the update processes.
The sheer volume of links – and the addition of contextual cross-linking to relevant services and advice content – meant that the CMS would need to be robust and flexible for the editorial team to efficiently manage the host of links (and keep all the properties updated). The previous versions had relied on a ‘hard reset’ for every significant change and the navigation asset (delivered as a Ruby-on-Rails ‘gem’) had to be re-consumed for every release update (outside of simple changes done via the Rails Active Admin CMS). The current version was designed to be more elegant and self-contained, and once released on which.co.uk, the dozen or so sub-sites – including Campaigns, Consumer Rights, and all other Which? services – would thus be automatically updated.
PRODUCT DEVELOPMENT PROCESS
By using InVision to collate the various design layouts and garner feedback from stakeholders and the product team, we managed to complete most of the design work by July. This was in tandem with the initial scoping of the development effort, so that by August the coding could start in earnest. The designs were ported to Zeplin for handover to the dev team and the agile development process carried on through the autumn as we refined interactions, transitions and tweaked the UI (particularly on how to integrate Search). Code was QA’d and environments were also set-up to enable rigorous and thorough testing before launch.
By late November we had a fairly stable version to test and load with actual content and the re-shaped IA. By early December we were ready to look at scheduling a release. However, as is sometimes normal, a few issues – particularly around keeping page load time down and some integration glitches – meant we were faced with launching very late in December. This was felt to be a bit too near our peak traffic period of Christmas, so in the end the decision was made to hold off until the new year. Thus the 3rd iteration of the Global Nav finally went live in the first week of January 2017.
The newest release of the global nav has around five times the number of links as the previous nav and thus we are predicting a significant impact in improving our overall SEO.
- The primary benefit is in Google being able to see ALL category level links on every single page of the Which? digital estate (eg TVs, Toasters, Tumble-dryers etc). This directly influences crawl rate of pages.
- The secondary benefit is in exposing explicit link names that say what you are going to, which thus helps us rank on specific searches (e.g. ‘Televisions’ link goes to ‘Televisions’ which is far superior than mapping to a ‘TV & home entertainment’ sub-vertical grouping).
It is thus likely to have a positive impact on both our SEO and take-up in trials. A projected increase of around 2.5% in sessions on content linked to by the global nav – which should in turn generate a significant uplift in membership trials by mid-2017.
Early indications from Google Analytics already show a favourable increase in some key statistics and we will hopefully be able to see some positive results on both SEO ranking and uplift in trials by end of February (once the Global Nav has been live and stable for over a month or more). Indeed we have also seen some evidence of increased sessions with Search – as it is now more prominent – and this has already had an uplift in member acquisition. We are also confident we will see an increase in our page load speed times on our core Product Reviews which will further enhance our SEO equity and ranking with Google.
Hopefully this post has outlined how the current release of the Global Nav has been a truly collaborative effort between the site owners and the product, UX, design, development and the editorial teams within Which? – all working closely together over the last 18 months or so. Everyone has worked hard to make sure we could deliver in the first week of 2017 so we could start seeing benefits both from an SEO viewpoint AND to start to make a difference to our users – both members and non-members – helping them get straight to what they need.
Obviously, we don’t like to rest on our laurels at Which? and as well as a backlog of minor tweaks that we didn’t manage to squeeze in, we will also now embark on some additional remote testing to refine the IA and UI. We will be using Loop 11 to measure how well the new navigation supports users’ top tasks compared with the old navigation. In addition we will look to move towards the proposed target IA for the ‘Home and garden’ vertical which we feel will add further benefit to overall way-finding.