10 Quick Tips: How to Make Your Website Homepage Design Better PDF Print E-mail
Friday, 05 January 2018 07:55

For the small business owner, your website homepage is like your shop window: It entices people into your store, gives them an idea of what you provide, and it's their starting point for exploring the rest of your shop. This also means that how your website homepage looks greatly affects both your branding and your sales.

Unlike a shop window, however, improving your website homepage shouldn't cost much, especially if you're running a small business. There are many website homepage tweaks you can make without spending a lot of money or waiting several weeks for a redesign.

Website homepage design
Website homepage design is important for your business success (Image Source).

In this tutorial, we'll show you how to make a website homepage that attracts customers. You'll explore website homepage design ideas and look at some of the best website homepage examples.

Let's dive into those website homepage design tips.

1. Use Lightweight Image Files

Having beautiful, high-quality images is a must-have if you want to make your products look as good as possible. But there's an important trade-off: Usually, the bigger the image or the higher the resolution, the longer it takes for these images to load for your visitors. The longer the load times, the more likely it is that your visitors leave.

According to research from Google, 53 percent of website visits are abandoned if a mobile site takes longer than three seconds to load. In fact, their model predicts that the longer it takes for your page to load, the higher the probability that your visitors leave. The same research showed that it would make a lot of difference if website owners simply compressed their images.

Page load time statistics
The longer it takes for a web page to load, the more likely it is for visitors to bounce.

Find the balance between providing beautiful images and having a fast loading site. Use Google’s PageSpeed Insights tool to see whether your images need further compression. If they do, you can use a tool like TinyPNG to compress them further or learn more about image optimization through these guides:

2. Have a Single, Prominent Call to Action

When a visitor arrives on your homepage for the first time, there should be no ambiguity about what their next step should be. This is where your call to action (CTA) comes in. A CTA usually appears in the form of a large button. Clicking on it should convert your homepage visitors into a lead or a sale.

Make sure your call to action located above the fold — the top part of your homepage that's visible without scrolling. In one case study, an online store selling trampolines increased their conversion rate by 11 percent just by adding a CTA above the fold. 

Still, you shouldn’t confine your call to action to this area only. You can repeat it throughout the rest of your homepage copy. For example Rumpl, an online store selling specialty blankets, highlights their featured product above the fold with a call to action. 

call to action placement
Place your CTAs above the fold, but also repeat it throughout the homepage.

But if you scroll down the homepage further, you’ll see another CTA button to add that product to your cart. While Rumpl displays other items on their website homepage, none have a prominent CTA except the featured product. Visitors focus almost exclusively on purchasing the featured product.

Avoid other distracting elements on your website homepage. The main focus should be the call to action. If you need to put navigation items, social media buttons, and other elements on the website homepage, make sure they don’t distract your visitors’ eyes from the main CTA buttons.

If you don’t have a strong call to action button on your website homepage, check out some of these attention-grabbing button templates from Graphic River.

3. Clarify Your Value Proposition

Apart from being clear about the action your visitors need to take, you also need to be clear about why they need to take that action. Consumers across all age groups value clarity in online marketing communications, more than great design or perfect grammar and spelling. So, when it comes to your website homepage copy, ask yourself the following:

  • Do visitors know what they’ll be getting in return for clicking on your CTA? 
  • Does your headline, subheads, and body copy contain a major pain point and the solution you provide?
  • Will visitors be able to easily repeat your message to others?
study on clarity in company communications
Consumers overwhelmingly value message clarity over design, length, and grammatical correctness.

If you want to clarify your value proposition on your website homepage copy, try the techniques in the following examples:

1. Repeat the Value Proposition

Throughout your homepage copy, repeat the benefits your visitors will get after clicking on your CTA. You can use different words and visuals to reiterate these benefits. In the example below, Gossamer Gear, an online shop selling lightweight travel gear, their value proposition of "ultralight gear" is explicitly stated in their headline. It's also alluded to in their company logo ("Take less. Do more.") and the banner photo shows two hikers that are carrying backpacks that are smaller than usual.

Clear website homepage value proposition example
Repeat your value proposition in several places on your website homepage, including visuals.

2. Specify Why the Proposition Is Important

You can state that your business makes high quality products, has good customer service, or is socially responsible. You can make it even clearer for your audience by being specific about why. On their website homepage, apparel retailer United By Blue emphasizes their social responsibility both in their tagline ("Responsible durable goods") and their content (links to their blog posts on cleaning public spaces and their responsibly-built stores). But their website homepage copy goes the extra mile by specifying the company's efforts by the numbers. 

Example of specificity in homepage copy
Be specific about how you're delivering on your value proposition.

Think about ways you can be more specific in expressing your value proposition. If your unique value proposition is that you help customers save money, note how much they could save. If your business prides itself in making durable products, specify how many years the products tend to last or subject the products to various tests and show your audience the results.

4. Make Your Website Homepage Copy Easy to Scan

Whether your website homepage has long or short copy, it’s important that the text is easy to scan. This is because people tend to scan and skim text online. A study from the Nielsen Norman Group shows that only 16 percent of people read online text word for word. In a more recent study, they also found that people tend to scan heavy text in an F-shaped pattern, which leads them to miss essential information.

F-shaped pattern for reading text online
Large blocks of text on a homepage could lead people to scan it in an F-shaped pattern.

If you don't want your visitors to miss out on your persuasive words or your product's most important features, make sure that the text on your website homepage is easy to scan. Here are some tips you can follow:

  • Break up your homepage content with subheads.
  • Use lists to outline details rather than describe them in paragraphs.
  • Add captions to your images.
  • Use short sentences.
  • If you can present the information faster through visuals, do it rather than relying solely on copy.
  • Avoid small type sizes.

One good example of this principle is found on Barebones Living, which sells outdoor gear. Rather than list out their product categories and elaborate on them with long descriptions, the copy merely states "How do you spend time outdoors?" Pictures and single-word category names do the heavy lifting. Even without reading the words, you can tell which box you're supposed to click. Let's take a look at the website homepage example:

Scannable product categories
Complement simple language with strong visuals for an easy-to-scan website homepage.

The website homepage also makes use of subheads. In the screenshot below, the subhead "Why Barebones?" is followed by smaller subheads such as "Farmers in Africa," "Providing shelter in Nepal," and "Providing food in Utah." Having subheads like these means that visitors will have a concrete idea about the company's projects even if they don't read the short body text. 

Use of subheads in scannable text
Use subheads so that visitors can get the gist of your content even if they skip the paragraphs.

5. Have People in Your Photos

Even if you've got the most photogenic product in the market, it’s best to have people in your product photos — especially on your website homepage. Tests from Visual Website Optimizer show that using human photos instead of illustrations or icons can boost conversion rates. 

More importantly, use real photos of your customers or your staff. Website visitors tend to ignore stock photos of people, according to research from The Nielsen Norman Group.

A good example of this is from the online seed store Renee's Garden. On their website homepage are multiple photos of people on their farm, photos of people they've donated seeds to, and a photo of the owner. Apart from these photos grabbing the eyes, they also build trust since you can see the people behind the business. This instant trust-building is essential for small and micro businesses that don't have as wide a reputation as more established brands.

Example of real people in photos
Using photos of real customers and staff can help build trust and increase conversions.

6. Reduce Risk

Since online small businesses aren't as well-known as bigger brands, consumers might feel that there's some risk buying from them compared to buying from Amazon or Walmart's online stores. Because of this, you need to eliminate any potential risk for your customer. 

W&P Design, a design shop from Brooklyn, makes it clear in their copy above the fold that they offer "Free Returns. No Hassle." If a customer is hesitant to buy because they might end up not liking the product, they know upfront that they can return it without any hassle from the company and without paying extra fees. Here's a look at the website homepage example:

Return policy on website homepage to reduce risk
Displaying a return policy on your website homepage reduces the customers' risk.

Hand-in-hand with reducing your customers' risk is proving that you do deliver on your promises. This is where social proof, such as reviews, case studies, and testimonials come in. Display these on your website homepage if you want customers to trust your business.

Wynd, which sells smart air purifiers, accomplishes this by having a "Reviews" tab above the fold on their homepage. When you click the tab, product reviews pop out. These reviews also show up again in a separate section on the website homepage.

Customer reviews on website homepage
Adding reviews on your website homepage helps minimize the risk for your potential customers.

For detailed advice on how to gather and use feedback on your website, review the following guides:

7. Reveal Your Navigation Menu

While it seems neat and modern to hide your website homepage navigation with a dropdown menu or hamburger icon, this makes it less likely for users to navigate the rest of your site. Research from the Nielsen Norman Group found that the discoverability of a site's pages is cut in half when navigation bars are hidden. It will take longer for visitors to find the other key pages on your site. 

Time to navigation chart
It takes visitors longer to go through a website with hidden navigation.

If there are too many pages on your site, and you can't put them all on your homepage menu without overcrowding, you can opt for "combo navigation." In this format, there are static menu links to important pages on your site, but the rest show up via a dropdown menu. This was the approach used by Johnny's Selected Seeds, an online seed merchant. Since they've got dozens of seeds in their online shop, the main navigation only lists the major categories. The other subcategories are revealed on a dropdown menu.

Example of combo navigation menu
If you've got too many items on your online store, list only the main categories on your menu. The important thing is that there's a visible menu.

8. Try Live Chat

One thing you might want to experiment with is the use of live chat on your website. Live chat is a feature that lets website visitors chat in real-time with you or your staff. You can use live chat to answer their preliminary questions, help them navigate your website, or directly make a sale. For customers, this is easier than calling or emailing your business, since they can chat with you as they're browsing the site. 

JSI Signs, an online sign supply shop, uses live chat to reduce the volume of calls they receive in their store. This also helps the owner multitask, since she could answer questions from potential customers as she's doing other tasks. Let's look at chat in this website homepage example:

Example of live chat on a small business website
Live chat on your website homepage can help you explain products to your website visitors, increasing your conversions.

But there are other important benefits to adding live chat to your website homepage. Live chat can increase conversions by as much as 40 percent, according to a study by Apex Chat. It also provides the highest customer satisfaction levels, with 73 percent of consumers satisfied with the service they get from live chat. Email comes in second with a satisfaction rate of 61 percent.

live chat satisfaction levels
Customers are satisfied with live chat support, more than email, phone, or social media.

If you're interested in giving live chat a go, here are some live chat services you can use:

9. Embed a Video

Adding a video to your homepage can increase conversions. This is true across several product categories, according to a study from Treepodia. Because of this, it might help if you add even a video clip on your website homepage. Keep it short, since engagement tends to drop off when the video is too long. It's best to keep your video shorter than two minutes, according to statistics from Wistia.

Study increase in video conversion rates
Across the above product types, ecommerce conversion rates rose with the addition of video.

As for the video's content, it could be an explainer, customer testimonial, product demo, or even a quick tour of your store. It can be live action or animated, whatever works with your needs and budget. In the example below, Four Sigmatic, a mushroom coffee company, has a video on their homepage where the founder demonstrates how to use their product. Video is especially important for unusual products such as mushroom coffee, which most people might not be familiar with. 

Embedded video on website homepage example
Adding a product demo video can be helpful when selling an unusual product.

10. Simplify

If the above list makes you think that improving your website homepage means adding more elements, that’s not necessarily the case. Each new item you add could distract from your main message and call to action. Also, it can leave a bad impression on your visitors.

Research from Google shows that high visual complexity — the presence of many elements — can affect how appealing your site is to visitors. Sites with low visual complexity were found the most appealing, even if people were only exposed to these sites for 17 milliseconds. In other words, the first impression of your website homepage counts, and this impression should be as simple as possible. Keep this in mind when you're following the above recommendations. Replace unnecessary or ineffective elements rather than add new things to compensate for them.

A Website Homepage That Brings in Business

You've just learned about website homepage design ideas. We've explored some website homepage examples. You should now have some ideas on how to make your website homepage more effective.

Remember, your website homepage should never just be a decorative part of your marketing strategy. Instead, it should play an active role in bringing in sales and repeating your branding message to potential customers. 

If your website homepage doesn't seem to be delivering on that promise, work on some of the recommended changes above. You can start with the ones that are the easiest for you to implement. By making these simple changes, your website homepage might even become one of your most important customer acquisition channels.

Read more: Envato Tuts+ Business