How to Design a Homepage that Sells

August 26, 2020

Creating a website can be pretty overwhelming, right? There’s so much information that you need to include and it can be difficult to direct users where they need to go without cramming a million things on the page. As a designer, I always approach websites with an engagement-centered focus – I want the websites that I work on to not just look good, but guide the user through this experience that encourages them to take action. Basically, I want the website to make sales! But it’s not as simple as saying “Hey, here’s my product, buy it!”. There’s some deeper strategy that goes into it, like understanding when to present the user with certain information that will build their trust and make them eager to learn more or take action.

Of course, every website is different and there isn’t really a one-size-fits-all formula for the perfect website. But in this post, I’m going to share my basic framework for a thoughtful and strategic homepage! I’ll be breaking the framework down section by section, outlining the goals for each and how to guide the user through them. Let’s dive in ––

Homepage Header Design
0I. What / Who / How

The first section of a homepage is the most important because it is the first thing that users will see on your site. That first impression is crucial, so this section needs to address these key things:

  • What you do
  • Who you do it for (the more specific, the better)
  •  How it helps them / what results they get

You want new visitors to instantly know that they are in the right place, so having this info at the top of your homepage will help with that.

You also want to make sure that you are encouraging them to take action right away, whether that’s buying your product, booking your services, or simply learning more about what you do. So there should also be a clear link or button for them to do one of those things. (In the web design world, call this a “Call to Action or CTA”, so I’ll refer to it that way from now on.)

Portfolio / Featured Product Section
II. Give ‘Em What They Want

Most people come to your website with one specific goal in mind. It could be to view your work, buy products, hire you, etc. Even if there are multiple things to do on your site, there’s likely one thing that is the most important in the user’s mind. So that is the goal of this 2nd section on your homepage — to give your user what they came to do/see. 

If you’re a product-based business, this may look like a collection of your most recent products. If you’re a service-based business, maybe it could be a roundup of featured work or a more detailed description of your services with a link to work with you. Whichever you think your audience would want to see first.

CTA: Link to view more work/products or a link to work with you

Testimonial + Build Trust Section
III. Build Trust + Credibility

After seeing what you do/sell, the user will either be:

  1. Ready to take action
  2. Hesitant because they want to make sure you’re worth it

So to address the hesitant ones, you want the next section to focus on building trust with them and showing your value. This could be through testimonials, reviews, press features or simply sharing some deeper insight into why your offering is going to be worth it. Anything to gain their trust and make them more likely to buy!

CTA: Links to press features or a link to work with you.

Featured Product / Offering Section
IV. Featured Service / Product

Now that you’ve shown your audience why they need to buy your product/service, let’s re-introduce them to your popular offerings! This could be a highlight of your main service, a slideshow of your most recent portfolio work or links to your most popular products. This way, your homepage starts by introducing them to what you do, then gaining their trust, then re-introducing them to your offering so they can take action.

CTA: Link for them to hire your or buy a product.

V. Behind the Brand

Customers buy from brands that they feel connected to, so it’s important to show a glimpse of the real people behind your business. Even if you’re a big company, it helps to put a face to the brand so that the customer can feel like they know YOU, not just the business.

I suggest sharing a photo of yourself and a quick blurb about why you started your business. This will show your passion, values, and give customers even more of a reason to feel connected with your brand. 

CTA: Direct them somewhere to connect with you further like social media, a blog or an “About” page to learn more about your business journey.

Footer Section
VI. Final Direction Roundup

To close out your homepage, you want to give the user one final push to guide them wherever they need to go. You never want to leave them at a dead end, so this is where you can sort of round up any possible place that they may want to go before leaving your website. Use your footer to give them clear, simple directions to explore other areas of your site and take action.

Even if they are leaving your site, you want to keep them engaged with you somehow. So encourage them to either follow you on social media or sign up for your newsletter so that they can stay in the loop.

CTA: Give links to any final destinations on your website, including staying engaged with you on other platforms like social media or your newsletter.


This framework is simple, but it gets the job done and guides your users through the homepage in a way that is constantly addressing their needs. If you’re still having trouble planning out your homepage or other areas of your site, here are a few other tips that I always share with my clients:

  • Know the difference between your audiences’ needs and your needs. You obviously have a specific goal for what you want people to do when they visit your website (hire you, buy your product, etc.) But sometimes the user’s goal isn’t the same as your goal. Maybe their primary goal when they visit your site is to simply read your blog, not buy your product. This is extremely important to keep in mind because if your entire website is designed with only your goals in mind, it’s probably not going to perform very well. You need to make sure that you are both serving your audience AND guiding them where you want them to go.
  • White space is your friend. Ever land on a website that is crowded with images and long paragraphs that force you to scroll forever? Overwhelming the user with too much information may push them to leave your site, so you want to avoid that as much as possible. This is where working with a designer can really help because we’re all about making information easier to digest visually. Through layouts, typography, color, and more – we’ll help you break things up so that your content is more engaging and guides the user through the site in a way that feels natural.
  • Always give the user a next step. Like I mentioned before, you never want the user to come to a dead end on your site. The lack of guidance may make them feel like there’s nothing else for them to do and they’ll leave your site completely. So when I work with clients, I push them to add some sort of CTA in every single section of their site. It doesn’t always have to be a big button, but we just want there to be something guiding the user somewhere else on your site so that they stay there longer.

Have questions about creating a strategic website? Let me know in the comments and if you’re interested in revamping your own website, go check out my services page!

SHARE THIS STORY
Comments
EXPAND
Add a Comment