Details
- Live Demo
- Tech Stack: Hugo, HTML/SCSS, JavaScript, Netlify
- Project Type: Client
- Year(s) Built: 2017-Present
A couple of years ago, I was just getting started with freelancing and looking for projects to take on.
My family owns a small general contracting business but never had much of a web presence to speak of. So I decided to build them a website where they could showcase their work and field inquiries more easily.
The first version of the site was completed in 2017. Initially, it was just a basic landing page with some photos and a contact form. Since then, it’s been revamped a handful of times to improve load times, the overall design, and user experience.
This latest multi-page version was completed in late 2021.
The Business Problem
Unlike a traditional local business site, the owners weren’t too concerned with getting new leads from Google. They had more work than they could handle as is.
For this reason, I didn’t set up a Google My Business property or focus too heavily on SEO (Search Engine Optimization). The site still uses SEO best practices, but it’s not heavily optimized for it.
So why build a website if you don’t need or want leads?
Well, alternate reasons for needing a web presence are more common than you’d think. Especially for businesses that rely on word of mouth and have done so for years.
For this business, the following two use cases were paramount.
Benefit #1: Photo showcase
The main business need was to showcase photos to prospective customers. Oftentimes, the owners would go back and forth with referrals and send them pictures manually. They could also upload them to Google Drive and provide a link.
But it’s a lot easier for them to simply pass the site’s URL onto a prospect. They would then visit the site and scroll through a gallery with examples of the company’s best work.
To make that process easier, we decided to categorize the photos and use a JQuery lightbox plugin called Magnific Popup as the gallery solution.
Benefit #2: Customer Inquiries
Another benefit the new site provided relates to fielding customer inquiries. In the past, most requests came through via phone or text message.
The site now has a contact form that automatically sends an email to the owners with the person’s name, email, phone number, and an explanation of what work they’re looking to have done.
Instead of being interrupted by a phone ringing at a job site, they can now return someone’s call at a more convenient time.
The site itself is also optimized for customer inquiries. The top section of the header has one-click phone and email links that automatically open a call prompt or draft an email in the user’s default email client on click.
Technologies Used
The design itself is built off of an HTML theme bought from ThemeForest. I can design sites from scratch too, but for a small project like this, it’s not always worth the time if you want to stay on budget.
Instead, simply reach for an industry-specific template and tweak it to fit your needs, adding any necessary customizations on top of that.
I converted the theme to work with Hugo, a static site generator. This way, the site is built before the deployment which makes it a lot faster than a traditional database-backed site. Using an SSG also keeps the maintenance overhead low because there are no server updates to keep on top of.
The hosting itself and contact forms are handled by Netlify. I highly recommend their service for sites like this with a low lead volume because you get 100 free form submissions per month and free hosting. Netlify Forms submissions automatically send you an email with the form submission information.
You can also connect Netlify forms to Zapier and perform further automations if needed. For example, you could send all the lead info to a Google Sheets spreadsheet. This way, everything is in one place so if there are issues with email deliverability or an email gets lost, you can always refer back to the spreadsheet.
Other Features
Here are a few other features that made this project a success.
There is a Google Maps API integration with a polygon drawing that displays the business’ proximate service area. This helps filter out anyone from outside the service range and improve opt-ins for those who fall into it.
Each service they offer has a dedicated page where we go into further detail about the offering. In a site that is looking for SEO traffic, these pages are extremely important to have. If not, it helps your prospects learn more about what you offer and what’s included in the service.
I also added other basic components like a testimonials slider, an about page, some solid marketing copy, and more.
Conclusion
Overall, small business sites like this are quite enjoyable projects to work on. They’re also very effective if you know what you’re doing and the competition doesn’t.
If you need a website built for your own business, feel free to shoot me a message.