Barratt Homes.

Site Enhancement • Vue.js • Development • 2022

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…
☝️  Barratt Home’s home page.

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.
☝️  Barratt Homes’ search in action.
Position
  • Web Developer
Org
  • Contract via Unrvld
Year
  • 2022
Work
  • Website Enhancement
  • Front-end development
  • Vue.js components
  • JavaScript ES6
  • Custom coding & styling
  • Dynamic APIs & data for complex location search
Visit the Website
Barratt Homes

Process

Good design is a journey of understanding.
My aim is to create a website that helps you to reach your goals & provide real measurable value.

Each project begins by learning as much as I can about your needs & business, in order to get a crystal clear picture of issues your users may be facing and an insight into how to ensure your site performs.

I want to identify your goals, along with where your needs are not being met. This allows me to help to get you where you want to be.

Using this research as a solid foundation, we can move fowards, confident that the site we build together will give you the results you’re hoping for.

Attention to detail is key, which I combine with a results-driven approach when designing my client’s websites.

Bringing an understanding of good design principles, I ensure your website not only looks good, it’s also a pleasure to use – helping it to outperform your competitors.

I prioritise performance & stability in every website that I build as a freelance web designer, as I know how important it is to you that it functions as well as it looks!

Want to have control of your own content? No problem, I primarily work with WordPress; providing clients with a simple & intuitive way to manage your website.

Taking care of your investment is super important! I offer a range of flexible website maintenance packages solely designed to ensure your new website is secure & backed up.

If you’re thinking of making iterative updates to your site and improving it over time, you’ll definitely want this.

Have a project in mind?

Let’s find out how I can help you.

Scroll to Top