Our landing page design for Post Office Mortgages

Bringing a new mortgage proposition to life for Post Office

Our design for Post Office brings their innovative new mortgage propositions to life online. We also delivered a design system that can be re-used across their digital estate.

The challenge
  • Most people don’t know that Post Office offers mortgages. The site needed to credentialise Post Office as a mortgage provider, as well as showcasing the unique nature of the new products.
  • Family Link and Retirement Link were the first products of their kind to be offered to consumers and addressed an unmet need in the market.
  • The site needed to clearly explain these complex products to new users and show their advantages over traditional products.
Our approach
  • Research allowed us to understand the target audiences’ mental models for assessing and choosing a mortgage. Research also showed us where unique aspects of the new products might cause friction or confusion.
  • We focused on copy and content to tell our product story and to guide customers to the mortgage most relevant to them.
  • A design system saves Post Office time and money in managing and improving the user experience over time.

Post Office is the UK's largest financial services chain and the UK’s largest retail network.

Project type


An enriched approach to user research

As this was a novel product in the mortgages market we needed a research approach which would take us inside the decision-making process.

We began by interviewing a number of mortgage buyers, from first-timers to experienced buyers. For some interviews we used a dual UX research approach which allowed us to see natural conversations between partners about the options they were considering. This gave us insights about how people discussed mortgages, gathered information and arrived at a shared view about which provider to pick. We drew on these insights all the way through the design process.

Research Statistics

Rounds of interviews with first time buyers.


Participants across a range of demographics.

Gathering insight, sketching ideas

Designers collaborating in our Post Office war room
Wireframes and research notes combined
Post Office product paper design sketches

Creating a clear navigation for every user scenario

In-page navigation was the backbone of the solution we designed. We needed to give users the ability to move easily between different products as they started to assess their relevance. As product choices became clearer, we supported side-by-side comparison to give customers more confidence in their decision. We tested and re-tested navigation throughout the design process to create an experience which always seems to present the right information, and answer relevant questions, as users moved through the journey.

Post Office mortgages screens detailing important financial information

Goldilocks content

Mortgage sales journeys often fail at one extreme or the other: either over-loading users with too much detail in the early moments of assessing their options, or presenting an uncanny level of simplicity in what users recognise to be a complex decision.

Our goal was to develop copy and micro-content that was ‘just right’ at each step through the sales journey. Again, we relied on research to help us develop the right tone of voice. It was consistent enough to create a friendly, approachable style from start to finish. It was also flexible enough to allow us to drive into complex ideas and details when that’s what the user needed.

We also worked hard to make sure examples and financial illustrations made sense and genuinely helped bring the products to life for potential customers.

Creating a pattern library

The solution we designed is comprised of reusable patterns, components, and templates. Delivered as front-end code these could quickly and effectively be picked up and implemented by the integration partner. The pattern library helped Post Office save time and money in getting the experience to market.

The design system also lowers the effort for Post Office to manage, improve and extend the mortgages digital experience over time.   

Pattern library deliverables

Some examples of the components we delivered in the pattern library for Post Office

Post Office pattern library including, colours, fonts, button styles
Post Office money iconography being passed between two hands
Post Office wallet illustration

The outcome

Foolproof designed and developed the end-to-end journeys for the whole Post Office mortgage range. This successfully incorporated the two new propositions which give first-time buyers a different way to become home-owners.

Post Office mortgages mobile and desktop screens
Post Office mobile screens for creating a loan application
  • Activities

    Customer interviews, user journey mapping, qualitative research and testing, information architecture, interaction design, visual design, UX writing, front-end development.

  • Delivery

    Agile two-weekly iterative design and development sprints.

Get in touch

We'd be very happy to talk through more examples of our work.

Contact Ed Walker, Business Development Director on ed@foolproof.co.uk.

Related case studies

View All
Suzuki cars, bikes and marine together


We designed and built the end-to-end customer experience across Suzuki’s product lines. This resulted in an impressive increase in core sales indicators across each of the four sites we designed.

Search results displayed from using the Avis mobile interface


We worked with Avis to improve the customer experience of the multi-platform booking journey for millions of Avis customers.

Our landing page design for Petplan


Our 3-year experience design partnership with Petplan helps pet owners to make informed decisions about insurance for their beloved pets.