Mortgage Calculator Website

The Mortgage Calculator website allows users to input their mortgage principal, monthly interest rate (in decimal format), and repayment period (in years) to get an estimated value on what the monthly repayment cost will be. What inspired me to make this was I wanted to work on practicing my web design skill as well as having recently moved to a new house, the topic of mortgages surfaced and I decided, why not make a mortgage calculator!

The Mortgage Calculator Website is also available for download as open source software on my GitHub repository. You can check it out by clicking the button below.

• Visit Website
• Source Code

• Frontend Web Development

What I Did

Due to the simplicity of the mortgage calculator website, my goal was to keep the code as simple as possible while not relying on the use of Bootstrap. I also designed the website in Adobe Photoshop.

The Technology Stack

• HTML5
• CSS3
• Javascript

Challenges

The challenge I faced in this project was more design than technical. Originally I started out with a modern looking combination of red and white as the theme for this website; however, I later decided not to proceed with this approach since red usually means energetic and aggression, but could also mean anger, stress, and danger. Because mortgages are a form of bills, which most people hate to see, I decided to opt in for a more relaxed color. With that in mind, at first, I wanted to use blue, but I noticed I use blue in most of my projects, so I went with a shade of green which can represent peace.

As you can see above, I made 3 designs, the last two being the ones I actually implemented in the final product (v1.01 being the most recent update).

Design Concept v1.00

I determined that for a simple website, it would hurt the user experience to have them scroll down so I moved the FAQ section to the right of the hero section, resulting in a single viewport page design (while in desktop mode). By doing so, newcomers can also learn some of the terminology in the housing space. In mobile mode, it will automatically go below the calculator form.

Implementation wise, I created two class containers: left-container and right-container. The styles are then created accordingly along with the help of flexbox and grid displays in CSS. However, unlike my usual process, I went with a mobile first approach this time, so the widths started out as 100vw with a height of 100vh. I then created 2 media queries to handle the responsiveness: one for small displays and another for anything larger than a low resolution tablet.

Design Concept v1.01

A month later, I decided to change the design where the FAQ section is completely removed. The reason behind this has to do with the fact that people who would use this tool the most are those who are returning buyers, so that means they would already be familiar with these terms. This would result in precious screen real estate being used up and providing no value for the returning users.

By doing this, opting in for a full screen design allows the user to focus on the objective at hand plus the elements are less constricted and is able to use the whitespace better. Thus, a better user experience is achieved.

What I Would Do Differently

If I were to redo this design or improve upon it, I would probably keep the FAQ section but it would still be a single viewport design. How I would go about doing this is I would create a link or a (?) icon where users can click on it, and a popup modal will show. In this modal is where the FAQs will be located at.