When it comes to website design, it’s easy to get carried away with how it looks. Does that button look good? Maybe I should round the corners? Should I make the hamburger menu white, perhaps it should be blue? What if I put a carousel gallery there? Or, I really like that background pattern. I’m going to put that here, here, and here.
But the best-looking website will fall flat if you don’t make it easy to use and for your customers to learn more about your product or easy for them to shop.
So what makes a good product website?
1. First, ask yourself, what’s the goal of your website?
3. Make it readable.
4. Navigation, make it easy for your customers to get around.
5. Make it responsive (aka, mobile-friendly).
6. Consider the page speed or load time.
7. Play nice, and make it accessible to everyone.
8. Create a clear call to action.
What’s the Goal of Your Website?
First thing first, decide what you want your website to do.
Are you selling your product or educating customers and sending them to their local store to buy your product? Or maybe your goal is to create more brand awareness. Or build a community? No matter what your goal, here’s some tried and true methods to make sure your product website not only shines but is user-friendly to boot.
Consistent Branding
This is one of the biggest challenges facing most companies, big or small, today. But what does it mean to have consistent branding on your website?
Your branding is the gut feeling your customer has about your product or service. With consistent branding, you can—
-
-
- Help customers identify you easily.
- Create a positive experience.
- Express your brand’s personality and stand out.
- Build trust.
- Create lifelong loyal customers.
-
From the tone of writing to colors, backgrounds, typography, and the layout, it should all work together to support your product and make it easy to identify. Think about Coca-Cola or Apple. If Coca-Cola used blue in a print ad or Apple replaced their font with a script, you’d wonder if it was a rip-off or scam. It’s just not them.
So here are a few ways you can create a better user experience for your customers using consistent branding alone.
Your Logo
Use your company logo in the favicon. Also, make sure your logo and company name are represented the same way throughout your website and appear in the header menu on every page.
Graphics
Ah, design and graphics, my favorite part, naturally. But use caution here and be intentional. Only use graphics to help your customer complete a task, perform a specific function, or evoke an emotional response. (Don’t just add graphics willy-nilly).
➾ Add a personal touch by including people in your photos you create an instant connection with your audience. Your customers want to know the story behind your brand — that there’s a real name, face, and story behind your product, so add some personal touches to your website.
Writing Tone
Define your brand’s tone upfront. It should reflect your brand’s personality. Use specific words or phrases and choose how your brand communicates to your customers. Your writing tone can help you build credibility with your customers. Be direct and honest about what your product does and doesn’t do. Don’t bury important information and make your customers dig through pages and pages of your website to figure out the features and benefits of your product. Learn more from Semrush on how to define your tone.
Fonts
Use the same fonts across your website, from white papers, blog posts, graphics to videos. And don’t use too much variety—use three fonts max and make sure they’re readable. (We’ll dive into readability more below).
Colors
Your colors should reinforce your brand, evoke an emotional response, look good together, and be consistent. Consistentency in color will help you become easily recognizable in your customers’ mind. But don’t overdo it. Keep your palette simple and use only 3–7 colors. Less is more.
Whitespace
Not only does using whitespace make it easier for your customer to breathe, but it makes the information easier to digest and draw their focus to the information you want them to read. Plus, according to research in 2004, whitespace increases comprehension by almost 20%, which means they’ll remember it too. Bonus!
➾ Need another reason not to clutter up your website? A cluttered website makes it hard for users to know where to go next, what they should read, or what they should click. If you use whitespace effectively, you can direct your customer’s attention and reduce exit rates.
Pro Tip: Develop a style guide and hand it off to your web designer and developer when you get started redesigning your site. This will save you time and money in the long run. Check out this style guide I did many moons ago for Alpha Hydrox to get inspiration for yours.
Need Inspiration? Check out these CPG websites.
Coca-Cola
- They consistently use red, white, and black throughout their site.
- The fonts are simple and easy to read.
- They use images of people to add a human touch.
Blueland
- I love the calming colors on this site. It makes me feel like I’m saving the dolphins from needless plastic from the get-go.
- They use their whitespace to direct your eye, and I like the animated GIFs sprinkled throughout. It adds a bit of whimsy.
Pro Tip: Images, icons, or any graphic should help tell your product’s story and educate and inform your customers. Use a visual hierarchy, meaning arrange and organize the elements of your website, so your customers naturally gravitate toward the most important thing first. And use them to lead your customer to the action you want them to take. That leads us to the next item on our list…
Make It Readable
Typography is your friend here. Use it to create a hierarchy. This simply means that your headline should be the biggest and your subtitles smaller than your headline. See the sample below.
If you want something to stand out or emphasize, bold it or italicize it. Avoid underlining your text because this is reserved for links only.
Ask yourself these questions…
- Is it easy to read? Make sure the typefaces are readable, nothing too artsy, and minimal script fonts?
- Can I quickly skim it?
- Is it Accessible to all users? (Read more about this below).
- Is it legible across devices and screen sizes? (Test it out on different mobile devices, tablets, desktop computers, and browsers).
Pro Tip: I like to create a site map for my clients in Adobe XD so that we have a rough idea of how a user will move for the site. It’s like a road map for your website. Check out this one I did for LiveLoveDance.net.
In the meantime, though, here’s a rough guide to get you started—
Level 1: Your root domain. This should be in the highest position.
Level 2: Product pages and blogs, pages that should help your customers navigate to different areas of your website.
Level 3: Individual product pages and blog posts.
Know What Your Customer Expects…
I’m a big fan of knowing the rules so you can break them, but in the case of your product’s website, it’s best to stick to the expectations and conventions we’ve all grown to know and love when it comes to website design.
- Place the main Navigation at the top (or left side) of a page.
- Place a logo at the top left (or center) of a page.
- Make the logo clickable so it brings a visitor back to the homepage.
- Links and buttons should change color or appearance when you hover over them.
- An eCommerce site should use a shopping cart and a number icon signifying the number of items in the cart.
- Make sure image sliders have buttons users can click to manually rotate slides.
Think of it like highway signs. You wouldn’t switch out a railroad crossing sign with a stop sign just because you felt like it. There’s still plenty of room for creativity without throwing the baby out with the bathwater. If you do, you run the risk of creating user frustration and selling fewer products in the long run.
Navigation Tips for Your Consumer Products Website
- Include your Navigation in your footer.
- If you have a large site try using breadcrumbs to remind the user of the path they took to get where they’re at on your site.
- Include a search bar in your top navigation bar.
- Don’t have too many menu items. Too many options are like movie night at my house. We spend an hour picking one out that everyone likes and everyone ends up frustrated in the end. Now I pick three and everyone votes, it’s much simpler and usually, everyone’s happy.
- Make it clear where your page links go.
- Include links in your copy.
- Create a site map, check out this one I did in Adobe XD for LiveLoveDance.net
- Keep your Navigation consistent on every page.
Want more? Check out HubSpot’s complete Guide to Website Navigation.
Make It Responsive
According to HubSpot’s research, 93% of people have left a website because it didn’t display correctly on their device.
This means if you really want to move more products, your site has to be viewable and shoppable on the device your customer is using. This way, whether your customer is on a phone, tablet, or desktop computer, they’ll have an outstanding customer experience.
The site below was designed in BigCommerce. A theme was applied, and the content was designed to automatically resize to fit the screen.
Pro Tip: I like to create a site map for my clients in Adobe XD so that we have a rough idea of how a user will move for the site. It’s like a road map for your website. Check out this one I did for LiveLoveDance.net.
Page Speed
We could all use a little optimization when it comes to page speed, myself included.
But why does it matter? People’s attention spans are shrinking. Gone are the days of dial-up. We want our pages to load instantaneously. A one second delay in page load time can lead to a 7% loss in conversions, 11% fewer page views, and a 16% decrease in customer satisfaction. This means your customer left the room before you even got to shake hands. To make matters worse, Google and other search engines penalize slow sites and push their listings forth down the results list. Ain’t nobody got time for that.
Read WPBeginner’s The Ultimate Guide to Boost WordPress Speed & Performance if you have a WordPress site. Or read this guide from HubSpot on 9 Quick Ways to Reduce Your Website’s Page Loading Speed.
Accessibility
You don’t want to miss a sales opportunity, which means you want to make a site that anyone can use, including those with disabilities or other limitations.
You’re in luck because the Web Accessibly Initiative and WC3 (or the World Wide Web Consortium) have put together a technical guideline for you to follow — the WCAG (aka the Web Content Accessibility Guidelines).
If clicking on that link and reading it all is a bit overwhelming, in a nutshell, here are the guidelines—
Perceivable: Visitors are aware of the content on your site.
Operable: Visitors can use your site in a variety of ways.
Understandable: Visitors can understand your content and alerts easily.
Robust: Visitors can use different assistive technology across your site.
To learn more, check out this article by HubSpot Exception Website Design and Usability.
Have a Clear Call to Action
Your website should meet your customer where they’re at in the buyer’s journey and direct them to what action you want them to take next. In other words, each page should have a clear call to action.
Awareness Stage
This is where the customer identifies a need or problem. They aren’t ready to buy yet but are defining what they need. It’s the point where you make them aware of your product, what it does, and how it can help them.
Think of this as educational content where you can position yourself as the expert. You know the guy. He’s the helpful friend that has been to Disney World half a dozen times and knows way more than you do and is your go-to guy when you’re thinking of planning your own trip. Below are some offers you might consider during this stage.
Offers:
- Surveys
- Checklists
- Whitepapers
- Questionnaires
- Free eBooks
- Educational Videos
- How-To Guides
Consideration Stage
In this stage, the customer knows what they want or need to solve their problem, and they’re researching ways to solve it and need to time mull things over before picking the best solution for them. Be sure to be honest in this stage and outline the pros and cons of your product.
Offers:
- Videos comparing you to the other guy
- Infographics with quick facts or solutions
- Free webinars
- Case Studies
- Free Samples
- Catalogs
- Consultations
- Product Comparisons & Guides
Decision Stage
Eventually, the buyer will narrow down their choices and decide what specific brand or product they think will resolve their problem best.
In this stage of the game, you can be more assertive using words like “Now” or “Today” in your CTA and go the whole hog promoting your product as the solution.
Offers:
- Free Trials
- Estimates or Quotes
- Coupons or Discount Codes
- Demos
It’s All About Your Customer
In the end, it should be about your customer’s experience on your website, make it easy for them to say yes to you by using the following principles in your next consumer products website. If you’re thinking of launching your own eCommerce site be sure to download our eCommerce getting started guide to help you get started off on the right foot.
1. First, what’s the goal of your website?
3. Make it readable.
4. Navigation, make it easy for your customers to get around.
5. Make it responsive (aka, mobile-friendly).
6. Consider the page speed or load time.
7. Play nice, and make it accessible to everyone.
8. Create a clear call to action.
Like this article? You might also like…
Why Your Business Needs a Website and Not Just a Facebook Page
As most folks know, whether they’re on social media or not, on October 4th, Facebook, Instagram, and WhatsApp were all out of commission for 6 hours, which felt like an eternity for my teenage daughter but had me half wishing for simpler times when social media didn’t...
How to Design a Landing Page for Nonprofits
What is a landing page? According to HubSpot, a landing page's "purpose is to encourage you to convert to a lead or customer. " There are several kinds of landing pages, but regardless the goal is always the same — generate more leads. Or, in the case of your...
Do you need help designing marketing that grabs your customers' attention and engages them?
Give us a holler and schedule a complimentary 30-minute Discovery call, we’d love to help you reach your customers and sell more products.