Cover image for A&D Demolition
Work

A&D Demolition

The latest home app, powered by CH5 and Crestron.

Design and Development
Roles

Design and development

Tools

GatsbyJS, Figma

A&D Demolition is specialized in demolition and asbestos removal. In the last few years, their site had become progressively slower and reliant on less relevant web technologies, resulting in traffic drops and occasional accessibility-related complaints. I was tasked with designing and developing the newest iteration of A&D Demolition’s website, ensuring a favourable level of performance and increasing customer engagement.

The need for better engagement

The most prominent method of communication on the old site was through contact forms, email and phone. The noticeable noticeable drop in site performance meant that more users were likely to never reach the contact page as the site took about ten seconds on average to fully load.

Based on A&D Demolition’s reports, the non-spontaneous method of communication made correspondence unnecessarily lengthy as many people reached out via email.

As customers contacted multiple companies to compare estimates, by the time A&D Demolition sent out the first reply to potential customers, some of them had already changed their mind, or in other cases, A&D Demolition was unable to find a time slot as they were involved in other projects.

I suggested implementing a chat feature that would allow an instantaneous and responsive communication. Using Facebook Messenger’s API, I added a customer chat feature which greets users, allowing users to contact A&D Demolition instantly.

Messenger's chat plugin.

Messenger’s chat plugin was used to allow for instant interaction with clients.

A&D Demolition also received many spam emails as their contact form did not have a spam filtering system. This issue was addressed by using Netlify Forms, which uses Akismet and other methods such as Honeypot fields to detect bots and spam messages.

After a month-long trial period, this resulted in an increase in customer engagement and less spam emails.

Accessibility

Using WAVE1 and IBM’s2 Accessibility Checker, I tested the site to find areas that could be improved in terms of accessibility. I found general issues while investigating; the older version of the site, which were addressed on the new site.

IBM's Accessibility Checker sample results.

IBM’s Accessibility Checker was used to detect major and minor issues related to web accessibility.

Development

At the time, I was familiar with Gatsby3 and its potential to solve many of A&D Demolition’s performance and accessibility issues, which is one of the reasons I chose to use it for developing the site. It had an active community and was incredibly effortless to adapt image optimization, lazy-loading, structured data (SEO), and reducing JS bundle cost.

FigureFigure

The new site (bottom) had a substantial increase in performance in all areas compared to the original (top). Most importantly, the amount of time it takes the site to become interactive was reduced from 5.2 seconds to less than half a second.

Footnotes

  1. https://wave.webaim.org/

  2. https://www.ibm.com/able/toolkit/tools/

  3. https://www.gatsbyjs.com/