Design Tips For Increasing eCommerce Conversions

Published: September 25, 2020

Designing a website with conversions in mind is often a challenge – there are simply so many different ways to craft each element, and it’s not like website design is an exact science in the first place.

However, there are some general rules and tips you can adhere to that will help you get started on the right foot, which we will outline here. Don’t forget that you should also run some a/b tests after you are happy with the current design you’ve come up with, and keep working on your website even long after you have published it.

Now for the actual tips:

Choose a Color Scheme

The first thing you need to consider is the color scheme you want to use across your pages.

Your number one consideration should be how appropriate it is for your target audience, your brand and its offer, and the emotions and thoughts you want to evoke in your visitors.

Start by considering your basic colors – each color will be able to shape different feelings and associations – and then think in terms of hues and actual shades.

Don’t forget you also need to use white space effectively, as it will help you draw attention to the parts of the page you want to highlight, like value propositions and calls to action. You can easily make these elements stand out by using a bolder color and negative space.

Here is an example from Elemental Labs, who have chosen a somewhat unusual color, which instantly makes them stand out. They also use white space incredibly well to draw your attention to their copy and images.

Ensure Ease of Navigation

You want your website to be easy to navigate, simple, and intuitive. If a visitor has to spend five minutes looking for an item, they’re not likely to convert, are they?

Think about the way you want to structure your menus. Start with the highest level of category first, and use submenus or mega menus to show lower and smaller categories.

You can also use breadcrumbs to ensure a visitor is always aware of their current location and how they can go back.

Make sure you use terms that are easy to understand to the widest possible audience, especially if you sell more specialized goods. This will not only help you rank better, but it will also help ensure people know what they can find. If you confuse them with unfamiliar terms, you may miss out on converting someone who was actually ready to make a purchase.

Here is an example from Zappos – their menu is clear and easy to navigate, and they also have a very large footer that offers plenty of information.

Optimize for Mobile

Mobile optimization has been incredibly important for years now, so putting some additional stress on the practice might seem superfluous, but let’s talk about it again.

First, you need to make sure your website loads well and quickly on all mobile devices. Take different screen orientations and screen sizes into account when designing pages, and make sure all the information is clear in all cases. Also make sure all the images load fast and that they fit the screen size.

However, another thing to consider is where you place your CTAs, your Add to Cart buttons, and your Click to Call buttons. Think about the way people use their phones with one hand, and on which part of the screen they are more likely to click. It may sound a bit silly, because a user can always use their other hand to click somewhere, but consider the following:

A) that isn’t always the case, there are people who won’t for whatever reason (hands full, on the tube, etc.), and

B) great UX makes for better rankings and better conversions.

Make Checkout Seamless

Checking out is obviously the most important part of any experience your visitors have with your website. Making this step as seamless and straightforward as you possibly can will go a long way in boosting your conversions.

The first thing you need to consider is your Add to Cart button – make it bright, make it vibrant, easy to spot, and as prominent as possible.

You should also try to add plenty of trust elements to converting pages: anything from reviews by previous customers or big industry names, scientific data that backs your product up, research that shows how your product can help, and so on.

Make sure your prices are displayed clearly and that there is no confusion about them. If there are any extra costs, state them here as well. Add notes about packaging and shipping as well, because a lot of people will choose to abandon their carts if they come across an unpleasant surprise at the final checkout.

Here is a good example from Transparent Labs, who make clever use of white space to draw a visitor’s attention to the price and the Add to Cart button. As you can see, they also feature plenty of information about the product on the page.

Consider Your Images

We’ve already spoken about how images need to load fast across all devices, from desktop to mobile and everything in between.

What’s also incredibly important is that you choose images that are original and not used anywhere else on the internet. Yes, others may sell the same product, but you don’t want to be using someone else’s images. You want to stand out and be recognizable.

Featuring images that show the product clearly and from all kinds of different angles is crucial. You don’t just want one image – you want several that will show exactly what the product looks like, how large it is compared to other products or a reference item, how it is used, and so on.

Another good idea is to include humans in some of the images, too. They can be wearing, holding up or using the product, or engaging with it in some other way. This will help visitors imagine themselves using the product more easily, and is a great way to improve your conversion rates.

For example, Printify does a nice job here – they have several images for their products, showing them from different angles, and most often in use as well.

Final Thoughts

If you keep all of these design tips in mind the next time you’re working on a product page, you’ll have an easier time coming up with a layout and an element structure that works. Don’t forget to test everything more than once, and to revisit even your best pages from time to time. Design trends and customer preferences evolve over time, so a set-and-forget approach surely won’t work for your conversions.