Elements of a Successful & Strategic Homepage Design

The average website visitor spends less than a minute on a webpage, reads only a quarter of the text and will leave if your value is not communicated within 10 seconds, which is generous, I would give it 3 seconds. (1).

This is why your words matter and ‘clear over clever’ wins every time.

Far too often, I have visited the homepage of a website and have jumped off, mostly for the reasons listed below.  The attention span of humans now is at an all-time low (thank you, reels) and our expectations are at an all-time high. Does this sound like you, too? 

Before we dive into a Homepage outline I recommend, here are a few homepage repeat offenders I see often which could be hurting your business.

WARNING!

So, I’m an Enneagram 8 (IYKYK) and sometimes when I’m trying to help I’m like ‘Intense Care Bear’ and might come across as kind of mean. It’s all out of love though, I pinky swear. This is also from design experience & best practices, not just my personal bias.

The offenders:

  • I have no idea what you do, who you are, or how you’re going to help me

  • You have one section with a mission statement or tagline, but that’s it. There’s no clear direction of where I should go next and you have me click through your navigation to figure it out

  • Your website isn’t mobile responsive and I have to zoom in to see what I need to see (if I bother, normally I’m out)

  • The images are generic stock images or poor quality, don’t match your brand aesthetic and/or lack personality - immediately, no

  • The branding and fonts are inconsistent or don’t jive with your message and there is no font hierarchy

  • Too cluttered, poorly designed, lacks personality

Other notables

  • You have too many navigation headings. You should have a maximum of 7, 3-5 are ideal

  • Your footer is non-existent - this space is super useful for the pages that don’t need to be in your top navigation

The Purpose of Your Homepage

So if you haven’t gathered, your homepage is a pretty big deal. It’s where you solidify if you and your website visitor are the right fit for each other and guide them to the offers you want to sell so you achieve your goals. 

Let’s dive into 3 main homepage goals you can focus on

  1. To help your visitors understand WHO you serve and HOW you serve them. 

    This can be done through your ‘I help’ or value statement. This will generally appear in your Hero area, more on that in a minute.

  2. Show off your personality. Who even are you? 

    This is where you connect with them on an emotional level. Most people work with people they like and resonate with. If you write like a robot, or your brand personality is completely different than what they get when they reach out to you, there will be a disconnect and likely won’t result in anything but wasted time.  

    Being true to yourself or your brand personality will result in more aligned clients, smoother communication and a successful project outcome.

  3. Direct your visitors to where you want them to go.

    There’s a  website phrase, ‘don’t make me think’ and this applies to how your visitor experiences your website. Tell them what to do. A confused customer does not buy. 

    What offers are you selling and where can they find them? Based on the end goal, always have a clear direction so they can find out more about your services, products, work, blog, newsletter, etc. This goes for EVERY page on your website. End with a call to action, always.

OK, so now that we have the basics of what not to do and some solid goals, we’ll dive into a suggested outline for your homepage. 

When building websites, I generally refer to the Storybrand marketing framework made famous by Donald Miller in his book  ‘Building a Storybrand’. I highly recommend reading this book if you are a business owner, designer, copywriter, salesperson, all the things. It talks about how people make decisions and his formula of structuring your message in a way that leads consumers to your desired conclusion. This is through the way you write, design your content or speak about your business. 

Obviously, every business has different website goals and needs in terms of the order and how the content will flow from one section to the next, but the principles remain the same from business to business.

This is not an exact replica of the framework, it’s my interpretation of it.

Suggested Homepage Outline

  1. Hero Banner with a stand-out value statement

  2. Success Indicators (optional)

  3. Mission or Benefit Statement (Storybrand has a Problem statement here)

  4. Outline of your main products and or services 

  5. Testimonials, Social Proof and/or Portfolio of work

  6. About you | Value Proposition

  7. Process / How it Works

  8. Freebie - could also link to other free content, like a blog

  9. Footer (junk drawer)

 

Like visuals? Here’s my homepage as a reference (at the time of print)

 
elements of an effective homepage
 
 

The Homepage Outline, deep dive

Hero Banner

This first section of your website is commonly referred to as ‘above the fold’. This is the first section your visitors land on before they scroll. This is where clear over clever is a priority.

In this section, you make clear who you are, who you serve and how you help them followed by a clear call to action (button) leading to where they should go next. Think about what your customers want and how you’re going to provide them with that transformation.

Here are a few ideas to phrase this area:

  1. I help TYPE OF CLIENT do ACTION so they can OUTCOME

  2. I help AUDIENCE get BENEFIT with/by your OFFER

  3. Imagine you could YOUR BENEFIT/TRANSFORMATION without UNDESIRABLE CHOICE

  4. Ready to YOUR ACHIEVABLE TRANSFORMATION?

Success Indicators

Think about the external, internal and philosophical problems your client has and what transformation you offer them.

This could either be outlined in bullets, as I have on my website, or you could put this within your benefit or mission statement in paragraph format to condense your content.

Mission or Benefit Statement

Storybrand uses a ‘problem statement’ here. This often looks like, ‘do you struggle with…’ and then lists out ‘problems’ that your client is trying to overcome. 

Personally, I like to lean towards more ethical marketing practices, like ‘Imagine if’ and then include positive outcomes they could achieve.

It’s important to remember people are landing on your website in search of an answer, so speak to their initial motivations right away so they know they are in the right place. 

How We Can Work Together

This is where you direct clients where you want them to go. 

This could look like your best sellers if product sales are a priority,  a breakdown of different pricing or packages you offer or could have some images with a freebie, your main offer and a link to educational resources or a blog.

Regardless, keep it simple with a brief description of each and then have them dive deeper to learn more. Keep your end goal in mind as you structure this.

Call to action - dive into your services

Testimonials, Social Proof and/or Portfolio of work

This section is all about building trust with your website visitor. We want to demonstrate that others have entrusted you to achieve a similar goal, so success stories are great here. They shouldn’t be lengthy and focusing on the transformation is ideal.

You could also use this section to include icons or logos of who you have worked with or media you have been featured in.

Add a gallery of work as well if you want to have both testimonials and visual examples - or combine them!

About you | Value proposition

This section is not an autobiography. It’s a fun and brief description of yourself. You can share how you got started and why you’re passionate about it. How does this help solve your client’s problems and how are you uniquely positioned to solve their problems? 

Depending on your business size, in this section, you could indicate your differentiators in an icon/graphic format in lieu of a more personal ‘About’ paragraph.

Remember, even though this is about you, it is actually about your client.

Call to Action - Invite them to your About page to learn more.

The Process | How it Works

Pare this down to an easy 3 step process showing a brief overview of how clients can work with you. 

  1. How can a client get in touch with you

  2. What happens after

  3. What is the end result they achieve after working with you

If you want to dive deeper into this in your service pages or an individual process page, that is fine. This section is about simplicity.

Call to Action - you could hyperlink your contact page in #1 and/or button to your process or services page

note, you may decide to swap the About & Process section depending on the flow

Free Offer or Newsletter opt-in

Pretty much no one gives you their email for nothing these days. The point of a ‘freebie’ is to give them a taste of the success they will get when they work with you. This should be of value and be followed by a 3-5 step email welcome sequence upon submission. 

Be sure to explain why they should opt into this free thing. What will it help them accomplish or what are the benefits? 

Emails are an excellent way to nurture website visitors that are not ready to buy from you yet. By staying top of mind, you have a better chance of converting those sign-ups into paying customers in the future.

I have a few opt-in ideas in this blog post: 6 Must Have’s on your Travel Advisor Website

Footer (junk drawer)

This is one of the most underutilized sections of a website. As I mentioned, your main navigation is only for ESSENTIAL links. Everything else can go in the footer.  

Also, don’t forget about styling it.

Here are some links that should be included:

  • Home | Back to Top

  • About

  • Services

  • Contact 

  • Address & phone number (if you’re an in-person business)

  • Social links

  • Copyright 

  • Terms & Conditions, Privacy Policy*

  • Shipping & Returns (commerce)

Optional:

  • A brief explanation of your business

  • Additional pages not in the navigation that are key (blog, portfolio, resources, referral program)

  • Newsletter sign-up

  • Alternate logo or submark

  • Site Credits


A video breakdown of the strategy behind Bloom, my one page website template

(taken from a Facebook group share)


Seems like a lot, I know. Do you have to use every section? No, absolutely not. Some people don’t like a scrolling website and you need to evaluate your customer base to determine what is appropriate for your business.

However, this framework has been designed so that your website visitors clearly understand how you can help them achieve their goals, ways they can work with you, why they should trust you with their investment and what to expect when they connect. If you omit any sections, be sure that your homepage still answers these questions.

I encourage you to audit your current homepage and see if any important bits are missing or if the messaging can be improved to help guide your visitor more clearly. 

Let me know what you think in the comments!

Ready to get started on a beautiful website that’s built on strategy? Get in touch!

Was this helpful and you want to say thanks?

*this is an affiliate link, I earn a small commission but does not cost you more. Check out the Resource Marketplace for more design recommendations for your businesss.

(1) https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/

you may also like

Lara Ellis

Hey! I’m Lara, founder and designer at Birch & Bud Design Co, a web design studio for modern travel, wellness and hospitality entrepreneurs.

Choosing to work together means partnering with someone who is deeply invested in your success. I bring a unique blend of creativity, analytical thinking, and intuitive insight to every project and a bold yet grounded approach to design.

My goal is always a harmonious and engaging digital experience that resonates with your audience, drawing in your soul clients.

Whether you want to revamp your existing website or create something entirely new, I’m here to help you bring your vision to life!

Previous
Previous

12 Classic Squarespace & Canva Compatible Font Combinations For Your Website

Next
Next

How to Customize the Font on Your Mailerlite Embed Form