Addemolition

Reimagining Addemolition’s website with a completely new look

View Website

CONTEXT

Freelance

TIMELINE

Three Weeks

ROLES

Web design and development

TOOLS

React, Styled-Components, Figma

Screenshot of Addemolition

Overview and objective

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. As a freelancer, 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.

A screenshot of Messenger's chat plugin for Addemolition.
Messenger's chat plugin was used to allow for instant interaction with clients.

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.

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 of roughly 20% in customer engagement and (so far) no spam emails.

Accessibility

In order to compare the difference in cases and deaths, I decided to merge two scales in one visualization instead of using a unified scale or two separate visualizations. In the first case, since the number of cases are much larger than deaths, the line that represents deaths would have been flattened, making any form of comparison meaningless.

Screenshot of rows on a table, showing issues that were discovered by IBM's Accessibility Checker tool on Addemolition's old site.
IBM's Accessibility Checker was used to detect major and minor issues related to web accessibility.

Using WAVE and IBM’s 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:

  1. Had disabled the focus property, resulting in no visual feedback as users navigated between elements using their keyboards.
  2. Was not following the standard contrast ratio on some visual elements.
  3. Did not use alternative texts or used the same description for alt text and captions.

These issues were addressed on the new site. Due to a limited timeframe, the main goal of the launch was to meet Google Lighthouse’s good rating, with a long-term plan to meet WCAG 2.0 via incremental updates.

Development

I had been using Gatsby, a frontend framework which is based on React for some time, which is what I ended up using. It is highly supported and its functionalities met A&D Demolition’s goals, the most important of which was performance.

New performance results from Google Lighthouse, with a perfect score of 100. The new site had a substantial increase in performance.
The new site had a substantial increase in performance in all areas. 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.

After a two-week design sprint, I began developing the site. One of the main challenges on the old site was image optimization, as the landing page included many logos and images of customers. Gatsby allowed to lazy-load images, loading them on-demand only if they appeared on user’s screen. This resulted in a significant increase in performance, which was tested using various tools.

Reflection

The month-long design and development process was allowed me to improve my time management skills as I was working full-time as a web designer at another organization. Working with the company, I was able to analyze user feedback and data to improve A&D Demolition’s website and observe instant results of my design decisions.