Citizens Advice search results page

Client

Citizens Advice

Dates

March – July 2017

Tools / methods used

Prototyping in browser, Heat maps, Analytics, Usability testing, A/B testing

Team

UX Designer (Laurence Davis), UX researcher, Product Manager, Developer, Data Scientist

Background

At Citizens Advice, there was mounting anecdotal evidence that Advisers were frustrated by the search function on the website and that some had stopped using it completely. User feedback collected on the website confirmed the search results page was indeed an issue, with many users instead using alternative methods, including Google, to find the desired content on the CA website.

Research

Using Mouseflow we set up recordings of heatmaps and session videos, which confirmed our assumption that on the search results page, at 20 results was too long, with users paying little attention beyond the 10th result.

Movement heatmap
Attention heatmap
The existing search user flow

After mapping user journeys and observing the recordings it was clear that there were unnecessary steps for a misspelled a search term. Instead of being shown results for the assumed correct spelling, the user was asked to confirm the correct term before any results were displayed.

Also, if the search term returned no results, there was no clear onward action shown to the user. Streamlining these journeys was seen as quick wins in improving the search experience.

After a misspelled term, the user hits a wall. No search results are immediately available
No results, but the filter tabs are still displayed.

Design

The existing tabbed design for results was found to be unnecessary. The small proportion of users that actually noticed the tabs rarely used them. Along with their labels and explainer text, the tabs took up a large proportion of the screen, pushing the results down (even more so on mobile screens).

Rather than removing the tabs completely, we decided to keep the option to filter results but move this to a dropdown in the sidebar, along with the other navigation tools, such as the A to Z of advice, which Advisers found useful.

Next, we looked at the overall layout of the page. To improve readability and increase the visibility of the search results, we decided to move the sidebar from the left to the right-hand side.

 

I sketched out the new page designs and then created prototypes in-browser using the CA patterns library, cab-ui. The designs included prominent breadcrumbs for each result, as well as deep links for main sections, to help users find the correct page or area more efficiently.

We then conducted usability tests with Advisers. Across the board, users were observed navigating the results quickly and easily. No real issues were noted and all users commented that the search results were far clearer.

Outcomes

Towards the end of my time on the project (due to contract role), the main KPI – secondary search – reduced slightly, but not significantly. As the project progressed, it became clear that the tagging, weightings and categorisation of the advice content itself, were the main factors behind dissatisfaction with search. The ongoing improvement of the content for search was part of the wider project, but due to the sheer volume of advice content on the website, it was a challenge to make an instant impact through the design alone.

Though it was still sometimes difficult for users to find the correct search results, the new page design was easier to read and navigate. With the focus initially on the percentage of secondary searches, quantifying success wasn’t straightforward. The positive feedback, however, was encouraging and the fact that advisers were now more engaged with search boded well for collecting feedback on future improvements.

Possible further features and next steps (to test and implement after I left the project) included:

A unified search bar
Faceted search
Further research – a deeper look into where search fits into the advice process as a whole. Diary studies were set up to provide more context and insights.

The live page can be viewed here.