Contents

＋

#Overview 1Introduction 2User Research

3Brand Guidelines 4Wireframing 5Final Design

6Testing 7Video Animation 8Conclusion

Intro
The Money and Pensions Service was responsible for developing and coordinating a national strategy aimed at improving financial wellbeing across the UK.

Challenge
The organisation’s website had not been updated since its launch in 2019. It no longer aligned with the brand’s evolving goals, lacked clear structure, and failed to reflect the organisation’s mission or energy.

Solution
A full redesign was undertaken, informed by in-depth research and user testing. To resolve design inconsistencies, a comprehensive brand guideline was created to deliver a user-focused experience.

1. Introduction

The Money and Pensions Service, a UK organisation set up to improve the nation’s financial wellbeing and understanding, had a website that hadn’t been updated since its launch in 2019. Over time, it became outdated in both look and function, and no longer reflected the organisation’s changing goals or what the public expected.

Scroll Here

Original Homepage

The initial website review identified the following key issues:

Declining Engagement

A drop in engagement and site traffic.

Outdated Design

The site appeared visually old-fashioned and lacked modern appeal.

Brand Misalignment

Branding no longer reflected the company’s current direction.

Poor Navigation

Information architecture was disorganised with broken links disrupting flow.

Confusing Experience

User journeys lacked clear, consistent structure and guidance.

Technical Issues

Legacy technology caused slow performance and functional problems.

Feedback from stakeholders and team members highlighted the urgent need for a full redesign to stay relevant and engage users in a fast-evolving digital landscape. Declining site traffic pointed to an experience that users found unappealing or difficult to navigate. The refresh presented an opportunity not only to optimise for search engines but also to boost traffic and improve conversion rates.

A stronger, more consistent digital presence was needed to reflect the brand’s evolving identity and clearly communicate its mission.

2. User Research

A variety of user research methods were employed to gain insights into user needs, pain points, and behaviours. These methodologies provided a well-rounded view of the current user experience and guided the redesign process.

User Interviews

Five customers were chosen for in-depth interviews to gather insights about their goals, frustrations, and experiences with the website. Zoom was used for video interviews and Google Forms for capturing their responses.

Process Each participant took part in a structured interview that included open-ended questions, allowing them to share their thoughts. Questions focused on how they used the site, specific tasks they tried to complete, and any problems they faced.

Outcomes Various frustrations were revealed, highlighting common issues such as difficulty accessing important information, excessive text, inconsistent design elements, unclear pathways to key resources, and a desire for more engaging and interactive content.

User Walk-Throughs

Each interviewee were observed as they navigated the website, providing insights into their decision-making processes and highlighting usability issues in real-time. Zoom was used to record walk-throughs and Notion for note-taking.

Process Participants were asked to do a walk-through of finding information on a particular service or locating explainer videos. Observations were made on their behaviour, including any hesitations, frustrations, or moments of confusion.

Outcomes It was noted where users struggled or abandoned tasks, including difficulties with navigation, challenges in locating important resources like explainer videos, and issues with text-heavy pages. Users were also distracted by inconsistent visual elements.

Usability Testing

Sessions were conducted to quantitatively measure user interactions with the site and gather data on task completion rates, time on task, and error rates. UserTesting was used for testing user interactions, Google Analytics for tracking user behaviour, and Hotjar to create heat maps.

Process Participants were given tasks to complete, including locating financial tools, accessing explainer videos, finding glossary definitions, and navigating to relevant resources. Interactions were recorded, and metrics such as time to complete tasks, number of clicks, and errors were tracked. Feedback was also provided after each task.

Outcomes Significant bottlenecks and inefficiencies in the user journey were uncovered. Participants struggled with tasks such as locating financial planning tools and explainer videos, often taking longer than expected. These issues highlighted the need for simpler navigation and clearer paths to key content.

An audit was conducted to evaluate the website’s performance in key areas of SEO and web design, providing actionable suggestions for improvements.

Following this, a comprehensive design review was performed on the website, focusing on identifying enhancements that could improve the overall user experience and visual appeal.

Please click the thumbnail to view the detailed user research report.

3. Brand Guidelines

The original brand guidelines spanned only eight pages and lacked the depth to support a consistent or memorable brand experience. A full overhaul was undertaken to develop a comprehensive design system that resolved visual inconsistencies and improved the overall user experience.

Click the thumbnail below to view the original brand guidelines.

Old Brand Guidelines

Research revealed that inconsistent design caused confusion and lowered engagement. In response, the brand guidelines was updated with bold, engaging visuals that reflected the organisation’s evolving identity. Standardised elements, such as structured grids, a unified colour palette, consistent typography, and clear icons, were introduced to improve consistency, accessibility, and overall ease of use.

Click the thumbnail below to view the new brand guidelines.

New Brand Guidelines

4. Wireframing

Initial Sketches Turned into Low-Fidelity Wireframes in Balsamiq

During the wireframing stage, the focus stayed on functionality over visuals, directly addressing user needs identified in earlier research. The aim was to simplify navigation, optimise layout, and improve accessibility.

Initial sketches were tested to explore ideas, followed by low-fidelity wireframes in Balsamiq to define structure and flow. Feedback from stakeholders helped refine navigation and content organisation before moving into high-fidelity design.

To ensure the structure met a broad range of user needs, wireframes were also reviewed against accessibility standards and mobile responsiveness. This helped identify early adjustments needed to maintain clarity and usability across different devices and user abilities.

5. Final Design

The final design combined all the research, feedback, and brand updates into a clear and user-friendly experience. It focused on making the site easier to use, quicker to navigate, and more helpful for people looking for financial information. The design aimed to build trust, look modern, and support the organisation’s goal of helping people understand and manage their money more easily.

Scroll Here

Final Homepage Design

Key improvements included:

Engaging Hero Section

Used bold visuals and quick links to help users feel feel confident and supported from the start.

Simplified Look

Used clean, modern layouts and minimal distractions to make the site easier to explore.

Clear Content Focus

Highlighted important resources and reduced clutter, ensuring key information was easy to find.

Improved Navigation

Introduced a mega menu with clear labels, giving users faster access to key sections.

Strong Visual Hierarchy

Used bold headings and structured typography to guide users through content more naturally.

Unified Branding

Refreshed the colour palette, icons, and logos to align with the new brand identity and tone.

Fully Responsive Design

Optimised layouts for mobile and tablet devices, ensuring smooth performance across screen sizes.

Better Accessibility

Enhanced readability with larger text, strong contrast, and alt-text for images to support all users.

Below are examples of the new design, shown alongside the original pages for comparison.

Homepage

Blog Homepage

Blog Post Page

Menu

6. Testing

The final design was tested thoroughly to make sure it met user needs and worked well in real situations. A mix of tools and methods helped identify what worked, what didn’t, and where improvements were needed:

Analytics Tracking

Google Analytics showed which pages users visited, time spent, and drop-off points. This helped identify areas needing improvement.

A/B Testing

Optimizely was used to test different versions of a page. Results showed which layout or wording performed better.

Remote Usability Testing

UserTesting let real users complete tasks while speaking out loud. Their screens and feedback were recorded, helping spot problems.

Heat Maps

Hotjar tracked where users clicked, moved their mouse, and stopped scrolling. It showed which parts got the most or least attention.

Surveys and Feedback Forms

SurveyMonkey gathered user opinions after they used the site. This helped measure satisfaction and collect ideas for changes.

Accessibility Reviews

Tools like WAVE and manual checks with screen readers were used. This helped make the site easier to use for people with disabilities.

Together, these testing methods helped guide final improvements, ensuring the site was not only visually appealing but also practical, easy to use, and focused on real user needs.

7. Video Animation

Following the successful rebranding, an animated video graphic was produced to further bring the new visual identity to life (see video).

Created using Adobe After Effects, the animation was designed to reflect the updated brand personality in a dynamic and engaging way. It combined bold visuals, motion graphics, and messaging to reinforce key themes introduced during the redesign.

By introducing movement and energy, the animation helped the organisation connect with users on a more emotional level, adding depth to the digital experience. It was used across presentations, social media, and internal communications.

8. Conclusion

The refreshed website launch was very successful, with a 113% rise in traffic, better user engagement, and longer time spent on pages. Feedback from clients and users was very positive, confirming the redesign worked well. Key outcomes and lessons included:

Increased Traffic

User visits more than doubled after launch.

Better Engagement

Users stayed longer, showing improved content and ease of use.

User-Focused Design

Putting user needs first was key to success.

Stakeholder Involvement

Working closely with stakeholders, especially developers, led to creative solutions.

Data-Driven Improvements

Analytics, heat maps, and A/B tests helped fine-tune the final design.

Clear Documentation

Keeping all project details in one place improved communication and decision-making.

Overall, the project enhanced the user experience and increased brand trust, proving the value of a research-led approach to design.