ModaMortgages

Launching a smarter, faster, simpler mortgage brand.

Client: ModaMortgages
Date: November 2023
Services: UI, UX
:

Overview

Moda Mortgages is a brand new specialist lender created specifically for the buy-to-let market. Designed with brokers and landlords in mind, the brand was set up to offer a fresh, modern take on buy-to-let lending.

This was my first solo project as part of the Chetwood UX team to help shape the online experience for Moda from the ground-up. This wasn’t just about creating a nice looking website. It was about building something that brokers would genuinely want to use. Our goal was to make it easy for them to find the information they needed, get quick decisions, and ultimately feel confident putting their clients with Moda.

Because Moda was launching into a busy and competitive market, we knew the experience had to stand out. We also had to balance two things at once: helping brokers with their day-to-day tasks and bringing Moda’s new brand personality to life online. This was a chance to help build a lender’s reputation right from day one.

I worked across several key areas of the launch, from shaping the site’s structure and navigation to refining the journeys for product selection and application. Along the way I collaborated closely with development, marketing, and the wider mortgages team to make sure what we were designing wasn’t just useful. It also had to be achievable within our timelines and work for the business too.

A Smarter. Faster. Simpler solution

From the very start, everything we designed was centred around two key groups: brokers and buy-to-let landlords. Brokers were the main focus, because they’re the ones recommending lenders to their clients. If we could build something that made their working lives easier, we’d be giving Moda a real advantage in a competitive market.

Landlords were also an important part of the picture. They needed to feel confident that Moda could help them grow their property portfolios and manage their investments properly. Even though brokers were our main audience, we knew that landlords would often be checking out the website themselves before deciding whether to go ahead.

These two audiences had slightly different needs, but one thing was consistent. They both wanted clear, no-nonsense information. They didn’t have time to wade through jargon or get lost in complicated processes. That’s where Moda’s brand promise came in. The tagline “Smarter. Faster. Simpler.” became the thread that tied everything together. Every part of the user experience had to reflect that. If something wasn’t smart, fast or simple, it wasn’t right for Moda.

Having that clear focus on brokers and landlords helped us make better decisions throughout the project. Whenever we faced tricky choices about content, journeys or features, we kept coming back to one question. Does this help a busy broker get what they need quickly, or help a landlord feel confident they’re in safe hands? If it didn’t, we reworked it until it did.

These two audiences had slightly different needs, but one thing was consistent. They both wanted clear, no-nonsense information. They didn’t have time to wade through jargon or get lost in complicated processes. That’s where Moda’s brand promise came in. The tagline “Smarter. Faster. Simpler.” became the thread that tied everything together. Every part of the user experience had to reflect that. If something wasn’t smart, fast or simple, it wasn’t right for Moda.

Having that clear focus on brokers and landlords helped us make better decisions throughout the project. Whenever we faced tricky choices about content, journeys or features, we kept coming back to one question. Does this help a busy broker get what they need quickly, or help a landlord feel confident they’re in safe hands? If it didn’t, we reworked it until it did.

Personas

One of the key outcomes from our early research was the creation of a set of personas. These were quite long and detailed and proved to be efficient tools that helped us keep real users front of mind throughout the project.

Joe, the teacher.
Sunjay, the company director.

By speaking to brokers and researching the wider buy-to-let market, we built up a picture of the different types of people who would be using the site. These personas captured their goals, frustrations and what they really cared about when choosing a lender. Some were experienced brokers who already had trusted relationships with lenders. Others were newer to the market and looking for guidance on how to grow their client base.

Having these personas gave us a clear sense of direction. It helped us make better decisions about the site’s content, structure and features. If something didn’t work for the people we’d defined in our research, it didn’t make it into the final designs.

… but first, the Lead Gen site

Before we could launch the full Moda Mortgages website, there was an important first step. We needed to build a smaller lead generation site to start creating awareness and interest in the brand. This was like a soft introduction to Moda, giving brokers a first look at who we were and what we stood for.

Partway through the work on the lead gen site, there was a brand refresh across Chetwood Financial. As part of that, we introduced the Hind typeface across all new digital work (except headers), along with an updated colour palette that aligned Moda more closely with the new Chetwood Bank brand.

This shift gave the site a more modern, consistent feel and helped us position Moda as part of something bigger, while still giving it a distinct personality in the buy-to-let market.

The lead gen site itself was simple but purposeful. It gave visitors a clear explanation of what Moda Mortgages was all about.

We introduced the brand, explained our focus on the buy-to-let market and made it clear what set us apart from other lenders. It also included an overview of Chetwood Financial, the parent company behind Moda. This helped add credibility, showing that while Moda was new, it was backed by an experienced team with a strong track record in financial services.

The initial ModaMortgages Lead Gen site.
The updated version.

Another important part of the lead gen site was introducing the people behind the brand. Brokers often want to know who they’re going to be dealing with, so we made sure to highlight key team members and decision makers. Finally, we included clear points of contact so interested brokers could get in touch and start building relationships with the team.

This first step gave Moda a chance to start talking to the market and build early connections while we worked behind the scenes to design and develop the full experience.

Before I joined the project, some of the early design work had already been started by the team. Once I got involved, I reviewed what had been done and started making adjustments to bring it in line with the new Chetwood Bank Design System we were creating for the wider business.

Crafting the experience

With the completion of the Lead Generate site, we knew that the next iteration of the ModaMortgages website had to be more than just a shop window. It needed to be a proper working tool for brokers. Brokers are busy people. They don’t have time to wade through jargon or wait around for answers. Everything we designed had to respect that and make their lives easier.

To keep things focused, we set three clear goals for the site. These acted as our guide for every decision we made, whether it was about design, content or functionality.

Our goals

After sifting through the user research, it was very clear that the brokers wanted 3 crucial things from the company:

  1. Immediate decisions on lending
  2. Lending criteria that wasn’t confusing
  3. Fast, multi-channel support

At the heart of the site was the buy-to-let calculator. This wasn’t just another tool hidden in a menu. It was the starting point for most brokers. The aim was to give them an immediate sense of whether Moda could lend on a particular case. If the answer was no, we told them straight away. If it was a yes, they could keep moving forward with confidence.

The ability to generate a DIP (Decision In Principle) was not on the roadmap for this particular release of ModaMortgages, but something that could potentially be integrated further down the line.

Brokers need the details, but they don’t need a wall of text. While the actual lending criteria copy would be worked on by the marketing and mortgage teams, we hypothesise ways we could present the lending criteria in a way that was structured and easy to scan. No jargon, no unnecessary steps, just the key facts they needed to help their clients.

Even with good tools and clear information, we knew that brokers value personal relationships with lenders. The site needed to help build that trust by offering quick access to real people when brokers wanted that extra bit of help. With this we needed to display:

  • A dedicated phone number
  • An email address
  • A live chat
  • Individual contact details for the relative brokers

These three goals helped shape every part of the experience and made sure that Moda’s promise of being smarter, faster and simpler wasn’t just a tagline, but something brokers could actually feel when they used the site.

The buy-to-let calculator

One of the most important parts of the project was getting the buy-to-let calculator right. This was going to be the first stop for most brokers visiting the site, so it needed to be simple, quick and easy to use. We spent time carefully reviewing the journey and making sure every step felt as streamlined as possible.

The process we landed on was clear and focused on what brokers really needed. It started with a straightforward first step: selecting a product from Moda’s list of available buy-to-let products. This proved a bit of a tricky challenge as the product card had to present a lot of important information in a relatively small space without overwhelming the user.

At first glance, brokers needed to see the headline details straight away, such as the product type, rate and term. We also built in the option to expand the card to reveal the full product criteria underneath. Getting the balance right between simplicity and detail was a big focus, and we worked carefully to make sure the expanded view felt clear, easy to scan and helpful.

An early product card concept.
A more-refined version that was used for a while.
"Special" products were added to the roadmap, and had to be considered from a component level.

Next, they would fill in a short form with key details about their client. We kept this part deliberately light, only asking for the essentials so brokers could get to an answer quickly.

Once the details were submitted, the calculator gave an instant decision on whether Moda Mortgages could lend to that particular client. No waiting around, no uncertainty, just a clear, honest answer.

A wireframe of the buy-to-let calculator flow showing the various screens.

If the numbers didn’t quite work, but there was still a possible route forward, we introduced options for top slicing where relevant. This gave brokers alternative ways to make the deal work. The calculator also suggested other products the client might be eligible for, helping brokers explore other options without having to start again from scratch.

By simplifying the flow and focusing on speed, we gave brokers exactly what they needed: clarity, flexibility and confidence that Moda could help them get deals over the line.

Lending criteria

One of the other key parts of the site was the lending criteria. This was the section where we needed to be really clear about who Moda Mortgages would and wouldn’t lend to. We knew from our research that brokers didn’t want to waste time digging around for information or starting applications that were never going to work. The lending criteria had to be easy to navigate, quick to search and simple to understand.

We explored two main concepts for how to present this information:

A-Z bar

The first concept used an A-Z bar across the top of the page. Brokers could click on a letter and instantly jump to that section of the criteria, which was organised alphabetically. This approach worked well for brokers who already knew exactly what they were looking for.

The "fixed" variant of the A-Z bar.

There were actually two different variations of this particular component. One would have a the fixed A-Z header pinned to the very top of the user’s viewport as they scrolled down the page, allowing the user to jump from letter to letter without the need to scroll back up the page, or make use of the “back to top” button at the side of the design.

Category-based layout

The second concept broke the criteria down into separate categories, which in this case were Borrowers, Loans, Property and Other. Brokers could jump straight to the section they were interested in from a list at the top of the page. This made it easier for people who were newer to Moda or less familiar with exactly what they needed.

The "fixed" variant of the category concept.

The sub-categories would then be listed underneath, so that the user could easily select them and read the relevant content.

The ‘What’s new?’ component

To help build trust with brokers and keep them informed, we introduced a small but important feature on the Lending Criteria page called the ‘What’s new?’ component. This was an expandable section, sitting just below the page header, that gave a quick summary of any recent updates or changes to the lending criteria.

We knew how frustrating it can be for brokers to work with out-of-date information, so this component was all about reassurance. Right at the top of the page, brokers could expand the panel and see exactly what had been updated and when those changes were made. It meant they didn’t have to go digging through documents to work out what was new.

A wireframe of the "What's new?" component.

This feature helped show that the criteria were constantly reviewed and actively maintained. It gave brokers confidence that they were always working with the latest information, helping them make better, faster decisions for their clients. It was a small addition, but one that made a big difference to the overall experience.

Going “no-nonsense”

Right from the start, we made a conscious decision to keep the design of the site as simple and straightforward as possible. This was all about respecting the broker’s time. They didn’t need flashy animations or over-designed pages getting in the way of what they came to do. They wanted fast, clear answers and a smooth experience.

We avoided anything that might distract or slow things down.

A "mega menu" that I originally hypothesised.

Every decision we made was focused on helping brokers get to the information they needed quickly and easily. Clean layouts, clear calls to action and purposeful content all played a part in that.

It was a no-nonsense approach, designed to reflect Moda’s personality and the brand promise of being smarter, faster and simpler. The goal was to help brokers trust the site and get their work done without any unnecessary noise in the way.

Final output

The final version of the site brought together everything we had worked towards. It was simple, focused and built to make brokers’ lives easier. The buy-to-let calculator gave instant decisions, the lending criteria was clear and easy to search, and the whole experience felt professional but approachable.

When we put the site in front of brokers during user testing, the feedback was really positive.

The "Lending Criteria" page.
The simplified questions and calculator output.
The "Get In Touch" page with multiple contact points.

Brokers praised the clarity of the journeys and appreciated how easy it was to get the information they needed. The calculator in particular stood out, with many of them saying it saved them time and helped them feel more confident when putting cases forward.

Overall, the site achieved exactly what we set out to do. It gave Moda a strong digital presence from day one and helped position them as a serious, reliable lender in the buy-to-let market.