LPPA are a well-established pension scheme administrator in the public sector, servicing the pensions of more than 600,000 members from over 1,800 public and charity sector employers, in 17 LGPS Police and Firefighter pension schemes. They were looking to redesign the Your Pension and Your Pension Services site for members and employers and ideally combine both into one new website.
LPPA’s old websites had developed lives of their own – so many sections had been added on that they had become huge, sprawling repositories without a logical user journey or structure. In order to begin to combine them into one new site, we first undertook a user journey and empathy mapping workshop with all the key stakeholders from across the business, which was invaluable in understanding exactly what each user persona needed to achieve when using the website.
We then translated those findings into a new sitemap and wireframes, which helped LPPA to see the logical progression from landing on the homepage to finding the form or resource needed.
As a company working closely with the public sector, LPPA needed their new website to meet Web Content Accessibility Guidelines (WCAG) 2.1 standards.
WCAG 2.1 is based on 4 design principles – the website should be perceivable, operable, understandable and robust.
There are a good number of things that we needed to look at from both the design and development sides of the project to ensure that the site would be completely accessible to all users. These included working on the brand colours and contrast between the background and the text, consistency of features and ensuring the site code could easily interact with assistive technologies.
One of the main goals of the new LPPA website was to provide a series of detailed and specific FAQs which should prevent calls on the more basic queries which they were finding took up a good deal of their call centre team time. By having these FAQs located in one central place it would be easy for LPPA to keep them updated, but they could also be selected and displayed in various relevant areas across the site, providing answers to the most commonly-asked questions at the points in the user journey that they were needed most.
For LPPA’s homepage, we wanted to move away from the typical public sector site look which is functional rather than aesthetic. However, it was important that we didn’t stray too far from the purpose of the site, which above all is to provide information.
With the final designs we achieved a good balance of the two by using a text-based header with dropdowns, allowing users to communicate to the site which user group they’re in and what they’re looking to do from the hero section. This was complemented with the hot air balloon imagery, which kept the page looking fairly minimal despite conveying a lot of information. Simplicity was also key to achieving the WCAG 2.1 standards, so we kept this at the forefront of our minds throughout the design stages.
A lot of the information surrounding pensions can be rather dense and inaccessible to those without some prior knowledge of how they work – however, it was of vital importance to LPPA that they were able to explain these complex processes to all users, even those who had no experience of having a pension.
To ensure that the processes in each section were laid out in the most logical and clear way possible, we built repeatable process flow Gutenberg blocks which could be added to pages across the site. These sections were animated to show the progression as a user scrolls down the page, and highlighted with colour for the current section. Being able to add in these process flows across the site meant that anywhere a user would need to go through a process to achieve their goal, the module could be added to ensure that the process was followed correctly and there was no confusion.
Another way we looked to reduce the call volume to the contact centre was by having the user progress through the relevant FAQ category before they were able to access contact details for LPPA – this meant that if their question was a common one, they should be able to self-serve with the answer before getting to the point of needing to make contact. Ensuring the self-help resources were clearly labelled and easily accessible was key to the success of this section of the site.
Once the user arrived at the contact page, they were immediately presented with a contact form rather than the phone number, which again should take pressure from the call centre team – users will often take the easiest option presented to them, so we put the form front and centre and ensured it was free of impediments to completion, allowing them to upload documents and submit their query safely and securely.
We add new projects to our portfolio as we finish them, so check back regularly to see what we’ve been working on.