In this article
When you have a product to sell online, designing the website can often feel like an afterthought.
You might think that how the website looks doesn't really matter, so long as users can add the product to cart, key in their credit card number, and ship it.
And you'd be wrong.
When it comes to web design, looks do matter.
In fact, it sometimes matters more than the product you're selling!
Customers judge you instantly – in less than a tenth of a second.
- Studies by Stanford University have suggested that people quickly evaluate a site's credibility based on visual design alone.
- Another study has shown that visitors take only 50ms to decide whether they like a website or not.
Your superb product might not get the exposure it deserves because your website is driving visitors away even before they get to see it!
So how should you go about making your customers love your website?
1. Reduce page-loading time - Ain't nobody got time for that
10 years ago, we were willing to wait several minutes for the Neopets page to load. It was the age of dial-up, so that was forgivable.
For Google, an additional 0.4 seconds would cost 8 million searches a day.
In 2009, 47% of users expected webpages to load in 2 seconds or less, and almost 50% of users would abandon the web page if the loading time took more than 3 seconds.
There are many ways to speed up page-loading, from easy tweaks to advanced tricks.
- Avoid images that are too high-resolution, even though you can set the image size attributes in HTML. Resize your images to their appropriate size before uploading.
- Avoid using picture formats that are not optimized for web (e.g. TIF); use web-optimized image formats like GIF, JPEG or PNG instead.
P.S. If you have done everything you possibly could to speed up your site, but it still loads slow at times, you might want to consider changing your customer's perception that the wait is worthwhile.
2. Communicate your website elements clearly - Don't keep us guessing
When people visit a site, they should be able to tell what the purpose of the site is.
If they have to guess what the site is supposed to do, then there's a good chance they won't be staying.
Ensure that your website communicates the following clearly:
- Have your company brand name and logo placed in a prominent location. It is your pride and joy, after all.
- Explain what your company does (e.g. We provide the best automated referral marketing software to online retailers).
- Provide clear indication of what to do next (e.g. provide clear menus and buttons for users to navigate).
In the case of TOMS' homepage, it is obvious that they sell footwear. The menu is visible, and their most important information is shown clearly: their new fall collection and their "One for One" brand philosophy.
Social media logos on sharing buttons can also be accompanied by text instructions like "Share this on Twitter", to minimize guessing.
Read next: TOMS marketing strategy
3. Avoid horizontal scrolling - It's just unnatural
Anecdotal evidence collected by the Nielsen Norman Group suggested that most users scroll using the scrollbar, and dragging it horizontally can be a chore. In fact, many people who were asked about horizontal scrolling displayed negative responses, with some even stating that they hated it.
Vertical scrolling is also easier and more habitual than horizontal when considering physical apparatuses like the mouse or trackpad.
Horizontal scrolling might provide more space to display information, but most users would just scroll past everything because they assume that whatever they see is all there is.
Understand that not all users will scroll through the horizontal content.
Once you do, you'll naturally avoid placing your most important information there.
Instead, use menu categories for the most important stuff, so that all users can navigate easily without touching the horizontal scrollbar.
If you do decide to utilize horizontal scrolling, indicate how much information is left (e.g. page 2 of 10).
Another good tip is to allow users to scroll through by pressing the left or right arrow keys, just like Amazon:
4. Don't be afraid of putting content below the fold - We are fine with scrolling down.
In web design, "above the fold" is a term used to refer to the space on webpages that is visible without scrolling.
The term originated from the newspaper industry, where the space above the horizontal fold was what everyone saw before buying a copy. it was regarded as the most influential portion of the newspaper.
A study by the Nielsen Norman Group showed that 80.3% of users' viewing time were spent above the fold, and less than 20% was given below the fold.
Their advice was to place the most important content above the fold, as minimal attention would be spent below the fold.
While that is very sound advice, it has been shown by other studies, namely those by cxpartners, that the "above the fold" concept is outdated and inaccurate in modern web browsing standards.
"Above the fold" website designs were popular when users were new to the Internet, and not used to scrolling down.
Be in on a desktop or on a mobile device, many websites and apps require us to scroll. For instance, all social media sites feature extensive scrolling.
Cxpartners have shown that the browser scrollbar acts as an indication of content below the fold, and that lesser content above the fold actually encourages users to scroll down!
So don't worry about having content below the fold.
It's normal to have the most important and attention-grabbing content above the fold, but users are now accustomed to scrolling down for more.
5. Give responsive feedback for customer actions - Was it added to the cart or not?
People want feedback for their actions.
When it comes to web browsing, a lack of feedback could mean a lag, a screen freeze, or a system hang. This feedback is crucial if the item is in short supply, or under a competitive discount.
Avoid making your shopping cart feedback too subtle.
People end up getting confused, wondering if their action was processed. They then click a few more times, resulting in multiple entries of the same product.
Make it obvious that an addition to the cart has been registered.
Have a pop-up window saying “item has been added to cart; do you want to visit your cart, or continue shopping?”, like Cole Haan:
6. Apply coupons right at the start - or none at all.
Everyone likes discounts.
What they don't like, though, is being forced to create an account before they can obtain the discount code. This is one of the factors resulting in shopping cart abandonment.
If you want to offer discounts, allow customers who qualify for the discount to have the it applied automatically before checkout. It makes them happier knowing that they have already profited before checking out (I know I will).
For customers who do not qualify for the discount, ensure that the discount code box is not visible during checkout. Customers who see the discount code box but do not have one will often go back to search.
According to Conversion Doctor Eric Graham, customers who are unable to find a code from your website often leave the site to search for a code on Google. That is another factor behind shopping cart abandonment.
It might not seem like a big deal, but the removal of the coupon code box during checkout resulted in an additional $1,000,000 per year for one of Eric's clients; an online retailer selling women's clothing!
Read next: How to setup referral incentives
7. Optimize for mobile - For those on-the-go.
Mobile usage is really going crazy.
But what does optimizing for mobile really mean?
Optimizing for mobile doesn't mean cramming the desktop site into mobile browsing dimensions. It means adapting to the behaviors of mobile users.
That includes prioritizing important information and visuals at the top, and making changes to fit the elements in a smaller screen.
Firstly, remember that your mobile site is not a mini version of your desktop site - you browse the former in portrait, and the latter in landscape.
Adapt to the behavior of mobile users.
This means prioritising important information and visuals at the top, and adjusting the elements to fit a smaller screen.
The visuals for the shopping cart, user login and search have been modified to fit into a smartphone screen. Users are also able to swipe horizontally or press the arrows to reveal the other tie patterns.
Additionally, consider using text instead of images to optimize for smaller screens, like in the case of TOMS.
TOMS' mobile site uses text instead of images in their menus, allowing for more efficient navigation. More information can be placed within the screen, requiring lesser scrolling.
8. Redesign your checkout flow
One of the first things we do with any new ecommerce client’s store page is audit their checkout flow from beginning to end. From form fields to payment options, social proof to security certificates, and more, we look at the entire process a would-be customer has to go through in order to complete a purchase.
You’d be surprised at how much actionable insight you can find with a deep audit like this. This process is both data-driven and based on best practices, from looking at Google Analytics to understand where in the checkout process most visitors bounce to understanding that adding one-click payment options like PayPal and Amazon Pay increase completed purchases.
So with that in mind, here are steps to follow as you look at your ecommerce store’s checkout flow:
A. Look at the analytics: Dive into your analytics platform of choice and look at the behavior flow of people who land on your checkout page. At what stage in the process do they drop off?
A few actionable insights you can gather here are:
- If they drop off immediately upon seeing your checkout page, there might be something that’s immediately driving them away. Look at the first step in your checkout page. Are you forcing people to sign up for an account just to start the process? Or do you present them with a dozen form fields at once and overwhelm them?
- If they drop off upon reaching any other step in the checkout process, you might be requiring too many steps to finalize checkout. There’s a sweet spot to hit between overloading a single page with too many form fields and requiring too many steps to check out. At some point, a potential customer might get frustrated.
- On the other hand, if someone drops off and you’re certain you’re not requiring too many steps, chances are something on those pages is driving them away. Look at the page that shows the highest percent of bouncing traffic. What’s going wrong there? Maybe your credit card entry form doesn’t look trustworthy, or maybe something’s entirely broken with the flow.
B. Consider best practices: One major thing that articles about ecommerce conversion are useful for is understanding best practices. Things like adding more payment options, removing or consolidating form fields, auto-filling form fields for billing from shipping, and the like all decrease time-to-close for a sale.
Look through your current checkout flow and compare against best practices established by ecommerce giants and startups alike, from Amazon to Jet.com to Walmart and beyond.
And don’t JUST look at what they do well. Act like a customer and look at what they do poorly. Amazon, for example, could easily clean up their checkout interface to make it easier to navigate and complete a purchase.
Actionable insights from this step include:
- Adding automated payment systems like Amazon Pay and PayPal can greatly increase conversion rates. They enable users to run through a payment flow that they both trust and already have their billing details entered into. This removes a ton of friction in the process, and even if it might result in a slightly higher cut taken via payment processing, you land a sale that you otherwise may have lost.
- Consolidating fields like First & Last Name, Address 1 & Address 2; removing unnecessary fields like Phone Number; providing the option to register for an account rather than mandating it; enabling auto-fill for duplicate fields across shipping and billing; all of these steps serve to remove friction from the checkout process. These simplification steps based on best practices can provide immediate benefits by making the checkout process less of a hassle and more of a no-brainer.
C. Implement, but A/B test: One of the most important things you should consider about any changes to your website, but especially ones related to your checkout flow, is that you should never make changes that aren’t data-driven. For that, you need to first gather data.
So for example, if you want to see whether adding the option to checkout with Amazon Pay and PayPal actually helps increase conversions, you can implement those systems into your ecommerce store’s checkout flow, add buttons for them, and then use your split-testing platform of choice to hide the buttons for 50% of traffic to that part of your checkout flow.
In that situation, half of the traffic will see your checkout flow as it was -- with just a credit card form field available -- and the other half will see options to check out with an automated payment system.
From there, track events that are related to both clicks on those buttons and final conversion revenue to see which variation drove more completed purchases.
Finally, based on the results and data, you can make a decision that will drive ROI for your business.
9. Build trust with social proof & security
Whether it’s small startups or large brands, a major thing that gets lost in the process of building a high-converting ecommerce store is how trustworthy your site looks. Whether it’s customer reviews, an SSL certificate, logos for security services like VeriSign, or even just being upfront about the fact that your checkout flow is encrypted, all of these small measures can take a lot of worry and stress off the minds of your potential customers.
Think about it this way: If you were to visit a site that didn’t have a security certificate, wasn’t clear about how secure its checkout system was, and had no reviews available for its products, would you want to buy anything?
Chances are your answer is “No.” That’d be my answer too.
So here’s what you can do to increase the trustworthiness of your ecommerce store:
A/B test adding security-related logos & copy: Create a new variation of parts of your ecommerce store, whether that’s just your store’s homepage, your checkout flow, or some of your product pages, to test whether adding logos and copy that scream “our site is secure!” will increase conversion.
Gather product reviews from customers: If you aren’t doing so already directly on your store product pages, you should have your marketing and customer experience teams put together email campaigns that ask your current customers for product reviews.
Because a 0-star product with 0 reviews, or a 5-star product with 2 reviews, will get nowhere near the same amount of trust factor as a 4.2-star product with 459 reviews.
This goes back to best practices. Think about the last time you shopped on Amazon. I’m personally much more likely to look for and buy products that have reviews than ones that don’t, and most shoppers are the same.
Sending an email to a customer a week or so after they’ve received their product to ask them what they think is a great way to gather reviews for your products. Just make sure you’re being fair about the way you’re adding these reviews to your site. You can get yourself in deep PR trouble if you censor reviews or only include positive reviews.
Set up SSL for your site: Use a service like DigiCert or look at your current cloud hosting service to set up an SSL certificate for your website. This may not seem like the most effective use of money or time for your eCommerce store, but remember that online security is front-of-mind for most shoppers these days.
With credit card fraud still running rampant and constant news on the latest breaches of passwords and secure systems by both governments and hackers, people are on edge and less willing to share their personal details with any site that doesn’t seem secure.
An SSL security certificate is an extremely important positive step forward on that front, even if it’s not necessarily a test-driven marketing tactic.
10. Use high-quality product images
A huge conversion killer for many ecommerce stores is small, low-quality images of their products. Part of the sales process and psychology for ecommerce shopping is being able to imagine yourself with and using the product, whether it’s an article of clothing or a piece of tech.
That’s why sites like Amazon go through painstaking efforts to make sure all their product listings have multiple images at ridiculously high resolutions. That’s why Levi’s, Gap, etc. not only provide shots with models wearing their clothes, but allow you to hover over and zoom in on those products.
The difference between shopping online and in a store is the physical element of touching and feeling the item you’re considering buying. Removing a bit of that friction by adding high-quality product images not only makes your site look better, but it can potentially drive major boosts in performance for your site.
Here’s how to act on this tactic:
Evaluate performance of your product pages: Using heatmap features of tools like HotJar or Sumo, you can track clicks and actions on your product pages directly to see whether people are actually clicking on product images or not.
From here you can gather the following insights:
- If people are clicking images a lot but you don’t offer a zoomed-in version of them, then there’s an immediate quality of life improvement you can act on.
- If people are clicking images a lot but not converting, chances are the images aren’t high enough in quality to drive more interest.
- If people aren’t clicking your images at all AND not converting, your default images for your product aren’t catching their attention.
Take high-quality product shots: Invest in actual product photography. This is an up-front investment that pays dividends down the line. If you’re an eCommerce store that sells products made by other companies, have them send you higher-quality product shots. If you sell your own products, put them in real-life situations and have a professional create or design high-quality images.
A/B test on your best products first: You don’t have to go all-in with step 2 if you don’t have the funds to make it happen for every product line.
Instead, you can invest in top-notch imagery for your 2-3 best-selling, highest-traffic products and then run an A/B test where you keep your original version with the old images and create a variant that has the new higher-quality images displayed. From here, you can track which version gets more Add to Cart actions, more purchases, and more revenue driven.
Make a data-driven decision on imagery: The above steps will give you all you need to make a decision based on hard numbers rather than guesswork. From there you can decide exactly how much money to spend on revamping your product pages to better capitalize on high-quality imagery.
- Reduce page-loading time
- Communicate your website elements clearly (reduce cognitive effort!)
- Avoid unnatural horizontal scrolling
- It's okay to have content below the fold
- Give responsive feedback to your customer actions (Was it added to the cart or not?)
- Apply coupons right at the start or not at all
- Optimize for Mobile
- Redesign your checkout flow
- Build trust with social proof & security
- Use high-quality product images