Hamari

MylocalMortgage
powered byMylocalMortgage

A mortgage brokerage directory business tasked us to help them with their technology stack

MylocalMortgage

Topics Covered

strategy
integration
elastic search
implementation
seo strategy
master data management
Development
headless
WEBSITE REPLATFORMING

The challenge

Mylocalmortgage - a mortgage brokerage directory business tasked us to help them with their technology stack. They had outgrown their implementation of wordpress. They were limited in terms of their technology. The search functionality was incredibly slow. The website was not ranking well on Google against its competitors. They had no way on their existing system to manage their data quality. We were brought on board to help them address a number of these challenges.

MylocalMortgage

THE BRAND

MyLocalMortgage is a quick, easy and free way to connect with a local mortgage specialist. Simply pop in your postcode to see mortgage advisors covering your area, then book a free consultation at the click of a button. With over 2,000 UK mortgage specialists, finding the right local expert has never been easier.

The Strategy

The website needed a fresh re-brand, and there were a number of challenges requiring to be tackled via the migration. Firstly, we needed a consistent way to manage the data. We decided to look at implementing a strong master data management tool for the brokerage listings in order to help them achieve their goals surrounding data quality management. For this reason we decided to choose Pimcore as it is a leader within the MDM space. 

From a front end perspective we wanted to make sure that the website is fast, secure and powerful. For this reason we chose Gatsby JS, a react-based open source framework. Pimcore would power the web content management via the GraphQL engine and this would be coupled with a separate front end application built by the static site generator offered by Gatsby. 

Regarding search, the website was previously using a SQL query but as the database of mortgage brokers had grown over time, the search experience had severely slowed down. Some searches were now taking around 10 seconds to load. It now made sense to replace this with a powerful search database like ElasticSearch.

For hosting Pimcore, we decided to use the latest cloud technologies offered by AWS. We utilized Docker for containerizing the Pimcore application and hosting it via AWS EC2 instances. For the ElasticSearch implementation we used AWS’s Opensearch platform which would be responsible for the geo-based search and faceted navigation for the different type of mortgage brokers. For hosting the front end - we decided to focus on the developer experience and Netlify was chosen as a tier2 hosting provider.

The re-brand was crafted by our partner agency - Statuo. We ensured that the new website had a great user experience. We also ensured that the SEO strategy worked and we weren’t losing any of the organic traffic and rankings the business had built up over time. We worked on a redirecting strategy to ensure that the traffic that had been built up over time is lost during the migration of the project.

MylocalMortgage

Master Data Management Pimcore Implementation

  • Defined the data model
  • Define the data import strategy
  • Define data validations and governance
  • Roles and permissions for different users

We first defined it in the data model in Pimcore. Each mortgage broker had a name, company name, a short description about their mortgage practice, a checklist which confirmed their specialist areas such as first time buyer mortgages, buy to let mortgages or if they were commercial finance brokers. We then set their location,  the qualifications they had acquired, their FCA registration number, and the regulations that they followed. We also collected their email address and their phone number. We also set a number of data validations to ensure that new mortgage brokers followed certain guidelines. We then wrote a php script which exported the existing data from the old website into a CSV file. The Pimcore data importer allowed us to adjust the existing fields in the CSV file to the Pimcore Data Objects which had been configured without writing any code. From a data governance perspective we used Pimcore’s roles and permissions feature to ensure that only certain staff members within My Local Mortgage had access to the relevant data. 

MylocalMortgage

Front End Development with Gatsby JS

As we’d decided to build a decoupled front end application. We now needed to ensure that we were using a highly performant javascript framework which excelled in a range of areas. After research a number of these frameworks we ultimately decided to stick with Gatsby JS. 

  • Performance: GatsbyJS allowed us to create static pages from our content model, leading to incredibly fast page load times. For a local mortgage website, this meant visitors could quickly access information around mortgage brokers without delays.

  • SEO-friendly: Out-of-the-box, Gatsby aids SEO with fast performance, semantic HTML tags, and easy integration with plugins. A higher SEO ranking would help position Mylocalmortgage business ahead of competitors in search results.

  • Rich Plugin Ecosystem: Gatsby’s plugin system allows easy integration with various software and building functionality required for the site. Such as the Gatsby-Plugin-Sitemap which allowed us to create a sitemap for the website.

  • Security: By serving static files, Gatsby reduces the number of server-side processes, reducing the surface area for attacks. This was vital for Mylocalmortgage, which handles sensitive customer data relating to their personal mortgages.

  • Content Aggregation: Gatsby allowed us to pull in data from various sources using its GraphQL layer. For integrating data from Pimcore, Elastic Search and Google Maps APIs into a unified platform.

ElasticSearch Integration

The previous website was taking around 10 seconds to load which resulted in a high abandonment rate. This needed to be 

MylocalMortgage

PAGE SPEED OPTIMIZATIONS

  • We used Gatsby-Plugin-React - which Provides drop-in support for replacing React with Preact. While Preact doesn't provide full support for the React ecosystem,this helped the site save Gatsby sites as it saves ~30kb of JavaScript vs. using React.
  • Removed unused CSS
  • We introduced image thumbnailing in Pimcore. Our image pipeline converted images to WebP format - as Google’s recommendation is to serve images in next-gen format
  • Delayed slow data request until after page load
  • Reduce the amount of font request 
  • Fixed CLS issue on the area pages. - How? (preloading images, setting the width and height of the images)
  • GatsbyJS allowed us to create static pages from our content model. 
  • We delayed third party scripts such as Google tag manager.

TECHNICAL SEO STRATEGY

  • Ensured that all images had alt text

  • Added title tags to all pages

  • Set up redirects from the old WordPress website URLs using 301 redirects

  • We set up internal linking throughout the website - provide examples

  • Fixed any duplicate content issues the website was facing

  • Made sure all pages were mobile-friendly

  • We generated a sitemap which would allow our website to be crawled by Google more efficiently. https://mylocalmortgage.co.uk/sitemap/sitemap-0.xml

  • Made sure that all pages were mobile-friendly.

  • For pages we no longer wanted to rank we added a robots.txt file

in their own words

I’d have no hesitancy whatsoever in recommending Hamari to any brand looking for Pimcore development or integration, they did an excellent job with the system development, and they made easy work of an extremely complex data management project. Outside of the quality of output from the team, I feel there are two things that make Hamari stand out as a technology partner. We’ve found that Hamari act as a true partner, and they show the same level of care as we’d expect from an in-house tech team. This materialises as a team that are always willing to jump on issues, and go above and beyond to make sure projects are delivered. I’ve always found Hamari to think bigger than the task at hand, and they regularly brings new ideas to the table that provide solutions to much broader business objectives or challenges. This is something we have come to really value as a partner, as we know Hamari are thinking about our overall business objectives rather than just taking instruction on development tasks.
David Ingram, Founder of Mylocalmortgage

Fluent Mortgage Integration

We developed a custom API integration from Pimcore to Fluent Mortgages API via a REST Service. This would ensure that when a lead is generated it would be passed on to Fluent.

Result

The new website built by Hamari passed core web vitals.

MylocalMortgage