← Back to home
Toggle theme
Nationwide Favicon Nationwide Building Society

Redesigning savings product pages

I led the redesign of Nationwide's online savings product pages using an iterative 'think, make, check' design loop. This user-centric approach directly optimised the customer journey, resulting in a significant lift in application starts and new account openings.

21%

Uplift in Application Starts

13%

Uplift in Application Completes

£365k

Additional Revenue

UI Design User Testing Workshops

The brand

In 2023, Nationwide initiated a strategic transformation to evolve its brand. While long-established as a trusted, 'warm' brand for savers and more elderly audiences, the new vision was to become a more ambitious banking institution. The challenge was to modernise and accelerate change without losing this core brand equity. A key objective is to broaden public perception from a traditional 'building society' to a primary, modern banking choice for a wider demographic.

Following a company-wide modernisation across multiple channels, the time came to align the website's savings space with this new strategic direction. I joined Nationwide in October 2024 to help with this digital evolution.

The problem

The website's legacy was a 'feature factory' model, prioritising marketing campaign requests over a cohesive user journey. This created a functional but cluttered experience that lacked trust. Visitors were unsure how to proceed, and I was tasked with reversing this trend to restore user confidence and drive conversion.

The team

I am the Product Designer within a multidisciplinary team. I work with a Content Designer, Insights Manager, Site Builder and Product Owner. I actively involve relevant senior stakeholders too.

The user need

The ‘confused’ customer needed clarity and confidence to navigate a cluttered journey. They needed to efficiently apply for the right account without friction that causes them to drop off, and an experience that inspired trust.

The business need

We had to increase application conversion as historical rates were low; data showed that only 15% of users progressed from the product page to the pre-apply page (an 85% loss), and of those who remained, only 75% started an application. This redesign also needed to actively support Nationwide's new brand, transforming the pages from purely functional to a modern, dynamic, and trustworthy experience to enhance customer retention and improve funnel progression.

Discover: workshop & competitor review

We kicked off by brainstorming what the page lacked. We noted the product's benefits (especially the interest rate) were not clearly communicated, the apply button was buried, and the design was desktop-focused. The legacy 'summary box' dominated the page, creating excessive visual clutter.

To deepen our understanding, the Insights Manager created heatmaps through ContentSquare. These provided a critical insight: the primary CTA actually had high engagement when it was visible, but only 15–20% of users ever scrolled far enough to see it.

I reviewed competitor pages and identified that the Account Name serves as the H1, and the Interest Rate is usually emphasised with large, bold typography. This highlighted the need to define our own hierarchy based on these design patterns.

Screenshots old experience, CSQ heatmaps, workshop task and competitor review.

Our Hypothesis

"We believe that the low visibility of the ‘Start Application’ button is negatively affecting application starts. Moving the button to a more prominent position will increase the overall click rate to subsequently increase the number of application starts."

Definition: prioritised features

Our redesign was driven by user data. We aimed to create a clearer experience that reduced cognitive load and guided users towards conversion.

1.

Elevate interest rate prominence

We had to create visual prominence for the interest rate while working within a technical constraint that limited it to standard text size.

2.

Reduce cognitive load

We adopted a ‘minimal upfront detail’ strategy, drastically cutting content and using accordions for dense legal information to clean up the page.

3.

Clarify the path to application

A key goal was to redesign the primary CTA to be an unambiguous, visually compelling signpost into the application funnel.

Develop: bringing the design to life

Collaborating with the content designer, we cut redundant text, focusing the initial view on the product name, interest rate, how the account works and eligibility. The interest rate is now featured in a distinct light blue block with bold typography, making it immediately visible without changing the underlying token system.

Dense legal info was moved into accordions, cleaning up the page. The 'Apply' button was made prominent and placed in the main content flow. This careful sequencing of information, showing users only what they need when they need it, was vital. The new aesthetic uses enhanced white space, clear typography, and a good use of the brand's blue (already used in other channels) aligning with the look and feel of other channels and Nationwide’s brand transformation.

Desktop and mobile designs.

Develop: User Testing

I tested the new ‘Flex Regular Saver’ designs with savers on the 'User Testing' platform across both desktop and mobile. The findings confirmed the new hierarchy was successful but highlighted key areas for content refinement.

What Worked

  • Instant Page Recognition: Participants immediately understood they were on a product page.
  • Effective Wayfinding: The hero banner was praised as a strong component for navigation.
  • Clear Key Information: Participants successfully located the interest rate and understood 'how it works'.
  • Clear Path to Conversion: Participants clearly understood how to apply for the account.

Areas for Improvement

  • Confusing Jargon: There was a need to refine some specific banking jargon.
  • Users Skipping Details: Participants could identify eligibility but many did not read them in full.
  • Eligibility Risks: Some participants skimmed this section, creating a risk that they might apply without being eligible.
  • Accordions: As expected, a small number of participants ignored the accordions completely.

Stakeholder reviews & strategic pivot

Following the user testing, we presented our findings to leadership. We received a new strategic directive: to consolidate the ‘pre-application page’ content directly into the product pages themselves. This decision was driven by the goal of maximising efficiency and reducing "dead ends" in the customer journey.

The pre-application page was identified as adding unnecessary friction to the user flow while providing negligible SEO value. I promptly designed the merger of these experiences, integrating routing components and vital documentation directly into each product page design to create a more linear, frictionless conversion path.

Deliver: Phase 1 release

To de-risk the launch, we adopted a phased rollout. Phase 1 consisted of launching the Product Page with a single Apply CTA. We released tests on the Flex Regular Saver page first. This approach was a strategic dependency, allowing the Site Builder to continue development on the more complex, merged product pages in parallel.

Initial launch mockups.

Deliver: Phase 1 results and design iterations

The metrics validated our design hypothesis, showing a 10% lift in progression to application starts. While the new design allowed visitors to find the 'Apply' button ~30 seconds faster, metrics also showed a high volume of people being screened as 'not eligible' on the subsequent page. This confirmed a risk that the design didn't adequately make people read the eligibility criteria.

Phase 1 wins were celebrated across the business.

Develop: reiterate design

Our data presented a challenge: Phase ones faster design caused users to skip critical eligibility details. We decided the best approach was to resurface the eligibility criteria before showing a 'routing questionnaire.' This 'good friction' was designed to catch users who had overlooked key requirements and filter out those who could not apply.

Good friction design patterns.

Deliver: phase 2 results

Our metrics validated the Phase 2 redesign, which we shared externally and won an industry award for Best Single Page Optimisation at the CX Awards (Silver). Resurfacing eligibility resulted in an 87% uplift in users screening as eligible, allowing a managed flow into the savings applications. This project drove on an average 21% lift in overall application starts across product pages.

Most significantly, conversion to "Application Complete" increased by an average of 13% across product pages. Products that did not require an internet banking login saw the largest gains, reaching up to 27%. This optimisation resulted in an estimated additional £365k in revenue. Operationally, build times were significantly reduced and risk lowered through the implementation of tokenisation and shared components.

The new experience.

Our award win

Winning Silver for Best Single Page Optimisation at the CX Awards.

Ami receiving the CX Award

Celebrating the success with the team.

Reflection & Roadmap

This project was a lesson in balancing efficiency with requirements. We transformed a cluttered legacy page into a high-performing blueprint. Key takeaways: iteration is essential, and data-driven 'good friction' can significantly improve applicant quality and final conversion.

Ongoing Optimisation & Next Steps

Internet Banking

We are building the website designs across internet banking product pages to ensure content is synchronised and this improved experience is shared with our existing customers. Flex Regular Saver will be the first to launch, allowing us to test conversion impact before rolling out to other accounts.

Nationwide App

The app is responsible for two-thirds of our sales. We are now looking to optimise app product pages, focusing on content strategy to work within current component and preview environment constraints.

Further Web Improvements

  • Deep-linking: With up to 65% of visitors on mobile, we are exploring deep-linking from website directly to the Nationwide app to deliver a more mobile-friendly experience than internet banking logins.
  • PCA Eligibility: We want to enable customers without a current account to open one during the savings application. Currently, ~50% of savings accounts are blocked online for non-PCA customers, which is a significant and unnecessary blocker.
  • Sticky CTA: We plan to implement a sticky CTA for product pages to maintain conversion intent as customers scroll.