Citizens Advice is one of the UK’s largest charities, providing free and confidential advice to anyone seeking it. With a website that has over 42 million unique visitors per year, they are currently going through a digital transformation to provide better online services to their customers.
I was brought in to help lead with design, UX, accessibility and front end development. Over the course of 18 months Eliot Hill and I created an entire code library to act as the front end boilerplate for all digital services within the charity.
Citizens Advice has a disproportionate number of users with low digital literacy. The majority of advice is given to people without tertiary education or with serious health issues. On top of this, a lot of advice is given for people who are in high stress situations, such as extreme debt. We discovered that people in these situations had significantly lowered digital literacy while trying to find solutions. This discovery was one of many from weekly user testing with 4-5 participants.
Broad user testing was a very important part of the project, as not all information had the same audience. For example, content on debt often had a very different audience to retirement.
Accessibility was an absolute necessity. This was tested with all manner of users, including people with specific requirements such as blindness or brain damage.
We also attempted to simulate accessibility needs for our own team. Methods such as using screen reading software, or colour blindness mockups (shown above) were used. These exercises, along with regular visits to help centres, helped the team empathise with the audience.
Our success in developing an accessible code base led to Eliot and I consulting with GOV.UK. Our aim was to help GOV.UK build a more accessible government. This helped strengthen the relationship between the UK government and Citizens Advice, which is at the forefront of policy impact.
While the main focus was making content more accessible, we also took every opportunity to leverage interactive tools. Through research we often discovered that some content simply performed better with tools, such as basic questionnaires or calculators.
Throughout the website these tools can be found at varying levels of complexity. These were usually tested and prototyped at least 5 times before launching.
Over the course of the project a framework of design and code was developed and hosted publicly on Github. This framework allowed us to quickly build ‘real’ prototypes in HTML, using very simple PUG templates. We could then use these prototypes for user research which would also stress test the code for the live website.
This front end framework quickly grew to over 1 million lines of code in its first year. It is still being regularly maintained and underpins all digital products at Citizens Advice.
Co-Founder
Generating engaging captions and hashtags with advanced AI models.
View case study