Flatfinder

When marketing real estate projects a standard feature is the flatfinder where the prospective buyer can find information about all residences in the project and see where they are in relation to the surroundings. I have designed and developed this product from scratch through several iterations. It is currently built with a Vue.js front end and data stored in WordPress, but previous iterations was built using jQuery and PHP. It is fully responsive and accessible.

A typical implementation is for a series of apartments in several buildings. The user will be met with an overview of the project with an aerial 3D-illustration and all the residences in the project. The user can then either select a residence directly to find out more about that specific residence or select a building to view only those and see where each apartment is in that building. By default residences are shown in a list sorted alphabetically, but the user can change to a card view and change the sorting and hide everything not currently for sale.

Adaptability

The flatfinder is meant to be used on several websites with different branding and layout. This means that the product itself has a neutral design while being open to accept typography and colours from the current website. The layout is similar wherever it is used with a top navigation, (3D-)illustration on the left and a list of residences on the left on desktop or everything in one column on mobile.

Components

Various clients have had different requests such as being able to calculate and show what the monthly costs will be for the different residences depending on how much money the buyer has and how much they need to borrow. This request resulted in a calculator we can choose to activate on project where our clients want to show that information. Currently it is active on a few websites, and will be active on future implementations.

Another feature request was to let the user select various upgrades, such as nicer floors, different tiles, extra parking, etc. in the residence and update the total price. This let the user directly see how much it would cost them to upgrade something which would better let them understand whether or not they could really afford the current residence with the level of comfort they would want. Currently no active projects have this feature enabled, but it has been used in production on several occasions.