Product Finder

When I returned to HSBC for my most recent contract, our squad was given a brief to help new and existing customers find HSBC mortgage products. The existing system was difficult to maintain, and directed customers to two different calculators and lists of mortgage products presented across multiple tables. Every rate change meant an author needed to carefully update table cells with token references which surfaced rate data, offers and date ranges. This was tedious and time consuming.

The content team needed something different, a tool that was both useful for customers and manageable for content authors.

Designing for flexibility

Rather than building a mortgage specific tool, we designed a product agnostic component that could surface structured content through Adobe Experience Manager (AEM).

This approach meant working closely with technical teams, content authors and product owners to understand their needs and workflows. The solution had to be powerful enough to handle complex filtering and calculations, yet simple enough that content authors could manage it independently.

Automating complexity

One of the biggest pain points was data management. Mortgage products have dozens of attributes, interest rates, loan-to-value ratios, buyer types, booking fees and special offers. Manually tagging hundreds of products every time rates changed wasn't sustainable.

The solution? Automation through Excel macros.

We created two macros that the mortgage product team could run on their existing CSV files before uploading to AEM. One macro automatically generates all the necessary tags based on product attributes. The other creates the correct call-to-action buttons depending on the customer journey. What previously took hours of manual work now happens in seconds.

For example, when a product is tagged as a "First Time Buyer" mortgage with a "95% loan-to-value" and "2-year fixed rate," the system knows exactly how to filter and display it. The macro reads the source data and writes the tag paths automatically:

media-and-content:product-finder/mortgages/buyer-type/ftb

media-and-content:product-finder/mortgages/ltv/95

media-and-content:product-finder/mortgages/mortgage-type/fixed

media-and-content:product-finder/mortgages/initial-period/2-years

This automation ensures consistency, reduces errors, and frees content authors to focus on what matters, helping customers understand their options.

Making it work

A mortgage finder is only useful if customers can find what they need. We built a filtering system that works across multiple dimensions:

• Buyer type: First-time buyers, home movers, remortgagers, buy-to-let investors

• Loan-to-value: From 60% to 95% in incremental steps

• Rate type: Fixed or tracker mortgages

• Initial period: 2, 3, 5, or 10-year terms

• Special offers: Fee savers, cashback, insurance discounts

The system understands relationships between filters. If a customer has a 80% loan-to-value ratio, the tool doesn't just show 80% products, it shows everything they're eligible for (80%, 85%, 90%, 95%). This "cascading filter" logic is optional and can be configured by authors to ensure customers see all their options without needing to understand complex lending criteria.

We also integrated a calculator that shows monthly repayments for each product. This isn't a separate tool, it reads data directly from the product entities and the customer's form inputs, calculating payments on the fly as they browse.

Building for authors

For content authors at HSBC, the Product Finder needed to fit into their existing workflows in Adobe Experience Manager.

We achieved this through comprehensive documentation and sensible defaults. The 32-page author guide I created walks through every scenario:

• Uploading CSV files to generate product entities

• Managing rate changes through the content generator

• Configuring filters, sorts, and calculations

• Handling edge cases like outdated products

The tool includes safeguards too. If someone tries to upload a CSV without the required tags, it fails gracefully with clear error messages. If product data is corrupted, the calculator displays a helpful error rather than breaking silently.

Most importantly, we made the system forgiving. The "outdated product" mechanism automatically tags products that have been removed from the source CSV, hiding them from customers while giving authors time to review and clean up. No panic, no emergency fixes, just sensible content management.

Accessibility and compliance

Throughout the build, accessibility and compliance were non negotiable. Every interactive element has proper ARIA labels. Screen reader text is dynamically generated to include product names - "View details for 2 Year Fixed Fee Saver" rather than just "View details."

The modal system for explaining mortgage terms is keyboard navigable and properly announced to assistive technologies. Filter states are communicated clearly. Loading states and error messages follow best practices.

We also built in governance. Products can only be published when they have complete, valid data. The tag schema enforces consistency. The form validation prevents impossible combinations (like a £5 million property with a £5,000 deposit).

What made it work

This project succeeded because we:

1. Designed for reusability: A product agnostic system that solves today's problem and anticipates tomorrow's needs

2. Automated the tedious: Excel macros that turn complex data management into a single click

3. Respected existing workflows: Integration with familiar tools rather than forcing new processes

4. Documented thoroughly: Clear guidance that empowers authors rather than creating dependency

5. Built in safeguards: Smart defaults and helpful errors that prevent problems before they start

The result

The Mortgage Product Finder is now live on HSBC's website. More importantly, it's maintainable. When rates change as they do frequently, the mortgage team updates their CSV, runs the macros, and uploads to AEM.

Content authors can configure new filters, adjust sorting options, and update messaging independently. The system scales to new product types without custom development. And customers get a fast, accessible tool that genuinely helps them make one of life's biggest financial decisions.

Sometimes the best solutions aren't about building something completely new. They're about understanding the problem, designing for the people who'll use it daily, and automating the bits that computers do better than humans.

Visit HSBC Mortgage Finder to see it in action. (Note: The live site may have evolved since this project was completed)