Citizens Advice search results page

Project summary: The search function of the Citizens Advice website should be the most efficient way to find advice online, especially for advisers who need to find advice for clients under pressure. Unfortunately, many advisers had lost confidence in the search function and the results that were displayed. My role was to research and design the new UI and page layout. I collaborated with research, data science, content design and development to launch this project.

Company/client: Citizens Advice

Project timeframe: 01/02/2017 - 16/07/2017

Tasks & responsibilities: Design the new website page layout to test with advisers

Design tools / UX methods used: Sketch, InVision, HTML/CSS, Affinity mapping, A/B Testing

Key Performance Metrics: Percentage of secondary searches & Adviser feedback (ease of navigating page and finding results)

Team: UX Designer (Laurence Davis), UX researchers, Project Lead, Product Manager, Developer, Data Scientist

The search results page before and after.

The problem

Around the organisation, there was mounting anecdotal evidence that Advisers were frustrated by the search function on the Citizens Advice website and that some had stopped using it completely. Analysing feedback entries 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.


Key user needs were identified from the initial feedback.  I then set up recordings of heatmaps and session videos using the MouseFlow software to learn more about the search habits of advisers. It had been speculated (based on existing research and best practice) that the search results page, at 20 results was too long. This assumption was validated by the heatmaps, which showed that barely attention was paid beyond the 10th result.

Also, a link for the user to give feedback specific to their search experience was added to the search results page, replacing the general feedback link.

Attention heatmap
Attention heatmap
Movement heatmap
Movement heatmap

User flows of the search journey were mapped out in order to understand the red routes. It was quickly discovered, from both the flows and recordings, that the user was made to go through unnecessary steps/screens when they misspelled a search term, rather than the page immediately dispaying the results for the assumed correct spelling. Also, if the search term returned no results, the onward action presented to the user was unclear. Streamlining this journey was seen as a quick win in improving the search experience.

After a misspelled term, the user hits a wall. No search results are immediate.
After a misspelled term, the user hits a wall. No search results are immediate.
No results, but the filter tabs are still displayed.
No results, but the filter tabs are still displayed.
The original search user flow
The original search user flow

A significant issue with the page design was the presence of tabbed content. By default, a user’s search presented results categorised as advice content (with the option to filter by ‘Research and campaigns’ and ‘Everything’. It was assumed that the tabs were confusing and an inconvenience for users, but in fact, most users barely noticed them at all. This was backed up by analytics, which showed barely any click events for the tabs. The tabs still presented a issue however, as they, along with their explanatory text, took up a large proportion of the screen, pushing the results down (even more so on mobile screens). The tabs were also present on the 'No results' page. Rather than removing the tabs completely, the decision was taken to leave the option to filter results but move this to a dropdown in the sidebar.

Tabbed search results on laptop and mobile - it was difficult to see any results without scrolling.
Tabbed search results on laptop and mobile - it was difficult to see any results without scrolling.

Another potential quick win was to change the orientation of the page. The existing search results page had a sidebar to the left, which was the original page layout across the website. Earlier research from CA’s digital transformation project concluded that the sidebar should be on the right and thus the new layout was used on new or reworked content pages going forward. It was safe to assume that bringing the SERP into line with this design would improve readability in the same way.

Search results page wireframe
Search results page wireframe

I created wireframes of a new search results page, first sketching on paper and then moving to prototypes in Sketch and InVision. I also designed prototypes in-browser using the CA patterns library, cab-ui, in order to test the page layout with the live Citizens Advice UI applied.

The new SERP was launched as a beta test with a selection of advisers. Feedback on the experience was positive and the new design was launched site-wide.


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 issues with the content, along with its tagging and weightings were the main factor in dissatisfaction with search. The ongoing improvement of the content for search was part of the wider project, but due to the sheer volume of content on the website, it was a challenge to make an instant impact.

Though it was still sometimes difficult for users to find the correct search results, the page was easier to read and navigate. The new design also demonstrated to Advisers that we were taking the issues around search seriously and working to improve the experience, which helped boost confidence and engagement.


Visual design and presentation could only help so much. The key issues lay with the quality and structure of the content.

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 future improvements.


Long and rigid deployment cycles meant testing iterations was slower than was ideal.

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

  • Deep links in search results (now implemented)
  • 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 at: