Your therapy practice and offerings provide the opportunity to change people’s lives!
When someone visits your website, you have 5-10 seconds to convince someone that what you do is meaningful, their life will be better because of your offer, and you can help them achieve it.
So how do you convey that clearly and authentically on your website?
Well, that’s the goal of this series. I will take different areas of your website and help explain the best way to showcase what you do authentically and powerfully.
First up, the hero section!
What is the hero section of a website?
The top part of your homepage is your hero section. The hero section is the starting point for people visiting your website before they scroll down. You have 5-10 seconds to convince someone that what you do is meaningful, their life will be better because of your offer, and you can help them achieve it.
You may be thinking,
That’s a lot of content to fit into 5 seconds!
And you’re right!
In this article, I will define what every therapist’s hero section needs and show you some examples of what and what not to do.
The Four Touchpoints of Your Hero Section
- Strategic Copy
- Branded Design
- Clear Call to Action
- Easy Navigation
The Impactful Words of the Headline
The words (otherwise known as copy) of your headline do much of the heavy lifting here.
- Headline: These 3 to 7 words showcase the change or transformation you provide. Since search engines will use this headline to categorize you, use a keyword or two that specifically aligns with your offering. Therapy, Trauma, Counseling, or Healing may be great options.
- Subheading (optional): One sentence to describe how you do what you do. Remember, you only have 10 seconds to grab someone’s attention, so this can be a brief glimpse of your most impactful offering. For example: Find healing and transformation through my [instert program name here].
How to Design Your Hero Section for Your Brand
First impressions are essential! Excellent copy paired with a crappy image will not invite curiosity, invoke trust, or convey professionalism. The design of your hero section is your first chance to create a memorable experience with your brand colors, typography, images, illustrations, and graphics.
A few ways to achieve this are:
- A full-width image touches both sides of the computer screen. It is often behind or next to your headline copy.
- Perhaps a headshot would be best if your practice focuses mainly on your approach. If you live in a unique place and serve your immediate community, use an image of a landmark to help ground the visitor. Or, if you serve a specific community of people, find an authentic stock photo that encompasses your ideal clients.
- Another option is to use graphics instead of photography. Does your brand include illustrations? Your background can be one of your brand colors with an illustration in the corner.
Direct the Visitor Where You Want Them To Go
Every hero section needs at least one Call to Action (CTA). Traditionally, the placement is in the top right-hand corner of the screen or under the headline copy. Your website visitors have been trained to search for these triggers. The most common CTA is a way to get in contact with you. Another standard CTA is a lead generator such as a PDF, a survey, or a test. These CTA’s are your way of helping visitors learn more about how you serve them and why they need what you offer. The overarching goal of your website is to serve as a marketing touchpoint on the visitor’s path to becoming a client. Therefore, your job is to help guide them in the direction you want them to go.
Make it Easy To Look Around.
When someone comes to your site, you’ve set up your CTAs to help guide them where you would like them to go. However, people will often meander around your site jumping from page to page to learn more about your business. There are a few key pages visitors like to see; About, Services and Contact. It’s best to keep those in the main navigation at the top of your page. Sometimes, the challenge is to ensure your navigation menu has everything you offer without looking cluttered or unorganized. A few ways to do this are:
- Create Drop-Down Menus. You can put all your different offerings under Services, and people can choose from the drop-down. Or you can create a Resource option and put things like FAQ, Resource Page, and Blog.
- Create a Separate Page for like items. Instead of a drop-down, you can create a page called Services, where you write a bit about all your services, and people can then click on a link from the service page to learn more.
- The Contact option can be a CTA. Instead of having a navigation option for the Contact page, you can create a CTA button instead. Then you don’t need to put that option twice.
Examples of Therapist Website Hero Section
1. Build Trust by Using Your Headshot
Before:
In this hero section, besides the name of the practice having therapy in the title, we can’t tell anything about the practice and the offerings. Let’s dig a bit deeper into what’s missing:
The Four Touchpoints:
- Strategic Copy
It’s not clear from the image or the navigation menu this is a therapist’s website. - Branded Design
Some people associate a beach walk with calmness, quietness, and self-care. However, this is subjective to the visitor. - Clear Call to Action
There is no call to action to help direct the visitor as to what to do next. - Easy Navigation
When the page loads, the navigation menu is hidden.
Design Challenges:
1. The picture is boxed in the center of the page. This is a more traditional style of design and can be seen as dated.
2. The navigation bar is set up to hide unless you move the cursor, or click on the hamburger menu on the top left.
3. Since there isn’t any headline or text beyond the therapist’s name and title, there isn’t much incentive to scroll down or explore the website.
After:
This hero section has instant emotion. The Therapist’s headshot as the full-bleed image shows a person who is happy and approachable.
The Four Touchpoints:
- Strategic Copy
The Heading points to the transformation of change by nurturing yourself. - Branded Design
This image is an example of a Therapist’s headshot to convey emotion and establish some brand colors. The font of the headline is also a choice to help brand the business. - Clear Call to Action
Get in Touch Today button is placed prominently below the headline. - Easy Navigation
The hamburger menu in the top right is the natural place for our eye to search. It doesn’t detract from the image or headline text this way.
Design Changes:
1. Since the name of the website is the therapist’s name, the headshot gives the visitor an immediate look at who they would be working with.
2. Headline speaking to the ideal audience. The headline speaks to transformation and the benefits of the practice.
3. The Call To Action is a button in traditional placement with a contrasting color to the background while staying on brand with the logo and nav menu colors.
4. Navigation Menu hamburger is in a traditional and expected spot. By not expanding it across the top of the page, the design stays open with lots of space for a person’s eye to land.
2. Show Your Practice’s Professionalism with a Full-Width Image
Before:
The term “full-width” is the website equivalent of “full-bleed” in print. The margins of a document are kept white because they will be cut off from the physical item. In website design, these margins show up as the blank bands on either side of a website. This format does still have its place in website design, but your hero section isn’t it. It can come across as an old design style and give off the impression that your website is old and dated.
The Four Touchpoints:
- Strategic Copy
It’s not clear from the image or the navigation menu this is a therapist’s website. - Branded Design
I would say from the butterfly there is a transformation - Clear Call to Action
There is no call to action - Easy Navigation
From the navigation bar, the two offerings provide some information about the therapy practice.
Design Challenges:
1. All the content is boxed in the center of the page. This is a more traditional style of design and can be seen as dated.
2. The navigation text is very small and the text color also discourages readability. Because it’s hard to read, the offerings don’t draw the attention of someone to wants to learn more.
3. Since there isn’t any headline or text beyond the navigation menu, there isn’t much incentive to scroll down or explore the website.
After:
The big change here is that full-bleed image. Without the margins on the side, the butterfly is front and center. This also gives the headline and subheading room to breathe and not be crammed in to the margins.
The Four Touchpoints:
- Strategic Copy
The headline clearly states who the therapist serve and the subheading showcases a few specializations. - Branded Design
The green color is pulled through the logo, navigation menu, and CTA button. This color compliments the butterfly in it being a more seafoam and muted color. - Clear Call to Action
The CTA button has some strategic copy to help explain healing as a big point of the practice. - Easy Navigation
The menu font has been increased and spread out across the top of the page.
Design Changes:
1. The butterfly image has become the background full-width image. The full width is a more modern approach to website design.
2. Headline speaking to the ideal audience. The headline speaks to transformation and the benefits of the practice.
3. The Call To Action is a button in traditional placement with a contrasting color to the background while staying on brand with the logo and nav menu colors.
4. Navigation Menu text size is larger and easier to click on. The home option is removed because the logo serves as the homepage button.
3. Give the Visitor One Thing at a Time to Focus On
Before:
In this last example, we can see the hero section as well as the therapist’s introduction. The issue here is the visitor doesn’t know where to look first. In website design, always give something plenty of space. That way the visitor isn’t overwhelmed with information and doesn’t have to search through lots of content to find what they need.
The Four Touchpoints:
- Strategic Copy
The top subheading explains the geographic area the therapist serves. The bottom subheading of navigating change explains what they do. - Branded Design
The green color is pulled through the logo, navigation menu, and CTA button. This color compliments the butterfly in it being a more seafoam and muted color. - Clear Call to Action
There is a clear CTA button on the top right of the page. - Easy Navigation
The menu is a good size and has the main options for the visitor.
Design Challenges:
1. The bottom subheading text gets lost a bit in the wave imagery.
2. The font used for the Headline is not super readable. It is a beautiful cursive font, However, something with less flourish would be more impactful.
3. The hero section is not that tall, so the visitor can start to see the intro section of the therapist. This makes the page have a lot of content for the visitor to look at all at once. This may cause the person to skip the audience the therapist serves and what they do.
4. The logo is so small the detail is lost.
After:
The visitor now has one area to focus on. That is the middle of the page with the headlines and CTAs. They can easily see what this website is, who it serves, and a bit of their ethics with the option for JEDI (Justice, Equity, Diversity, Inclusion) resources.
The Four Touchpoints:
- Strategic Copy
The transformation headline is front and center and easy to read. The subheading shows the geographic region. - Branded Design
The button colors are pulled from the ocean image and reflect the calmness of the waves. The image also had a pink overlay to soften the image with a brand color. - Clear Call to Action
There are two buttons to navigate the visitor to the two main sections the therapist wants to direct them to. - Easy Navigation
The menu is a good size and has the main options for the visitor.
Design Changes:
1. The ocean image takes up the whole visual area. It’s also overlayed with a pink hue to pull in a more branded color.
2. The subheading became the main header. Since the title counseling and therapy are in the subheading, they don’t need to be in the headline as well.
3. The CTA buttons are now in the center of the page. This adds some balance to the page and allows the navigation menu to have a bit more space and not look cluttered at the top of the page.
4. Increase logo size. Since this logo has an intricate design, when it’s too small, the details are lost. Rearranging the CTA buttons allows for the brand to be better seen.
Now it’s your turn!
Are there parts of your website hero that could be adjusted to better showcase your therapy practice and offerings?
If you’d like to chat more about your website and how we can better attract your ideal clients, let’s chat with a free 30-minute call!
