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…
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.
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 HomesProcess
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.