Good design drives 94% of the first impressions and 75% of your store’s credibility.
Safe to say, design matters when it comes to conversions.
And the good news is that even small optimizations can get shoppers to take the next step.
1. Place your images in the first or last “third”
2. Use negative space smartly
3. Place elements based on eye-scanning patterns
4. Follow “visual hierarchy” in your website copy
5. Design super clear CTAs
6. Structure your product descriptions for better readability
7. Reduce clicks to checkout
8. Use color psychology to draw attention
9. Place reviews where people are most likely to read them
10. Use patterns and repetitions to draw attention
11. Group strategically – induce action
12. Nudge visitors to search
13. Design to improve up-sells and cross-sells
14. Run "thumb zone" test on your mobile site
15. Clean your checkout page
16. Place a global header – with offers
17. Create a section for categories – outside the hamburger menu
Website design changes for more conversions
1. Place your images in the first or last “third”
A large image with elements all across the screen distracts shoppers.
The best way to display pictures on your website – use the rule of thirds – especially in the first fold of your homepage.
Simply put – divide your display area into three parts – and use the major subject in the leftmost or rightmost third.
Leave the rest two-thirds freer – avoid adding images in this part.
Toms does this quite well. Their image is in the first third and they have used the rest of the space for text and CTA – de-cluttered, elegant and easy to navigate.
2. Use negative space smartly
Negative space is nothing but whitespace – the space you are not using on your website. Contrary to the word, it is quite positive for you as it makes your site more scannable – improving conversions. Here are a few ways to improve the negative space:
- Use a smaller font – it allows more space between the letters
- Your line height should be approximately 150% of the font size for the body copy (in CSS, this would read: line-height: 1.5)
- Break large text boxes into smaller paragraphs
- Add extra margins and padding
Let’s look at MVMT – they have aced their whitespace – made their website really easy to scan.
3. Place elements based on eye-scanning patterns
To know which spots shoppers look at the most, let’s understand the F-shaped scanning style.
The shoppers begin from the left top corner and read to the right → scroll down and repeat.
How to use the F-shaped scanning style to increase action on your website?
- Place the main CTAs on the top of the page – ideally on the left side
- Lesser important information, such as sponsored ads, can go in the sidebar on the right-hand side of your page
- The least important information – like your cookie policy, can go to the bottom right-hand corner of the page
- Apply this to your navigation bar – add links from left to right based on priority. For example: Important categories on the left and fields like Contact Us on the right
Verve coffee uses an F-style scanning pattern to its advantage – keeps all the important information, CTAs and other links on the left.
4. Follow “visual hierarchy” in your website copy
Unintuitive text styles and font sizes can bewilder your shoppers – so much that they can permanently lose trust in your brand.
Here are a few simple steps that will make your online store look neat.
- Use a combination of two fonts – one for the headlines and one for other texts – make sure they do not contrast too much
- Information that has to be highlighted should be in a larger and bolder text
- Supplementary text should be in smaller and less dominant font
- The hierarchy should look like – large headline, then move on to mid-sized subheadings, and then a smaller body copy
5. Design super clear CTAs
You must give your shoppers very clear instructions as to what they should do next – that’s how you bring them down the funnel.
This is done through well-crafted CTAs.
Here’s a small checklist for you to create powerful CTAs:
- Make the button look clickable (may seem obvious, but very important!) – add an underline, contouring or just put it in a shaded box
- Have your CTA change color when someone hovers over it
- Offer compelling copy on your CTAs – write what exactly they will get after clicking
- Color your CTA buttons bold and high-contrast
- Add arrows on your buttons as a directional cue
- Add sufficient whitespace around your button so that it doesn’t get lost in between other details
Recommended reading: 22 Ways to Use Visual Cues to Drive More Conversions in eCommerce
6. Structure your product descriptions for better readability
The best way to lose a customer is to give them big lumps of product information – hence design your product descriptions in a way that can be consumed quickly.
Some tips that work are:
- Break paragraphs into bullets – make each bullet 3-5 words
- Replace words with icons
- Add a condensed FAQ section right under the buy section – either as FAQ or additional details
7. Reduce clicks to checkout
As we have been saying – time is of the essence. Giving time to shoppers only makes them rethink their purchase – super detrimental.
What needs to be done is – minimize the steps to checkout.
The simplest way to do this is to add a direct ‘Buy’ button and make the ‘Add to cart’ step optional for the shoppers – as a secondary CTA.
Psst. The primary CTA - ‘Order Now’ works slightly better than ‘Buy Now’ on product pages. You might want to test it out.
8. Use color psychology to draw attention
Work on color contrast to catch attention.
Use contrast to keep text, headlines, and call-to-action buttons highly noticeable.
For instance, design your font and button colors in high contrast (e.g. dark red) against the background (e.g. white or light yellow).
The elements that you want to highlight (e.g. subscribe buttons) should be in a color that stands out from the rest of your site.
Notice how Bliss plays with colors and makes their product images and CTAs really stand out:
Recommended reading: 26 Amazing Product Page Design Examples in eCommerce (+ Expert Advice)
9. Place reviews where people are most likely to read them
When you speak for yourself – it's salesy but when your happy customers speak for you – it’s authentic.
Now, what’s important is that these reviews must find the right place on your website to catch the attention of your shoppers.
Let’s get into some best practices:
- Add star ratings in the buy section
- Mention the best review in one line under the heading – along with the name of the customer
- Link the ratings to more reviews – which are placed in the third or fourth fold
- Encourage customers to add a picture of the product they receive along with the review – remember more visuals are always better
Tarte Cosmetics puts a couple of reviews in their buy section – instills confidence in new shoppers immediately.
10. Use patterns and repetitions to draw attention
The human brain naturally seeks out patterns – and these patterns give your shoppers a sense of comfort – easing for them to make buying decisions.
How to use this on your website?
- Arrange product listings in a grid layout – keeping the dimensions the same for all products
- Do not vastly change the layouts of different pages
- If your website has blogs, organize them side by side
- Keep the colors consistent – do not change the color patterns on different pages
- Do not change the newsletter signup form at different spots
Tuft and Needle follows the same pattern for displaying different sections on their website – making the website extremely intuitive for the shoppers.
11. Group strategically – induce action
Shoppers will not scroll below the buy section if the section doesn’t convince them – this happens more often than you can imagine.
Which again hints at catching attention – fast.
Our recommendation is to group the most high-value elements so that the shoppers read them in one go. These elements can include headline, price, ratings, offers, a small description, options and CTA.
Group what’s the most important to your shoppers and create a convincing buy section.
Pro tip: Nudge shoppers to scroll down – where you have more information to convince them to buy, just like Room and Board does – they show how to style the product upon scrolling.
Bonus pro tip: Don’t let your CTA go out of view. Add a sticky bar with the ‘Order Now’ or ‘Add to cart’ CTA.
Recommended reading: 33 eCommerce Product Page Optimization Hacks (+ Examples)
12. Nudge visitors to search
Some of your website visitors come with a clear intent to purchase – and they know what they want. These users search for products using the search bar.
For such cases, your search bar must be optimized. (Would be pretty bad if you lost high-intent customers just because they couldn’t find the right product 🙁).
- Make sure your search bar is a bar and not an icon
- Place it at the top of the page
- The bar should include the word – search
- Don’t forget to add a magnifying glass icon to the bar
- Let the search bar provide drop-down product suggestions
13. Design to improve up-sells and cross-sells
When your shoppers upgrade their products or add something unplanned to their cart – more often than not it is the design that pushes them rather than the utility of those products.
The way you display products for upsells and cross-sells can significantly impact your conversions and AOV.
For up-sell:
- Let shoppers choose the upgraded product in the buy section itself
- Mention the added utility of the higher version
For cross-sell:
- Recommend related products during the checkout process
- You can also recommend complementary products in the ‘Added to cart’ confirmation popup
- Make sure to show the prices and important specifications of these products
- Do not show more than 2-4 options – we don’t want to overwhelm our shoppers
14. Run "thumb zone" test on your mobile site
After working with 500+ brands, we can tell you that optimizing for mobile is not a choice – it needs to be every eCommerce brand owner’s priority.
We are not talking major revamps here – just a few changes that will exponentially improve shopping experiences.
First step towards it – optimizing the thumb zone.
Place all the buttons in the thumb zone – don’t make your shoppers work hard for a click :)
Make your CTAs, pages, forms, quizzes, filters etc. accessible in the thumb zone itself.
Recommended reading: 25 amazing (& high-converting) mobile checkout examples
15. Clean your checkout page
For all the pages of your website, we discuss unique design elements to boost conversions. But the checkout page is just the opposite – it needs to be simple.
Customers don't want to be bombarded with offers and pop-ups or have trouble navigating your checkout page.
By the time they've landed at the checkout, they've already decided they probably want to purchase.
And because of that, the best way to help them convert is by making it easy for them to do so.
This is what Everlane does:
Pure simplicity. No distractions, no unnecessary flak, just a clean checkout page to help users make the purchase.
Don't forget to check out: 17 Top eCommerce Mobile Site Examples (Not Your Usual Brands)
16. Place a global header – with offers
The rule of 7 says that if your shopper sees a promotion 7 times – they take action. What better way to enforce this than put up a great deal on a global header?
All you have to do is – create an offer and highlight this on your header. Make this header global and let it follow your shoppers on all the pages.
Sit back and let your header do the job of converting your shoppers.
Recommended reading: Why Are People Adding To Cart But Not Buying?
17. Create a section for categories – outside the hamburger menu
This advice is specifically for your window shoppers and casual browsers. They may not make the effort to check the categories in the menu – but they may get enticed looking at the categories while scrolling on your homepage.
Make sure to display major categories on your homepage and make them visually appealing – let your shoppers know what to expect if they click on them.
Final Word
98% of visitors who visit an eCommerce site—drop off without buying anything.
Reason: User experience issues that cause friction for visitors.
And Convertcart solves for exactly that.
We help eCommerce brands optimize their websites to boost their conversions.
We've helped 500+ eCommerce stores (in the US) improve user experience—and 2X their conversion rate.
How do we do this?
Our conversion experts can audit your site—identify UX issues, and suggest changes to turn more of your visitors into customers.
.svg)
.svg)
.svg)
.svg)
.svg)
