As a first step, we studied the mortgage calculator that they had in Excel and created the technical specifications based on it, which the client confirmed. This way we were sure that implemented solution would meet the client’s needs and expectations.
Next, we created the wireframes and built a clickable prototype with them. This way it was possible to show how the solution will work on the website. The solution consists of a multi-step process with data inputs and the results page.
When the prototype was confirmed, we moved to the design phase. The client already had a website, so it was decided to use its visual identity. We implemented the visual guides in Figma and applied them to the wireframes. We made designs for desktop and mobile since a lot of traffic on the client’s website was from mobile devices.
There was an address field, which utilized Google services to create predictive address searches. At the end of the calculations we placed calls to action with Calendly integration, so it is convenient for the customer to book a call right away.
This way the user experience of the process was drastically improved. Before our solution, the user should have requested the calculations and the Excel was sent to the email with the instructions. With our solution, users can start the calculations right away and contact the client after.