A few months ago, I visited a website, and it was a mess.

• Cluttered navigation
• Poor copywriting
• No clear call-to-action

I was confused.

“What do you want me to do?” I thought.

Since I’ve spent time learning web design and studying other aspects of business, such as copywriting, I’ve realized something: 

A lot of websites are poorly optimized.

It seems as though most people put up a website for the sake of having one without considering its primary goal.

Do you want to convert visitors? Maybe you want them to sign up to your newsletter? Join your coaching program? Book a call with you? Or maybe your goal is to simply provide information?

A website can have many goals—but it should have one main goal.

Once you know the goal you can design the website around it.

Let’s talk about the hero section. It’s the first thing people see when they land on your website.

If the hero section doesn’t grab attention, then people won’t stick around long enough to see what you have to offer.

Breaking Down The Hero Section.

The hero section consists of the headline, subheadline, call-to-action, and sometimes visual support.

Let’s break it down.

1: Headline: This is your attention-grabbing value proposition. It should clearly communicate a big idea, what you offer, and the primary benefit.

I’ve seen weak headlines like:

• “My Store.” 
• “John’s Newsletter.”
• “Ghostwriting for personal brands.”

Defining the service isn’t attention-grabbing.

Nobody cares about your store, your newsletter, or your service. I’m sorry, but we are all self-interested. We are all thinking, “What’s in it for me?”

Instead of defining the service, express the benefit.

Here are some better ways to rewrite those:

• “Hand-Crafted Jewelry Ready To Wear For Any Occasion.”
• “Work Less. Earn More. Enjoy Life.”
• “Free Your Time. Amplify Your Impact.”

2: Subheadline: This supports the headline by adding context and explaining how you deliver the promised benefit.

Think of it like this:

The headline = the destination. (What your audience wants.)

The subheadline = the vehicle. (How you help them get there.)

3: Visual support: While not always necessary, relevant images can help increase conversions by connecting with visitors on an emotional level. Ideally, use images of people enjoying your product or service rather than just the product itself. Seeing people in desirable situations helps visitors imagine themselves experiencing the same benefits.

For example, let’s imagine a website selling hammocks.

Let’s say the image below is in the hero section.

Think you’d be likely to buy?

Probably not, unless you were dead-set on buying a hammock. 

A plain image of a hammock isn’t very compelling.

What about if you see these images?

These pictures evoke feelings of relaxation, joy, and happiness, which makes a purchase more appealing.

4: Call-To-Action (CTA): A clear, prominent CTA gives visitors a path to take action. Avoid generic phrases like ‘Contact Us’ or ‘Learn More.’ 

Instead be descriptive about the next step:

• “Book a Free Consultation.”
• “Schedule a Call.”
• “Read For Free.”

Let’s break down a few examples from some well-known creators:

Dan Koe’s website:

‍Value Proposition: “Work Less. Earn More. Enjoy Life.”

Subheadline: “Join 175,000+ getting mindf*cked every Saturday morning while reading about the mind, the internet, and the future.”

CTA: “Read For Free.” Although the CTA is descriptive, the transparent color makes it less noticeable. (Originally this button was gold and it stood out against everything else.)

Justin Welsh’s website:

Value Proposition: “Turn your knowledge into income.”

Subheadline: “Join 215k+ readers of The Saturday Solopreneur for tips, strategies, and resources to launch, grow, and monetize your internet business.”

CTA: “Subscribe.”

I also love the visual cues that are used. Highlighting the word ‘income’ to draw your attention to it is subtle yet noticeable. An arrow directs your attention to filling out the email form.

He goes more in depth in the landing page for his newsletter.

Landing page for Justin Welsh’s newsletter:

Destination (what the audience wants): “Practical tips guiding you from first-dollar to full-time solopreneur.”

Vehicle (how he helps them get there): “Every Saturday morning, you’ll get 1 actionable tip to launch, grow, and monetize your internet business in less than 4 minutes.

CTA: “Join 215k Readers.” Great CTA that adds social proof.

He also adds more social proof by showcasing raving reviews from other highly prominent entrepreneurs.

Dan Goldfield’s website:

Value Proposition: “Master Your Mind. Monetize Your Knowledge.”

Subheadline: “Realize effortless wellbeing and create scalable income from your couch. 1 actionable insight every Saturday morning (in 30 minutes or less)”

CTA: “Join 900+ Readers” Again, great CTA that adds social proof. The bright gold button contrasts well against the blue background, drawing attention.

Like Justin, Dan gives additional social proof by adding reviews.

Besides images, color contrast plays a significant role in the design of your site. It’s actually one of the design principles I often see people fail to utilize correctly.

A few months ago, I came across a landing page with a dark green background and pale green text, similar to the image below. 

This isn’t aesthetically pleasing. And if people have to strain their eyes to read your landing page it’s likely they end up bouncing.

There are contrast checkers online you can use to make sure your site is accessible to all, including those with visual impairments.

If this feels overwhelming and you need some guidance, book a free clarity call with me here.

Talk soon,

—Priscilla [Player 2]