Spitfire Homes: Behind the Build

During our discovery phase for the project, we noticed that search functionality across a number of homebuilders had not been updated in years and added a lot of friction to the user experience. This is a core feature that the user is likely to interact with first when landing on a homebuilder’s website. They could be leisurely browsing a new area they’d like to move to or see what’s being built within a certain radius of their location.

Our approach to search for Spitfire Homes was to make sure it was easy to use, super fast and easy to edit – allowing the user to easily filter by bedrooms, price and house type almost instantly without having to submit a new search. To achieve this, we implemented state management techniques and re-rendering based on a users’ input and interaction. This approach also means the page doesn’t need to reload every time a filter is updated.

One of the challenges we had was allowing a user to search and search/find a development within a specific location by distance, but at the same time, show developments just outside of their search distance, on the chance they might be willing to move a little further. To do this, we created an autocomplete search box as part of the “Find Your Home” journey, and selected an API that would help facilitate this.

The Autocomplete API Product from Google allowed us to receive a list of accurate postcode/address/region results based on a user keystroke, which we translated it into a user friendly ‘live’ search box component that is used throughout the “Find Your Home” journey. Another API call is also made to Google Places API once the user has selected their desired address/location for the “Find Your Home” search. This API call returns geographical coordinates to power the development listing in order of distance from the user.

Similarly to the Places API – a geolocation button was also implemented to allow a user to search from their current location. This is powered by HTML5’s Geolocation API in which the browser requests permission for a user’s geolocation over a secure https website and returns an accurate longitude and latitude coordinates of a user’s location.

Once the location of a user has been gathered through the autocomplete feature or GeoLocation button – our backend query determines the nearest developments for the user. Our front-end web app then uses this data to display a clean, fast interactive development listing – allowing the user to at any point change the parameters and filters to update the search almost instantly.

The development listing includes an Interactive Map also powered by Google’s Map Product.

If you’re trying to create the best possible search experience for your customers, no matter what industry you operate in, we have a range of experience, using the latest technology to achieve this.