The Brief
01
Halfords wanted a single-page JavaScript web application that compared the lifetime cost of ownership of a range of electric vehicles, with a range of conventionally fuelled equivalents.
The logic and associated figures had been produced as a complex Excel document, using multiple sheets and calculations to first work out the cost of ownership, covering purchase price, fuel, insurance and taxes.
The single-page application was required to sit within a pre-existing web page, independent of the host site.
Building with React
The solution was to create a custom web app using React JavaScript. We first translated the various functions used for the different calculations from Excel formula syntax into JavaScript and also converted all of the data into a JSON format.This meant that the figures could be easily updated, or new vehicles added.
We created a design using Adobe XD which was used to test and refine a UX, which while having a number of variable options within the interface, had to be extremely easy to use, and fit within a mobile screen design.
02
The result
Building this app in React was a smart choice as it allowed us to take advantage of some of React’s key features, such as its component-based architecture and the Virtual DOM, to provide high application speed and performance and ultimately create a smoother user experience.
With the design signed off, and a beautifully hand coded web app created, it was supplied to the technical team within Halfords for upload into their website.
