A quick Google search will tell you that fast page speeds, clutter-free design, high-quality photos, and customer reviews are e-commerce web design staples. And we agree!
At a minimum, your website should include all of the above to meet customer expectations and function optimally.
But below these surface-level necessities, there’s deeper psychology to e-commerce website design. Those special touches encourage more sales and set your site apart from the competition.
It can take years of R&D and thousands of dollars towards consultant fees to uncover the trade secrets. So instead, we reached out to web design experts around the world and asked them to share their best pieces of advice.
The result is this 25-point shortcut to designing the most optimized e-commerce website possible.
Deepak Shukla, founder of Pearl Lemon Leads, is a behavioral science expert in persuasive e-commerce tactics. And when it comes to writing your website’s calls to action, he suggests you lean into the power of repetition.
“Including regular and clear calls to action on your site is an effective way to boost sales for two reasons. Firstly, if someone keeps reading “sign up now”, psychologically, they are more likely to do it. Secondly, if you make things as easy as possible for the customer (e.g., by putting call-to-action buttons regularly on the page, so they don’t need to scroll to find the button), they are more likely to click it.”
As tempting as it may be to try out different copy, the more you keep it consistent, the more persuasive it will be.
Color is a powerful communication tool and can signal action, influence mood, and even influence physiological reactions.
Color psychology in sales shows us how different colors can impact how a buyer perceives a brand. For example, blue’s color meaning ties closely to feelings of stability, harmony, peace, calm, and trust.
As a result, some retailers add their guarantee, trust certification, or free shipping icons in a blue color to strengthen this trust signal.
Zachary Thames, CEO of Golden Intellect, notes how symmetry can also play an impactful role in our perceptions.
“Symmetrical objects and images play by the rules that our brains are programmed to recognize easily. Therefore, making sure all the texts and pictures on your site are symmetrical makes it easier and faster for you to process what’s on the page.”
Sebastian Schaeffer, CTO and owner of dofollow.io learned this lesson the hard way.
“One of the quickest ways to lose potential customers and up your bounce rate is if you have any video and audio content on your site set to auto-play. A visitor should always have to click on any media to hear or see it. It is presumptuous and intrusive just to bombard someone with either of these.”
While on the topic of motion, Sebastian also suggests you utilize scrolling content in lieu of autoplay.
“Slideshow content on your home page, whether it be customer reviews or product images, is one of the more popular interactive web design features right now. People tend to enjoy perusing this sort of content much more than static images.”
If you aren’t a design expert, you can use tools like Elementor Pro to help build out this type of content. There are a lot of different scrolling and slideshow-style elements to work with there.
Improving your e-commerce site can be pricey, but it’s important to know what’s worth putting your money towards. For Bret Bonnet at Quality Logo Products, that was user testing.
User testing describes the stage in the design process where you evaluate your website with real users. This allows you to explore and analyze your target audience’s behavior when interacting with your site and give you better insight into how to optimize your page accordingly.
“Ultimately, nothing beats user testing. What works for one website might not work for yours. You’d be amazed to find that what you think is obvious doesn’t make sense to those visiting your website.”
After Bret and his team conducted a $15K user test, they saw their goal completion rate improve by 22%!
There’s a quick trick to making your trust signals more trustworthy, and that’s to include names and faces alongside reviews. As the founder of Rebate Key, Ian Sells has converted hundreds of customers using this technique.
“It sounds weird, but adding an image of a person, in our case, a happy shopper, is more relatable and subconsciously draws people in.”
Sam Orchard from Edge of the Web recommends thinking about your users’ objections and how you can overcome them on your key sales pages. That might look different for different businesses. For example, it could be highlighting your returns policy, offering finance options, or including testimonials.
“One simple trick I’d recommend to boost conversions is using exit modals (or exit intent pop-ups). When a user signals that they’re thinking about leaving the site (for example, their cursor moves up past the top of the screen), presenting a pop-up call to action or offer can help to encourage them to think again and take action.”
Because they’re already about to leave the site, you avoid any risk of annoying the user by obstructing their view of the page, but you gain another chance to win them back.
One way to help your eCommerce website attract more visitors from organic searches is to make sure each product and category page target a different keyword.
Roberto Torres, a Consultant at Turrem, explains how this tactic works on a few levels.
“Targeting different keywords makes sure you are not competing against yourself. For example, if you sell pillows, you can assign the category page to target “couch pillows.” In contrast, your product pages should target a much more descriptive version of each couch pillow: “square cotton couch pillows,” “rectangle microfiber couch pillows,” etc.
Using those targeted keywords in your title, description, and page copy, ensure both your visitors and search engines know what the page is about.”
It’s easy to say “focus on the customer experience,” but how do you go about approaching that? Petra Odak from Better Proposals uses heat maps to observe what areas of their site customers spend the most time browsing.
“A lot of times, it’s not your offer that’s causing your lack of sales. It’s the fact that someone has to work hard to buy from you. We use Hotjar to analyze the paths our customers take before purchasing, and it can reveal some pretty interesting insights. A glitch in your user experience could cause visitors to stop scrolling a page and simply rage quit. Always analyze your user recording sessions and heatmaps, especially for your most important pages.”
Too many e-commerce business owners know how much time they’ve spent finding or creating their product, and they assume everyone else knows about it too.
However, people don’t know how good it is, how to use it, or why to choose your product over others. This is where social proof comes in. Brain Robben, CEO of Robben Media, explains how a social-proof-oriented site can help boost sales.
“You should include a section of video testimonials of customers with your product. State how many years you’ve been in business and how many customers served (assuming the numbers are worth promoting) to drive credibility. These factors instill trust in your prospective buyers and lead to more purchases.”
Sales are made when users click on your calls to action, so you want to make it easy for them to click. If your CTAs don’t stand out on the page, or if they don’t signpost what they do, you will lose out on sales.
Stephen from Nolah Mattress does this by using a button color that contrasts with the page’s background. He also suggests using descriptive text so that your users know exactly what will happen when they click the button.
Marketers also shouldn’t be afraid to split-test CTA elements. Test out different typography, size, and color. Changing one aspect can dramatically improve page performance. In Stephen’s case, he saw a 30% jump in clicks after we purposely made their CTA stand out using a contrasting color from its surroundings.
In this example from Apple, the CTA is colored blue to stand out against the white background. It also features the descriptive text “Add to Bag” that jumps off the page.
A fascinating paradox exists in the world of e-commerce. The more choices shoppers have, the less often they buy. Your site as a whole should offer plenty of varieties of products, but the design should only let the shopper view 3-4 at once.
“If there are too many options visible at one time, you run the risk of customers getting overwhelmed with the choices and bailing on you altogether,” notes Nathan at QuizBreaker
“Limiting the product options will boost sales by helping customers make easier decisions and improving the user experience as a whole. Plus, it provides the bonus of making your site look neat and organized.”
One of the biggest mistakes most e-commerce stores make is not having headers or page titles clear and obvious.
SEO expert at OneFeed Omar Agor-Wood suggests keeping your title short and powerful, making it as easy as possible for visitors to know precisely what they are shopping for and why they should buy it.
A great example of this is MeUndies. The font is bold and engaging, and the header image and text make good use of negative space. The most important aspect of the photo is the clever visual contrast between the light background, the black text and CTA, and the bright colors of the product they are selling.
Immediately, the user is drawn to the most important aspects on the page: the product and its claim to be better than its competitors.
There will be times when someone arrives at your site, like what they see, but get cold feet. Don’t let them go without a fight.
“An email or text list prompt as a person navigates away offering them something of value in exchange for their email address at least means you end up with a lead.” – Bryce Welker, CPA Exam Guy.
Lighthouse is an open-source, automated tool for improving the quality of web pages. It can help developers and non-developers alike assess how user-friendly their site is.
These tools helped Phil Strazzulla at Select Software make improvements that drastically boosted his site’s performance.
“Everyone should use these tools, but they’re beneficial for e-commerce businesses, where ease of use directly correlates with conversion rates.”
For Luat at Scandinavian Biolabs, this means you shouldn’t treat your product page as a listing but rather a landing page where you can include additional information that will convince visitors to buy.
“The product page should still pass the 7 seconds test, but at the same time, you can include reviews, expert testimonials, media, features, scientific results, and guarantees (if any).”
A breadcrumb navigation feature stems from the Hansel and Gretel fairytale, where the witch lures the children with pieces of crumbs to her house.
Similarly, a breadcrumb navigation feature guides users to pages they’ve been to in the past. This way, they don’t have to manually go through multiple pages to arrive at their desired location.
“The breadcrumb navigation feature enhances the user experience since it makes accessibility a non-issue. Additionally, it also tells people where they are, making it easier for them to navigate your website.” – Marina Vaamonde, Property Cashin.
Over at Cardinal Digital Marketing, CEO Alex Membrillo has helped clients level up their websites with smart personalization features.
Things like shopping suggestions are a great way to deliver a concierge-level experience without any manual effort.
For example, the retailer Nordstrom will make purchase recommendations based on the users’ past shopping. They’ll even autofill sizing based on the size you usually buy. This works tremendously for converting sales as they are customizing all shopping recommendations based on size and availability.
In addition to targeting multiple keywords, Roberto Torres at Turrem also shared how important it is to ensure the highest level of security in the website.
“People go to your website to purchase things, and the last thing they need is a website that isn’t credible enough. The special focus should be on secure payment methods, which should be visually emphasized on the website. The more people see proof of security, the easier it will be for them to relax and fully utilize the options.”
When a potential customer stumbles on your site, you already have them in the frame of mind to buy. So why do so many websites lose sales?
Will Ward, CEO at TranslationEquipmentHQ, realized that uncertainty played a massive part in conversion loss.
“When you enter our site, you’ll see that we break down every piece of equipment we sell, from what it does to what it is most suitable for. We don’t mind if that isn’t what a particular customer is looking for because the truth is taking away uncertainty about a purchase boosts sales overall.”
When they changed their page to feature products this way, they saw a 34% increase in sales conversions.
A great way William Schumacher at Uprising Food found to increase revenue on their site is to offer live chat.
Live chat is great because it gives consumers accessibility straight from your website without abandoning to seek support elsewhere.
“Comfort and ease are what help create good relationships with your clients, as the nature of assistance and the speed at which this assistance is provided are also the two most cited reasons that consumers feel they have had a pleasant company experience.”
A live chat is excellent (clearly), but Simon Dwight from SDK Marketing suggests you take it a step further and offer your online visitors a multi-channel contact option.
“Just like in a brick-and-mortar store, if you have questions, you won’t be waiting long for help before you leave. Remember, many visitors are window shopping but are ready to convert with a bit of help. They’ll buy from whoever can answer their question as quickly as possible in a satisfactory manner.”
Studies show that website visitors from PC strongly prefer a chat option, and mobile device visitors are evenly split between choosing chat and mobile-specific instant contact.
Reece Griffin at TBA Digital was working with MirrorTrip, who wanted to increase their number of car rentals.
Using Google Optimize A/B tests, they found that the inclusion of a free widget that embeds Google reviews onto your website helped tremendously.
“We found that there was a 30% increase of engagement events across the board directly resulting from the widget addition.”
Another easy tip to improve your e-commerce design and boost your sales is to state the shipping time and costs on your product page and on your checkout page.
“Visitors strongly dislike having to enter personal details just to check for the shipping times and costs. Adding this information to your checkout page will already boost your conversion rate, but adding them to your product page too is even better.”- Benoit Lacroix, Portmoni.
Hate when you’re reading about a product, and as you scroll, you can no longer see a photo of what you’re reading about?
The simple solution Casey Allen at Barista Warrior suggests: make your images sticky.
By sticky, he means it shouldn’t disappear when people scroll down to read the product description. The image should stick to the page as it does here!
If one thing is evident here, it’s that the customer experience is king. Another way to put the customer first? Let them choose what channel they want to hear from you on. ,
We can help you text enable your e-commerce site and take advantage of texting’s 29% conversion rates.
Give us a try for free for 14-days to see for yourself!
Honey + Thyme’s mouthwatering menu changes every week. Text messages help them keep customers up-to-date on the latest items that are available to order.Read