Barratt Homes.

The Work

I was contracting with Unrvld earlier this year, a Digital Agency that works across 5 continents with some big brands. During my time collaborating with them, I helped with a lot of the development work on one of two of their client’s new websites; Together Money and Barratt Homes.

Barratt Homes was receiving some enhancements, and in the process updating the provider that was powering the complex search functionality on their site.
I helped update components across their site, utilising Vue.js for those with more dynamic aspects. My primary work on Barratt Homes was to amend the search functionality to be powered by TravelTime instead of GoogleMaps

Our Collaboration

Contracting with an agency has some nice benefits; feeling part of a team, having designs given to you, someone else to take responsibility for organising all of the nitty bitty pieces.
That meant that all I had to focus on was the tech involved, the client requirements, building the website components and the complexity of switching API providers for the map powered search functionality.

What I worked on

I helped with some components for the BarrattHomes enhancement, working in concert with another developer called John.
Such as:

• Updated styling.
• Adding theming to components to work across sibling sites.
• Mobile iOS specific bug fixing.
• Switching the house search to be powered by TravelTime instead of GoogleMaps.
• Adding in an isochrome overlay to the map of house locations.
• Among others…

The Enhancement

Barratt Homes’s website was built around Sitecore’s Helix architecture. With the frontend dynamically loading only the relevant scripts and styles for those components that were on the page.

This lazyloading of appropriate elements ensured the website was fast and performant.

Built using a mixture of Vue.js, ES6, HTML5 and SCSS. It was a nice project to work on, taking some weeks of custom development.

The Switch

Switching the search API provider from GoogleMaps to TravelTime was a complex code change, that – due to the live and high profile nature of the client – necessitated fallback functionality and the ability to easily rollback the change.

TravelTime’s API was very easy to work with, and their documentation is simple to navigate and well presented.
In practice, the results returned faster, with more specific information and allowed for more flexibility in the implementation.

Allowing to search by travel time duration, method, time of day, and returning an isochrome of coordinates to overlay on the area map that would visually present the area covered.

How this benefitted Barratt Homes

Enhancing existing componentsto use modern frameworks and switiching to TravelTime took a lot of custom development time. However it also came with a lot of benefits for the client.
Allowing for use of more performant scripting and styling on the frontend. Such as JavaScript ES6, and Vue.js which is great for creating user interfaces.
This ensured:

• Themeable components to reuse across their sibling sites, benefitting from consistent branding.
• Modern functionality with all the advantages and speed that such frameworks bring.
• Reusable dynamic components.
• Complex and unique search functionality.
  • Returning homes within the search radius of the user’s location, postcode, town or address..
  • Helping visitors to know exactly what homes BarrattHomes had that matched their criteria.
  • Giving a clear indication of what where these homes were and how far they were from the search area.