Which? Money

Which? Money

Laying the foundations for new propositions in financial space

Basic project info

Obsolete design and suboptimal user experience hampered Which? Money website performance. We involved editors, senior stakeholders, designers and developers in a user-centered design process in which we conducted several rounds of research and design iterations. Tackling the main pain points resulted in a positive response from users.

My role Project UX lead (supervised by a UX Principal)
Platform Responsive website
Industry Consumer advice, Finance
Period Feb 2016 - Jul 2016
(+ supporting development after)
Contract Full-time employee of Which?
(Feb 2015 - Sep 2016)

Background

Which? is the largest consumer body in the UK with a growing base of approximately 1 million subscribers to their online and offline services. Since its start at 1957, Which? magazines have been known for independent product and service reviews but the organisation is currently active in many consumer right related areas – from campaigning for consumer rights to providing independent money guidance to selecting a university, birth choice or elderly care provider.

As most traditionally publishing companies, Which? is currently undertaking a digital transformation.

Which? Money offers a multi-channel experience comprising of a print magazine, phone helpline, and multiple websites.

The Challenge

Which? Money provides guidance on money matters, competing with websites such as moneysavingexpert.com, moneysupermarket.com, moneyadviceservice.org.uk and others.

In the initial user research, we discovered that the original navigation structure, as well as the page template design, did not make it easy for users to move around the site, thus hampering the overall usefulness and trustworthiness of the service. The site was also not mobile optimised.

Since the Money site was due to be migrated to a new CMS platform, an opportunity arose for the major issues to be fixed and user experience improved.

The Challenge - Legacy Which? Money website

The Team & My Role

I worked as a lead UX designer on the project, being supervised and mentored by a UX principal. I prepared user testing studies together with a fellow user researcher, worked closely with a UI designer, developers and SEO managers.

My role involved a lot of stakeholder management – including a product management team, the Money publishing team, and the company senior management.

 

Target Audience

The Money site comprises of ten sections. Each of them (Mortgages, Insurance, Tax,…) has a specific target audience which was identified through interviews with internal subject-matter experts. 

In general, the website seeks people who are interested in financial news and look for guidance on money related matters.

Process, methods & tools

We used agile methodologies to run the project, including morning stand-ups, using a scrum board and running parallel sprints for user research, design and development.

Phase 1 – User research

Mapping navigational models of Which? Money and competitors

I created hierarchy models of 7 competitor websites and Which? to see commonalities and differences. I also mapped the taxonomy of Which? Money site to understand the sheer amount of information being online at that time.

Example of a navigational model
Example of a navigational model

Competition usability testing

We presented users with several competitor sites alongside Which? Money and gave them various tasks to understand how they perceived different forms of information representation and navigational structures.

Site stats and search logs

I went through Google Analytics stats, ClickTale, Google search terms and the internal search log to understand how users currently move along the website and what they search for.

Page anatomy mapping & Component audit

I and the UX Principal mapped components of all page templates to understand the logic behind the current solution and to uncover inefficiencies.

Component audit
Component audit

Requirements gathering & Stakeholder interviews and workshops

I was present at a number of senior management meetings on behalf of UX to advocate the need for change and to understand the business drivers behind the project.

I also ran several workshops with stakeholders to gather and prioritise their requirements.

Phase 2 – Designing for the new experience

New user journeys

I designed a new simplified user journey removing extra steps for the users.

Page flow diagram
Page flow diagram

New information architecture

I developed a new site taxonomy and within- and cross-category linking mechanisms.

I recruited participants from within the company and run a series of card-sorting sessions with them, together with a fellow user researcher. Then we used a new taxonomy and iteratively tested and improved it using Optimal Workshop Treejack in a remote setting.

Card sorting
Card sorting

New sub-vertical and vertical templates

The category pages (sub-verticals) were one of the main pain points for the users – based on our research insights. I proposed and designed a new template. As we strived for a cohesive experience, the project brief was expanded, so that the template did not cater for the Money section only but for the whole of which.co.uk.

To accommodate a number of different types of content that which.co.uk offers, I suggested a modular card based layout, that would be flexible enough to satisfy different stakeholder needs.

Sub-vertical page wireframe template
Sub-vertical page wireframe template

Usability testing

The new category pages were tested in a lab session that I helped to prepare, conduct and analyse with a fellow user researcher.

Usability testing analysis
Usability testing analysis

Stakeholder management

This phase also involved a lot of stakeholder management – I set up (or was invited to present at) several all-hands sessions with the Money team. These sessions were key to gathering feedback on new designs as well as to keeping the team engaged and promoting a common goal.

"Engagement board" for stakeholder sessions
Engagement board for stakeholder sessions

Phase 3 – Supporting development and GUI definition

Walk-throughs and Q&A sessions

Developers and a UI designer were involved in the design process to create an overall understanding of the project, to share a common goal and to check the feasibility of proposed solutions.

UX & UI design review sessions

Designs were also scrutinised at weekly UX & UI design review sessions.

Tools & methods used

User research

  • Usability lab study
  • Semi-structured interviews
  • Card-sorting (in-person and remote through Optimal Workshop)
  • Treejack (Optimal Workshop)
  • Stakeholder co-creation workshops

Design

  • Mobile-first approach
  • Axure
  • Sketch
  • InVision App
  • Zeplin
  • A lot of sketching

Solution

We had to find a compromise between the optimal user experience and the time and resources available. We, therefore, decided to first complete the migration and fix the main issues including the information architecture and templates for category landing pages. Development of the other design suggestions would gradually follow.

(UI design in the right-hand side image developed by a colleague of mine.)

 

Implemented responsive solution for Which? Money

Impact

We got positive feedback from users in testing sessions and Treejack tests showed a significant decrease in task completion times and a significant increase in direct path success.  

I was also very pleased with stakeholder engagement levels and acceptance of user-centred design thinking – by the end of the project, stakeholders would spontaneously seek my help and opinion on key project decisions.