How to design a great e-commerce website:

9 things you need to know for your web design.

Are you looking to design a beautiful new e-commerce website or do you want to improve an existing site into a slick e-commerce website design? I have listed 9 things that you need to do to make your e-commerce website beautiful.

But first, let’s take a look at why it’s important for you to have a beautiful website design.
The internet has quickly become one of the most integrated aspects of each of our daily lives. Research from thenextweb shows that the average person spends 6 hours 43 mins online each and every day – and it’s growing steadily every year.

When customers are in need of a product or service, more often than not the first place they look at is on their phone through google. A study from 2019 has shown that 60% of consumers start their research by visiting a search engine. It is more important than ever to meet your customers in this online space and present them with a beautiful website that they can easily find the information that they are looking for.

So how do you make sure that your website will WOW potential clients and customers to turn that simple google search into a sale for your business on your e-commerce website?

Here’s the list of 9 things that you can do to create a beautiful e-commerce website for your business:

1) Use text over image for headers to introduce your pages

2) Use features to display your content

3) Increase the speed and performance of your e-commerce website

4) Make your website friendly for mobile devices

5) Use a clean & minimalistic web design

6) Bring your e-commerce website to life with motion and animation

7) Use a consistent theme across your e-commerce website

8) Create a user friendly website with a great customer journey with a solid linking structure

9) Design your website with SEO in mind

1. Use text over image for headers to introduce your pages

Text over image headers are a great way to make a brilliant first impression for visitors to your website. As the old saying goes “a picture tells a thousand words”, so rather than telling customers what you do and who you are, let your headers show them.

So what is a text over image header? And how can you use them with great effect on your website?

Headers with text over image consist of a background image with a title and a small amount of text as a description. They are great at showing customers your personality and encourage them to look further through your website. Here’s what a text over image header looks like:

It’s important to choose your headers wisely. Have you got great pictures that show off your business, or your customers delight with their experience dealing with you? That’s a great place to start.

The text in you choose is just as important as the image. You don’t want to say too much – because your image is doing the talking – but you do want to say something that will provide context for your customers. Ideally you want the text to be short and to the point, as well as working for your SEO.

2. Use features to display your content

Features are another great example of a picture telling a thousand words. Your customers attention span is limited so don’t expect them to hang around on your website to read mountains of text. Similar to heads, features use an image along with some text to not only tell your customers what it is that you do, but show them.

Features can be used in a myriad of different ways, whether you’re showing off products and services, or want to direct visitors towards different parts of your business.

By using a feature, you can give your visitors a short piece of information that looks beautiful, with the option to click through for anyone who would like to find out more information.

This is a great way to design your website in a manner that greatly reduces bounce rate, and encourages users to spend more time on your website – An important metric that is correlated to a higher google search ranking.

Let’s take a look at some examples of features that can be used on your business e-commerce website design:

Show a single feature/product:

Stack multiple features/products side by side:

3. Increase the speed and performance of your e-commerce website

We’ve all been there – pulling our hair out as we look at a blank screen with the progress bar going nowhere. We frantically click the refresh button, or dive in and out of airplane mode, check your bandwitdth…. and then we give up.

It’s goes without saying that nobody wants their customers to face this situation when browsing on their e-commerce website, so you have to be quick.

There are a few things that you can do to increase the speed and performance of your e-commerce website.

Compress your images so that they take up less memory. This will make them load faster on your website.

Keep your website up to date. Make sure that your website is running the latest version on the backend with all of your plug-ins up to date. If you don’t keep your website up-to-date regularly, it can quickly become outdated and start to load slower.

Use more pages. I go in to more detail on this point later on, but in a nutshell, the more information that you put on a single page, the more data is required to load the page. Use more pages to spread your content out across your website. This will free up memory on each page and help it to load faster.

Watch out for unnecessary redirects. Redirects can be a useful tool to get better performance on your website, but sometimes they can become outdated or corrupted. Make sure that your site does not have any unnecessary redirects that take time up precious load time on your e-commerce website.

4. Make your website friendly for mobile devices

This is probably the single most important factor for any website in 2020. We all have smartphones. We all use smartphones… ALOT. In 2016, mobile phone internet traffic overtook that of desktops and the gap has increased year on year since then. Chances are that your customers are going to visit your business e-commerce website on their mobile device.

Make sure that your website it optimized for mobile devices. This is an extremely important factor in Google search rankings. If you want to move towards the top of the Google search rankings, your website must be optimised for mobile devices.

Thankfully, Google has a free online tool that will scan your website and provide you with information to improve the performance of your website on mobile devices.

3 Key things that you can do to improve your websites performance on mobile devices are:

1) Make sure you have responsive web design
Responsive web design is a must for your website in 2020. What is responsive web design? Responsive web design means that your website will load differently depending on the screen size of the device that is loading the page.

2) Make sure your images are suitable and load quickly
Speed is good in general for your website – we’ll talk about that next, but it is particularly important on mobile devices. It is vitally important that you use suitable images that can easily be compressed onto smaller device screens and screens with different aspect ratios. A common mistake is to use images that are too wide which can look well on a nice desktop or mac computer. Unfortunately when mobile sites try to display these images, they overflow beyond the screen borders and look clunky or out of place.

3) Prevent items that aren’t optimised for mobile from appearing on mobile devices
Sometimes it just isn’t possible to optimise a particular area of your website for mobile devices, and that’s OK. There are many reasons why you would still want to include such an area on your site for desktop users, but you must remember to disable it for mobile devices. You’re mobile visitors won’t be able to see this content as it won’t load on their device, but at least it won’t cause the site to crash while they are browsing.

5. Use a clean & minimalistic web design

A few phrases come to mind when I think about clean and minimal e-commerce website design:

“Less is more“
“There is genius in the simple“

Both of these sayings could not be more relevant when it comes to web design. Of course we want to provide our customers with lots of information and images to show how great our business is, but there is a balance to be struck here. There is genius in the simple.

There are many reasons why you want to avoid clutter on your website, not least because clutter can cause your website visitors to get distracted. We are hard wired to seek a clean space, so make sure that your website is not filled with clutter that will turn off your customers. When you leave the clutter off of your website, you provide a cleaner, more comfortable atmosphere for your customers, so that they can feel happier and more relaxed while browsing through your e-commerce website. Less is more.

Thankfully it is possible to provide a lot of information on your website without cramming it all in together. Take advantage of the space, after all it is unlimited on your website. There are many way that you can spread your content across a larger area.

For example, you could create a slider, which allows customers to slide across to new content. By doing this, you can focus all of the space on the page to 1 item, and your customer can easily see what they’re looking at.

You can also build your website down, and allow users to scroll down the page to continue reading your content. This works great too, especially if you provide some animation to bring your content to life – more on this later.

Don’t be afraid to create lots of pages for your website. By spreading your content across more pages, your site will load faster and you can really start to unlock SEO potential using keywords. It is important to make sure that your internal linking structure is well designed if you plan on having your visitors click through your website on their customer journey.

6. Bring your e-commerce website to life with motion and animation

One of the most effective ways to make your e-commerce website look and feel beautiful is also one of the quickest to implement. Bring your website to life with some subtle animations or motion in content.

There are numerous ways that you can add some motion to your e-commerce website. Here’s a list of 4 ways that you can add to almost any website:

1) Hover effects (buttons, features, images)
– Hover effects are a great place to start and should you should make sure that they are included in your website design.

– What are hover effects? Hover effects are subtle movements or changes that occur when the users mouse is over an object on a website.

– When and where should I use hover effects in my e-commerce website design? Hover effects work great for call to actions (CTA); this is anything that you want to encourage a user to click on such as a button, link, or image. For example you could have your “book appointment” button grow ever so slightly when the users mouse is over it. You could have a link on your website change colour when the mouse hovers over it. I also like to incorporate hover effects onto images, for example you could bring up a description overlay when the user over an image, or add a tint or lift effect to encourage engagement with the content.

2) Animations
– You might be familiar with animations if you use Microsoft powerpoint at all. Animations are great if used correctly as they create the impression that the content is new to the user as they scroll down the webpage. Similar to feeling you get when your social media feed updates with content as you scroll down, animated content can be set to only join the page when the user scrolls down towards it.

– Animations are a really effective way to breed life into your e-commerce website but be careful… just as with your powerpoint presentation there is a balance to be struck between professional and subtle animations, or over the top animations that are distracting and destroy the look and feel of your website.

3) Videos
– Videos another great way to bring some motion onto your e-commerce website. Videos can take many different forms and work wonders for getting consumers attention.

– You probably already have some videos on your website with product reviews, information or just general videos about you and your business. But did you know that you can use videos as a background for your content. Think back to the headers we spoke about at the beginning – swap out an image for a video and all of a suddan your website it alive on the screen.

– However there are a few important things that you should know when it comes to adding video content on your website.

i. Videos can take up a lot of memory – this means that they can slow down your website or fail to load entirely.

ii. Wherever possible, embed the video onto your website from a dedicated video hosting website (Youtube, Dailymotion, Vimeo etc…). Video hosting websites are perfectly optimised to store and playback video content, let them to the heavy lifting and free up that memory for other elements on your e-commerce website.

iii. If you must host your own video (and there are times when this is appropriate), turn the quality down of the video down. This will reduce the risk of your website slowing down, and most of the time it is very hard to spot any difference while browsing on a website.

4) Before/After images
– Another great way to add some motion and user engagement onto your e-commerce website is with the use of before and after images. This is a great way to show off a service that you offer. Rather than showing the images one after the other, you can stack them on top of each other and then the user can use a slider to show the differences between the 2 images. This ticks all of the boxes, take up less space, add some motion, and generate user engagement with the interactive slider.

It’s important to note that animations may not be work great on mobiles devices, so be sure to test it out, use the free google mobile optimisation tool and if needed, exclude the animation from mobile pages.

7. Use a consistent theme across your e-commerce website

Humans are creatures of habit and we don’t like change. Don’t surprise your users by creating some pages on your website differently to others. Pick a theme and style and stick to it.

Some things to look out for on your website include; Fonts, colours, layout, and buttons.

When it comes to fonts, try to keep it uniform across the whole website. This means that each type of text (whether it’s a title, subtitle, description etc..) should be the same style, colour and size everywhere that the user goes on your site. In some circumstances it may be beneficial to change the font of certain text to make it stand out but don’t over-do it because too much customisation creates a website that looks messy and disorganised.

The colours on your website should consistent throughout your website. Headers and footers should always be the same colour on every page, and then you should create backgrounds that match up well to the colours of your header and footer. If you have buttons or hover effects make sure that these mimic the header and footer colours on your site too.

Keep the layout of your website consistent. If you have a background image on the top of some pages, don’t have other pages that dive straight into text. Pick your layout and stick with it.

8. Create a user friendly website with a great customer journey with a solid linking structure

There are a few reasons that you want to create a great customer journey, not least because you want to lead your customers towards sections of your website that can generate leads and sales for your business.

How can you design your e-commerce website to be user friendly and direct customers towards a page that will generate revenue? Draw a map.

Yes, draw out a map for how you would the process to work. For example, if I was a hairdresser I would have 2 main revenue streams, 1) Cutting hair, and 2) Selling hair products. In order for me to create a customer journey that will generate revenue for my business, I would draw something like this:

Another reason why having a solid internal linking structure is important is because it allows Googles crawlers to find and index all of the pages on your e-commerce website. If there are no links onto your pages, Google simply won’t find them and they won’t show up on Google searches.

9. Design your website with SEO in mind

OK, so SEO in and of itself is not exactly going to make your e-commerce website beautiful, but it is extremely important and you have to pay attention to it nonetheless. You will notice that there are numerous mentions of SEO throughout this article – and that’s why I’ve included it in the list.

SEO is not just about how far up the google search rankings that you can get, it’s an ethos, a guiding light for which your website design should follow. You need to build your e-commerce website with SEO in mind every step along the way.

By designing your website with SEO in mind, the end product will naturally evolve into a website that looks great, contains brilliant information, and is super user friendly (and friendly for the Google crawlers too).

So let’s take a quick recap on all of the SEO relevant points from this article:

> Speed is your friend. Make a website that is lightning quick to load.

> Mobile optimisation and responsive design is essential

> A solid internal linking structure allows Google to find and index your pages.

That’s it! 10 things that you should keep in mind when you go to complete your web design. If you have any questions or want to create a discussion, leave a comment below.