T Jefford Landscaping Budget Checker

During consultations with T Jefford Landscaping to elicit requirements and scope out deliverables for the Website Design & Build, one of the problems that was raised was relating to the significant resource required to review requests from potential customers. This involved speaking with customers and returning emails in an effort to establish what work was required to support with creating an accurate estimate for the work and then progressing onto approving the estimates with the customer so that their projects could be scheduled in with the team. We saw that there was an opportunity to design and develop a solution to this problem that would provide a more dynamic way for T Jefford Landscaping customers and clients to better understand the estimated cost of their desired personal projects which would result in stronger leads and better manage their expectations. The proposed solution was the Estimate Checker.

The challenge was to create an easy user journey for T Jefford Landscaping customers and clients to build up a project by allowing them to dynamically select the different products and services that their projects required. We needed to be able to provide clear options to the user and display an accurate estimation of the costs of their desired projects, while also helping T Jefford Landscaping to better triage their leads. The ultimate aim was to reduce the time spent creating bespoke estimates for site visitors who don’t have the budget for the projects that they are enquiring about.

The aim of this project was to:

T Jeffords Landscaping offers six main services that we had to integrate in the Budget Checker, with each of them having multiple subcategories. Each of the products/services that can be selected have a representative image.

Rather than getting an approximate price for each product/service and making the user calculate the total themselves, we designed it in such a way that the user can mix and match the products/services they need an estimate for and the total would update dynamically.

The budget checker is formed of three main columns that are always visible. The left column shows an overview of the products/services. Once a product/service is selected, the 2nd column becomes active and the user is presented with further relevant options, for example the user has the option to choose a further subcategory and enter the needed size or quantity. The price is then calculated instantaneously and presented in the 3rd column – the total estimate will update when the user repeats the process by adding new products/services as per the requirements of their desired project.

For users checking their budget on the mobile, they can see one column at a time with an option to switch tabs to their budget overview, which would usually be the 3rd column on the web.

For this project we decided to use a Gatsby & ReactJS Combination over a standalone WordPress build – there were a number of reasons why we thought this project would benefit from this integration over the standard WordPress build…

The main reason for using React is because it’s fast – really fast! The Budget Checker is a one page website that relies on multiple state changes which can all be done in milliseconds. If we were to build the budget checker in PHP, we would have had to use a lot of AJAX calls. This can result in delays between actions, depending on the amount of work each AJAX call has to do. You don’t have this issue with React, so users will experience seamless updates to the calculated estimated total as they add products/services to their project in the Budget Checker.

Another reason was the modular/component based structure of React. Whilst WordPress is slowly progressing towards a more modular/block based system with Gutenberg, you’ll never quite be able to have 100% control over each and every component. With React, you build the components you want and build in all the possible options that component may need in future. Then all you have to do is call the component where you wish to use it. This makes implementing site wide changes significantly easier, as we update one component instead of having to go on every page to change the Gutenberg blocks.

One downside to React was how static the output is – the page once built is the page. That’s why we combined it with Gatsby, GraphQL and Advanced Custom Fields. This means that every service, question, price and image is editable in WordPress and will reflect on the Budget Checker. It was important to us that the client still had the ability to edit all aspects as if it was a regular WordPress website, and with these three integrations, we achieved that.

The opportunity to build on our fundamentals of React for a real client was really exciting. There were some parts of the build that were very challenging and took quite a few iterations to get working, but this is exactly what makes projects interesting and enjoyable, as there is a great sense of accomplishment that comes with successfully applying solutions to difficult problems and learning new ways to adapt and overcome issues.

Due to it being our first client facing project utilising React, we also sought out to get our code peer-reviewed by an experienced and reputable React development company to ensure we had coded everything in the most efficient way possible. Through this collaboration and review, we could validate our thinking and further improve and embed our understanding of React , by sharing in the more established experience of our peers.

After a review there were very minimal changes suggested, though the final product worked perfectly for the clients’ needs. We did rewrite some sections in order to be more efficient and ensure it was scalable in order to future proof for any potential future requirements.

We started with an initial brief from T Jefford Landscaping detailing the problems they were experiencing regarding efficiency of triaging leads from customers and offering clear indications of prospective estimated costs for desired projects. Through careful and considered collaboration with our client, we saw an opportunity to solve this problem by designing and developing a Budget Checker platform that would not only provide T Jefford Landscaping with the improved efficiencies that they desired, but also provide a more engaging, clear and dynamic experience to users / potential clients. This Budget Checker, in tandem with the newly designed and developed Website, helps to champion and give a clear indication as to the quality services that T Jefford Landscaping can provide. This significant update has successfully helped to showcase the true scope and abilities of T Jefford Landscaping.

The finished product offers a modern look and an intuitive feel, allowing users to quickly and easily build up the project of their dreams, seamlessly selecting from the extensive products and services, providing a clear and accurate estimation of proposed costs so users can effectively consider their budgets. The Budget Checker also provides further details on available products and services and updates the estimated total dynamically, so users can quickly alter and make tweaks in order to fit with their budget.

This will result not only in an improved user experience across all demographics, but provide T Jefford Landscaping with stronger leads helping them to streamline their efforts and return communications with prospective clients and therefore more efficiently schedule in projects.

From an internal perspective, being presented with an opportunity to apply our Development Team’s experience with using React to build the solution was a significant benefit and something that they were incredibly interested in taking advantage of. Our Development Team also managed to capture all of the biggest benefits that came with using a React solution without having to compromise on the customisability and control the client has over editing and updating the content in future.