Mortgage Calculators

About the project

Mutual of Omaha Mortgage is a national mortgage lender. Its website serves borrowers and a network of loan officers and branches.

The site's calculators came from a third-party vendor. I replaced them with a full suite of custom WordPress calculator plugins that we own and can change whenever we need to. I handled the design, front-end development, and plugin packaging.

What wasn't working

The calculators worked, but we didn't control them.

• Calculators failing to load: Our site cache kept causing the vendor calculators to not load properly on the loan officer pages. We couldn't fix it ourselves because the code wasn't ours.
• Waiting on support: Any change or fix meant opening a support ticket with the vendor and waiting for a response.
• No customization on secondary sites: We couldn't customize each calculator for our secondary sites.
• Script dependency: The calculators loaded via script instead of running as part of our own site.

The approach

I built our own calculator suite as WordPress plugins.

• A full suite of eight calculators, up from three: Refinance, Home Affordability, Loan Payment, Mortgage Comparison, Home Equity, Amortization, Interest-Only, and Debt-to-Income.
• Fully owned code: We can update the interface, logic, and copy on our own schedule, with no support tickets, and add new calculators when the business needs them.
• Customizable per site: Each calculator can be adjusted for the site it runs on, including our secondary sites.
• Runs as part of our site: The plugins load as site code instead of a third-party script, and they load faster.
• Brand match: Styling follows the Mutual Mortgage brand system one-to-one.
• Reusable: The plugins install on any WordPress site in the business' portfolio.

How it came together

• Inventory the vendor calculators: I listed the three vendor calculators (Home Affordability, Loan Payment, and Refinance), what each did, and where they were used.
• Expand the suite: The team decided on adding five calculators beyond those three: Home Equity, Mortgage Comparison, Amortization, Interest-Only, and Debt-to-Income.
• Define the math: I wrote out the inputs and formulas, and designed the interface.
• Design a shared system: I built common styles and components so every calculator looks and behaves the same way.
• Build as plugins: I built each calculator on its own, with prefixed classes and scoped scripts.
• Review the math: Our team reviewed and verified the calculations.
• Test: We tested each plugin against the theme and other active plugins.
• Launch together: All eight calculators launched at the same time, replacing the vendor calculators.

Bumps along the way

• Matching the numbers: Eight calculators means eight sets of formulas, from amortization schedules to debt-to-income ratios. Every result has to line up with what a loan officer would quote.
• Consistency across the suite: Every calculator needed to share one look and one set of behaviors.
• Style and script collisions: The calculators had to run inside WordPress without inheriting or overriding other styles. Prefixing every class and scoping the scripts solved that.
• Replacing everything at once: Launching eight calculators together meant every one had to be right before going live. I tested in a staging environment first.

The finished calculators

• A suite of eight calculator plugins: Refinance, Home Affordability, Loan Payment, Mortgage Comparison, Home Equity, Amortization, Interest-Only, and Debt-to-Income.
• Namespaced code that runs cleanly on the Mutual Mortgage site.
• Brand-matched styling, responsive on mobile.
• Plugins that can be reused on other sites in the business' portfolio.

The impact

• The calculator suite grew from three vendor calculators to eight of our own.
• The calculators load faster than third-party scripts.
• No more vendor cost.
• No more support tickets or waiting on a vendor to change a calculator.
• Each calculator can now be customized per site.

What I learned

• Build a shared system first. Common styles and components keep a suite consistent and make each new calculator faster.
• Prefix everything. Namespaced classes prevent most front-end conflicts inside WordPress.
• Owning one of the most important tools on the site makes it easier to debug.