Tom Gardener is demo/template business website (available for purchase here) aimed at serving the specific needs of trades.
I’ll be looking at the Hero only in this post, because they are unique for Trades in a way that doesn’t hold true for other businesses generally, and the narrow scope means the post will remain focused, and easier to digest.
I’ll break down design choices for other parts of the site in different posts, perhaps with different portfolio examples too.
It’s my hope with this to demonstrate the level of attentiveness and care you can expect from True North web design, and give you an insight into how I approach building different websites.
Designing the Hero
Hero sections are always the statement piece on a page and they should sell the vision of the site, or speak to its intended customer, as authentically and as quickly as possible. A bad hero is a guaranteed loss of credibility, trust, and custom.
Image Choice:
Some designs prioritise a statement image, given the statement piece the hero is meant to be. This can sometimes work, but I think these images should serve to elevate atmosphere more than dominate because the Hero is for earning trust. It is not a portfolio – you show that later. You site should not be “here’s my work – hire me now!”, it should be “here’s what I do, here’s some examples of it if you’d like to see. I’m available if you need me.”
The Hero needs to set the scene. I recently saw another gardener & landscaper site where the hero was mostly concrete slabs – presumably part of a patio they had done, and I’m sure it was a professional job – but this would not make me stay on the site. I came here looking for a person to cut my hedge.
On the other hand, a tasteful photo of a whole garden – path, pond, trees, patio and all – would be much better. It doesn’t limit the visual cues to the idea that you may only do one service (in this case, patios) when in actual fact you do many. Your services section is the place to talk about all this, but you don’t want to lose people before they get there.
The best design is frictionless, and conforms bluntly to the rule “don’t make me think”. When I saw that patio image, I had to think to check the services page to see if the trader did hedges or just leave and find someone else. I left and tried the next search results. If I’d seen a tasteful shot of a whole garden, I’d never have had this doubt, so I would have stayed on the site.
Contact Form in the Hero
It’s a proven trend that for service websites, having a contact form in the header markedly increases inquiries, which in turn increases the chance of successfully getting customers. For this reason, although I also put a contact form in at the bottom of the page – I still choose to put one in the Hero as well.
Understanding why is a matter of understanding user intent. When people look at blogs they are looking for content – depending on the blog that may be anything from poetry to technical help with a phone problem. When people look at a tradesman’s site, they’re usually in a frame of mind where they need some work doing, and will settle for the best-looking, easiest to use service which happens to be offering that help.
Creative brands use Heros to express individuality or personality because that’s what captures their audience, but a service site needs to be clear, informative, and trustworthy. Tom Gardener is not getting chosen for his personality, or his ability to write poetry or witty Twitter comments. He’s being chosen because he seems capable, reliable, and is easy to get in touch with.
The Hero Headings
A very common thing to see on websites by less experienced designers is a non-descript header.
Among those other gardener websites I found, some of them had vague headings like “helping you to make the garden of your dreams into a reality” under which is something like “contact me now for a free quote.” Neither of these lines is helping the business.
The Heading should be something that matches what customers actually search for. If I want a gardener in Birmingham I never type “making my dream garden a reality” into Google. I type “birmingham gardener”. In natural English, the heading should match this search term as closely as possible. This is why Tom Gardener’s site says “Birmingham Gardener & Handyman”. Other usable options include things like:
- Experienced Gardener in Birmingham
- #1 Birmingham Gardener & Handyman
- Garden Maintenance in Birmingham
But lines like these are unhelpful to your business, because they don’t match user’s search intent:
- Making lovely outdoor retreats for people since 1994.
- Making your garden somewhere you can unwind.
- Transform your outdoor spaces into the stuff of your dreams.
If we’re being honest, these lines are a little too poetic and a bit tortured – they look like someone trying too hard to make the sale as much as missing the search intent of their customers. Trade sides are significantly more matter-of-fact, and the people making the decisions are in a more ‘matter-of-fact’ state of mind too. Remember, they’re not coming to your site looking for inspiration: they’re looking for service!
The Subheading: There is Room for Emotion
This is not to say there can’t be any personality. This is what the subheading should be for. Emotion is part of decision making. I know that even as a designer, I will pick the site that connects with me more emotionally between two sites that are otherwise the same service, trustworthiness, etc.
Sites where the text isn’t as well thought out include subheadings like “get in touch for a free quote now” or something else sales-y, but this is a misuse of the subheading. These care calls to action, and should be saved for elements of the site that actually call people to act – like buttons.
Tom Gardener’s site uses the subheading as a chance to introduce warmth. I note that he is local and has 25 years’ experience, which establishes trust and expertise immediately, and leave it with an open invitation by saying, “[He’d] love to help you transform your garden”.
It fosters a human connection, making him seem like a real person, and the contact form being right there next to it reduces all friction involved in getting in touch.
Necessary Info in the Hero:
Most people landing on the site of tradespeople are in a decision-making mindset. A good site helps them make this decision, and one way to help is to not make it hard to act on that decision.
This is why the contact form is right there, but I also put other information there:
- A large, highlighted contact button in the header. This is because some people naturally expect such a button there. It takes them to your contact page. It’s not necessary to use this but it’s more natural for some people, and good design conforms to the rule: “don’t make me think”.
- Telephone Number, Email, Location, and Service Area under the navigation menu: at a glance, without scrolling, anyone can see where you are and how to contact you. There’s no need to see any more of your site if their mind is already made. This completely eliminates friction for that type of customer, yet more information is available lower down your site for those who want or need it.
Different users have different degrees of comfort with different communication methods. For example, I hate phone calls and would much rather email. I know my Nan would always prefer to phone. Offering both meets not just the practical needs but also the comfort of both clients.
The Reassurances in the Hero
Lastly for this post, the Hero is a great place to reassure clients of your trustworthiness. Note with Tom Gardener’s trust signals at the bottom of the hero: I included again Tom’s 25 years of service, but also the fact he’s fully insured, responds quickly to enquiries, and is highly rated on Facebook and Google. It’s important that these terms are specific and verifiable, and not vague (such as “quality service” and “your satisfaction guaranteed”) as it helps confirm that sense of trustworthiness without sounding sales-y.
People who want to know more have the option of scrolling down the page, but those who don’t can just get in touch. At the point a person’s decision is made the site needs to get out of their way and let them contact you. Once they’ve done this they are most of the way to being a customer.
Conclusion:
For traders, a website is a tool. It needs to capture the intent of the people who land on it, which is often more immediate than other businesses. For example, people might ponder a while on whether to get a new lamp shade or scented candle, but when the garden is a mess and spring is on the way they really need a gardener now.
Customers experience the need to think about a site as friction more often than choice. Careful thought about design on the designer’s part eliminates this, and for traders that is important.
A tradesperson’s site needs to signal capability and trust quickly. Homeowners are rightly cautious about who they let near, or even into their homes. These sites can’t afford to be sales-y, and vagueness is no help either.
Language needs to be confident, firm, approachable, but not without a touch of human warmth. Information needs to be clear and accessible. And the site needs to remember its own purpose: it’s not a showpiece – it needs to step aside when it has done its job and let the customer do what they want to do, which should be to seek out your services.
Tom Gardener is True North Web Design’s first template site for trades, and begins an expanding line of websites designed with this level of forethought, offering traders a running start in a competitive online world.
When a website is built with a clear understanding of its purpose, it serves that purpose most strongly, and this is to the great benefit both of its owner and its visitors. This approach is the standard I will build into every tradesperson’s site – template, or bespoke – at True North.