Creating a digital presence for Dox Plumbing
I helped enhance the digital presence of Dox Plumbing, which involved everything from holding initial interviews with the director, engaging a photogropher for a photo shoot, designing and developing the website, implementing the contact form process, integrating with Google Analytics as well as help update the business's Google My Business account.
Technology used for this project: Vue.js 3 & Vuetify 3 (UI framework), Vue Router, Pinia (state management), Vee-validate (validation library), VueUse (composition utility library), Vite, Vue-gtag (Google analytics), Netlify, Netlify Forms
Technology used for this project: Vue.js 3 & Vuetify 3 (UI framework), Vue Router, Pinia (state management), Vee-validate (validation library), VueUse (composition utility library), Vite, Vue-gtag (Google analytics), Netlify, Netlify Forms
Head tilt transition for a 'human touch'
Initially the website shows the director's photo with his head tilted downwards. But when a prospect scrolls to the photo, there is a 'head tilt' effect as if the director is looking up at the prospect at that exact moment.
The idea behind this is to emphasise the 'human touch' on an online platform (the website) and to remind prospects as much as possible, that doing business with Dox Plumbing, is doing business with a real person.
The idea behind this is to emphasise the 'human touch' on an online platform (the website) and to remind prospects as much as possible, that doing business with Dox Plumbing, is doing business with a real person.
Authentic customer reviews linked to HiPages
Authentic reviews are key to building trust with potential customers. Hence the website includes an interactive customer review section, with the most recent 11 reviews . The reviews also include details such as the customer's name, the area that was served as well as the date. On top of that, each review is directly linked to HiPages which is Australia's largest online tradie marketplace, further adding to the review's authenticity.
Contact form implementation without a backend
Having a back-end for only a contact form can be an over-kill. Hence since I was already using Netlify for hosting, I leveraged Netlify Forms which comes with built-in form handling that's enabled by default.
With this, I was able to have a fully functional contact form implementation in a matter of minutes. This includes:
With this, I was able to have a fully functional contact form implementation in a matter of minutes. This includes:
- emails sent to Dox Plumbing
- notifications sent to my Netlify account
- protection against spam bots with honeypot
Using Google to increase and monitor website traffic
To help continue monitor the website's traffic and thereby better understand customers , I also integrated the website with Google Analytics (vue-gtag). On top of that I also helped update Dox Plumbing's Google My Business account which included updating descriptions, uploading photos as well as providing recommendations on collecting Google reviews.
Future plans
Plans to continuously improve this project include:
- Integrate the website with a custom Quote & Invoice generator
- Include articles with low-hanging fruit keywords to better rank on Google
- Migration to Nuxt 3 for better SEO
- Capture all recent work performed to indicate activity