Which? global navigation research and design

Project overview

Which? Consumer Association had done research which showed that their website's main navigation was not performing as well as it could and not helping the audience find their way to the content they wanted. I was hired to perform some research to understand the user's navigation needs and then to design a navigation system which would improve wayfinding and task completion.

Phase 1: Research

The first thing we did was review the existing research and from that we devised a card sort test to help us understand how the audience understood the categories and information on the site. We then performed an online cardsort exercise with both Which? members, and gerneral audience.

As a result of the card sort and associated survey we were able to create a hypothesis for how we could structure the content to facillitate user tak completion and wayfinding.

To test this new structure we created a task analysis test using Optimal's Treejack to test how user's performed and perceived our suggested update to the content structre. The results of this test were then presented back to the senior stakeholders for discussion.

Phase 2: Design and user testing

After the stakeholders accepted our reccomendations for the new content structure we started concept designs for ideas on how we could implement this new structure. We considered our responsive desktop sites as a prime platform, but also had a large focus on mobile web and native navigation patterns to suit that growing portion of our audience.

I did a brief competitor analysis followed by some concept designs. These were discussed and peer reviewed and then 3 prototypes were constructed to take to user testing. The three prototypes were designed to each test different aspects of our earlier hypotheses.

After a successful round of lab based user testing we took what we had learned and produced a working design for the new navigation. This design was then adjusted for scope and budget and working with the development and product teams entered development.

Interaction design and implementation

The final phase of this project involved working with the front end developers to design the interactions for the new navigation. Earlier prototypes had approximated animations and interactions, but this phase included working with developers using production code and limitations of the Which? codebase.

Results

The new design met and exceeded stakeholder requirements and was successful upon launch.

Tools used

• Pencil sketches
• Cardsorting, Treejack
• Workshops
• Omnigraffle
• HTML prototyping