40
4.8
40

Atmospheric lead-generation site for US Mortgage Company

Product details:

Frontend dev
Webflow
Web design
Management
Backend dev
Apr 2021
 – 
Nov 2021
ongoing
568.47
 hours spent

Project scope

We were faced with the non-trivial task of creating a gamified lead generation website for one of the biggest mortgage companies in America called Fairway.

Inside this website the following interactive elements and functions should have been implemented:

  1. slider with the team, and their contacts
  2. individual landing page for each agent
  3. mortgage calculator with the ability to change the type of property and interest rate
  4. download a branded report in PDF format by email
  5. answer questions via FAQ
  6. demonstrate company awards
  7. provide information about restaurants, delivery, and moving services available near the user
  8. display reviews provided through Google Reviews
  9. create a hybrid mortgage quiz
  10. create pages with multi-format educational content
Choosing the property type of the mortgage calculator page

The customer provided us with:

  • company branding
  • team photos
  • educational materials
  • site page structure in Google Docs.

Solution

To develop a site of this scale, we needed to work out the skeleton of the site and all the sections and elements interconnected with each other in as much detail as possible. We created a sitemap in Figma and, using employer-provided Google Doc content, developed a prototype.

Fairway's branding was quite traditional and classic. It was developed many years ago, which is why some elements looked outdated. We needed to work on the font combinations and also modernize the colors a little so that they would look fresh and relevant on the website being created.

UI kit part. Based on the updated branding

We suggested lightening the company's green color slightly and making the blue deeper, which would allow for impressive contrasts in the user interface. It was proposed to use the sans-serif font Poppins as the main font on the site, as it was very easy to read, neat, looked reliable, and modern.

After demonstrating Fairway's updated branding, we received approval and were able to move forward with creating the user interface for the site's home page.

Homepage Hero Screen

In visuals, as well as interactive interface elements, we decided to use thin contour lines that created a friendly and playful atmosphere. We prepared illustrations of different types of houses and their surroundings created from scratch and also animated them in After Effects. In addition, we created interesting animations of fireworks that were played on the site after clicking on any company award.

Awards section with dynamic text animation
Mortgage Dynamic Calculator with PDF generation function

To enhance the gamification effect and maximize user immersion in the process of interacting with the site, we decided to place some audio effects that were triggered when buttons and other interactive elements were clicked. The user also had the option to turn on background music, which our test group associated with The Sims.

We used Webflow to build this site, incorporating third-party code to add features such as a mortgage calculator with the ability to send a branded calculation via email (lead magnet), syncing of reviews with Google Reviews, and showcasing local services through Yelp linked to IP location, and others.

Google reviews slider

The mortgage calculator included a step-by-step tutorial to guide users through the process of obtaining a realistic calculation of their monthly payment for a desired property. Depending on the type of real estate selected, existing privileges (such as being an army veteran or first-time homebuyer), and the property's cost, the real estate illustration would dynamically change. For example, if the user was a veteran, an American flag would appear on the house illustration. If the user was a first-time homebuyer, boxes for moving would be displayed. Additionally, the home's image would become more premium as the property's value increased.

Opened calculator with dynamic illustrations that change based on the calculated parameters

The hybrid quiz offered various user-flow options based on the user's answers. If a user accessed the quiz on their mortgage agent's recommendation, they would be prompted to fill out a mortgage application. If the user discovered the site independently, additional data would be collected for future transfer to a free agent.

Hybrid quiz flow

Furthermore, if a potential client accessed the quiz page directly from an agent's page, all subsequent data entered would be exclusively sent to that agent. This ensured that any lead accessing the quiz through a mortgage agent's personal marketing would be assigned to that agent and not redirected elsewhere.

Personal mortgage agent page
Educational materials

The following types of educational materials were used on the site: articles, videos, quotes, and podcasts. For the presentation of each type of material, we prepared unique pages, and all data was stored on a third-party server. They were displayed on Webflow pages through a special linking system created in CSV format.

Educational module page

Technology

In the design process, we utilized applications such as Miro, Figma, Adobe Illustrator, and Adobe After Effects. Webflow served as our development technology, complemented by custom JS, HTML, CSS, and PHP code. Data transfer from third-party services was achieved by connecting a specific service and Webflow via API.

Easter eggs

We are fans of high attention to detail. In this project, we included 2 nice "easter-eggs".

  1. You can "buy" a house by clicking on the "for sale" banner on the hero screen.
  2. You can make the cat, that lying on the roof to "Mew" if you click on it.

Try to find these cool stuff on the site by yourself 😊

Cat and banner "easter egg"

Awards

Let us know about your project

Error message
This is some text inside of a div block.
This is some text inside of a div block.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Designed with Loyalty and Passion

Explore more works that made with loyalty

TorchSensors.com

We built a site for a marketing campaign to accept pre-orders for a fire prevention sensor in a 1.5 month. And within the 1st day of its launch, we received an overwhelming number of pre-orders for the product.

Ockom.co

We designed a cybersecurity company's website with effective mood-setting features like immersive 3D, animations and clean UI. The result was positive reviews and Awwwards recognition.