Contents

#Overview 1Introduction 2User Research

3Design System 4Wireframing 5Final Design

6Testing 7Conclusion

Intro
The Money and Pensions Service was an organisation tasked with a statutory objective to develop and coordinate a national strategy to improve financial capabilities across the UK.

Challenge
The Money and Pensions Service website had not been updated since its initial launch in 2019. It lacked alignment with the organisation’s evolving purpose, had no cohesive structure, and did not visually reflect the brand’s mission or dynamic nature.

Solution
The website underwent a comprehensive refresh, guided by extensive research and testing. To address inconsistencies, a new set of branding guidelines was created, strengthening the brand’s identity and ensuring a modern, user-centred experience that aligned with organisational goals.

1. Introduction

The company website, unchanged since its inception in 2019, had become outdated, both visually and functionally. Feedback from team members and stakeholders indicated that a complete overhaul was essential to maintain relevance and engagement in an increasingly digital and fast-paced environment. Key concerns included a notable decline in site traffic, suggesting that users found the current experience unappealing or difficult to navigate. A refresh was seen as an opportunity not only to optimise the website for search engines but also to drive increased traffic and ultimately improve conversion rates, creating measurable impact for the encouraging.

Additionally, a more cohesive and engaging digital presence was needed to reflect the brand’s evolving identity and communicate the company’s mission effectively. The refreshed site aimed to tell the company’s story in a way that resonated with users, presenting complex information about financial education and resources in a clear, user-friendly format. A stronger brand identity would distinguish the organisation from similar services, ensuring the site left a lasting impression and fostered trust with visitors. The goal was to create a digital experience that combined streamlined navigation, compelling visuals, and accessible content, fostering a stronger connection with users and better supporting the organisation’s mission to improve financial literacy.

Original homepage and blog category page

An initial assessment of the website revealed several key issues:

The site looked outdated and lacked visual appeal.
The branding required a complete refresh to reflect the company’s evolving identity.
Technological advancements had outpaced the site’s functionality, leaving it feeling outdated.
The information architecture was disorganised, with numerous broken links disrupting navigation.
The user experience was confusing, with no clear or consistent structure guiding users.

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 of the Money and Pensions Service were chosen for in-depth interviews.

Objective: To gather insights about users’ goals, frustrations, and experiences with the website.
Tools: Zoom for video interviews and Google Forms for capturing responses.
Process: Each participant took part in a structured interview that included open-ended questions, allowing them to share their thoughts freely. Questions focused on how they used the site, specific tasks they tried to complete, and any problems they faced.
Outcomes: The interviews revealed various user frustrations, highlighting common themes such as difficulty accessing important information, excessive text on many pages, inconsistent design elements, unclear pathways to key resources, and a desire for more engaging content like videos or interactive tools.

User Walk-Throughs

Each interviewee participated in a guided walk-through of the website.

Objective: To observe users as they navigated the site, providing insights into their decision-making processes and highlighting usability issues in real-time.
Tools: Zoom for video walk-through 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: This hands-on approach identified usability challenges faced by users. It was noted where they struggled or abandoned tasks, including difficulties with convoluted navigation, challenges in locating important resources like explainer videos, and issues with text-heavy pages. Users were also distracted by inconsistent visual elements and experienced high bounce rates on busy pages, all of which highlighted the website's shortcomings.

Usability Testing

In addition to interviews and walk-throughs, formal usability testing sessions were conducted.

Objective: To quantitatively measure user interactions with the site and gather data on task completion rates, time on task, and error rates.
Tools: UserTesting for testing user interactions, Google Analytics for tracking user behaviour, and Hotjar to create heat maps.
Process: Participants were given specific tasks to complete on the website, including locating financial planning tools, accessing explainer videos, finding glossary definitions, and navigating to relevant resources. Their interactions were recorded, and metrics such as time taken to complete tasks, number of clicks, and any errors encountered were tracked. Participants also provided immediate feedback after each task.
Outcomes: The usability testing uncovered significant bottlenecks and inefficiencies in the user journey. Participants struggled with tasks such as locating financial planning tools and accessing explainer videos, often taking longer than expected and making multiple unnecessary clicks. Frequent navigational errors indicated that users were unsure of how to proceed, leading to frustration. The data highlighted the need for a more intuitive site structure and clearer pathways to essential content, emphasising the importance of simplifying navigation to enhance overall user experience.

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 below to see the website audit report.

Website audit report

3. Design System

The previous brand guidelines, consisting of just 8 pages, lacked the depth needed to guide a consistent, impactful brand identity for the organisation. An extensive overhaul was required to create a unified design system that would address visual inconsistencies and support a strong, consistent user experience.

Please click the thumbnail below to see the old brand guidelines.

Old brand guidelines

Inspired by a well-received animated video created by an external company (see video here), the new brand style introduced dynamic and engaging elements reflecting the video’s energy. This updated style offered a visually cohesive and user-friendly experience, strengthening brand identity and usability through a refined set of guidelines.

User research had previously identified that inconsistent visuals created confusion, reducing engagement and causing users to miss essential information. To address these issues, a new design system established a standardised set of core components, including grid layouts, a cohesive colour palette, consistent typography, and unified icons, which collectively enhanced the user experience and brand strength.

Please click the thumbnail below to see the new brand guidelines.

New brand guidelines

4. Wireframing

In the wireframing stage, the focus remained on the functionality of the site rather than the visual aspect, addressing user needs highlighted in the prior research. This phase aimed to streamline navigation, optimise content layout, and address accessibility challenges.

Key improvements included:

Simplified Navigation: Reorganised pathways to key information, resolving feedback about convoluted routes.
Clear Content Structure: Placed essential resources, like explainer videos, in accessible locations to ensure quick retrieval.
Reduced Text Overload: Implemented a clear, scannable layout that minimised text-heavy areas and focused on critical points.
Enhanced Visual Consistency: Unified the design, resolving visual inconsistencies by aligning with the newly developed brand guidelines.

First sketches were tested to explore ideas, and low-fidelity wireframes were created in Balsamiq to solidify the layout and logical flow, ensuring content remained easy to scan and met user goals efficiently.

Feedback from internal teams and stakeholders highlighted areas for refinement, including simplifying navigation further and adjusting content organisation to improve flow. These insights were incorporated to enhance the user experience before progressing to higher-fidelity designs.

Initial sketches turned into low-fidelity wireframes in Balsamiq

5. Final Design

To enhance usability and engagement, the final design included several targeted improvements:

Engaging Hero Section: Created with visually engaging elements and direct links to key resources, encouraging trust and confidence in Money and Pensions Service.
Cleaner Aesthetic: Simplified and streamlined layout with minimalistic design elements, fostering a modern, easy-to-navigate interface.
Content Prioritisation: Important information was highlighted, reducing the amount of text and placing frequently used features front and centre.
User-Friendly Navigation: The addition of a mega menu and clear labels allowed for quick access to essential links and information.
Enhanced Visual Hierarchy: Bold headings and consistent typography enabled smoother scanning of content, reducing user frustration.
Consistent Branding: Colours, icons, and logo usage were updated to reflect a unified, modern look across all touchpoints.
Mobile Responsiveness: Optimised for both desktop and mobile, ensuring a seamless experience on any device.
Accessibility Improvements: Increased font sizes, contrasting colours, and added alt-text for images to improve accessibility for all users.
Performance Optimisations: Reduced load times and improved site speed, directly addressing feedback about slow page loads.

Together, these changes not only resolved usability issues identified in user research but also elevated the overall user experience, making it more cohesive, trustworthy, and efficient.

Below are screens showcasing the enhanced design, with some displayed next to the previous website page for comparison.

Final homepage design

Mega menu design

Blog landing page - before and after

Blog post page - before and after

6. Testing

The final design was fine-tuned to ensure it met user needs and expectation. Several testing methods and tools were employed:

Analytics Tools: Google Analytics was used to track user behaviour, including page views, bounce rates, and session durations, providing insights into user engagement.
Heat Maps: Tools like Hotjar were utilised to create heat maps, illustrating where users clicked, scrolled, and hovered, helping identify high- and low-engagement areas.
A/B Testing: Optimizely and Google Optimize was implemented for A/B testing, allowing different design variations to be tested with users to compare performance metrics such as conversion rates and user engagement.
Usability Testing: UserTesting facilitated remote usability testing, where participants completed tasks while their interactions and feedback were recorded, providing qualitative insights into usability issues.
Surveys and Feedback Forms: SurveyMonkey collected user feedback post-interaction, gauging satisfaction levels and gathering suggestions for improvement.

These methods collectively informed ongoing design refinements, ensuring the final product was user-centred and effective.

7. Conclusion

The refreshed website launch proved highly successful, achieving a 113% increase in traffic, improved engagement, and higher time-on-page metrics. Client and customer feedback was overwhelmingly positive, validating the redesign's effectiveness

The following key points summarise the outcomes and lessons learned:

Increased Traffic: The website saw a 113% increase in user visits post-launch.
Enhanced Engagement: Users spent more time on the site, indicating improved content and usability.
User-Centric Design: Prioritising user needs from the start proved essential for success.
Stakeholder Collaboration: Involving key stakeholders, especially developers, facilitated creative solutions.
Data-Driven Refinements: The final design was fine-tuned using analytics, heat maps, and A/B testing, ensuring a responsive user experience.
Documentation of Insights: Maintaining a single source of truth for all project details streamlined communication and decision-making.

Overall, the project not only improved the user experience but also strengthened brand trust, demonstrating the value of a thorough, research-based approach to web design.