E-Commerce Website Design: Our Go-To Guide

Have you ever wanted to design an e-commerce website? Perhaps you already have but you’re not happy with the results. Either way, in our go-to guide to e-commerce website design, we use our experience and e-commerce expertise to help you follow a proper website design process. We also hope to help you from falling into any of the usual pitfalls along the road. We see people make the same mistakes time and time again and we don’t want you to do the same when designing e-commerce websites!

So, without further ado, let’s dive in.

Step 1 – Mapping Out Your Website Structure

I know what you’re thinking, surely the first step of our journey is to put together some wireframes to map out the framework of our key pages? Or maybe you’re expecting some UX principles or heuristic advice to keep you on track and maximise that all-important conversion rate. That, however, is a long way down the road.

In fact, the first step to a successful e-commerce website build is one that we see people omit entirely time and time again. The ironic thing is, it’s the most fundamental and an absolute non-negotiable. So, what exactly does it mean to map out a site structure, and why is it so important?

Good Website Structure Example

It’s probably best to show you. This is a site structure of the fictional bicycle company “Michael’s Cycles.” This is an example of a well-thought-out, logical site structure that helps the user easily navigate the site in a way that makes sense.

Good Website Structure Example

If you imagine the main topics are all found in the header of the website, you can see that what comes below them follows reason. Within the “All Bikes” section, you find three distinct bike categories with segmented products in each. You also have Michael’s key page “Repair Service” present along with a blog and a separate section on sustainable cycling – Michael’s very passionate about sustainability and uses it as a USP for his site; he constantly sends his visitors back to this section via social media and email marketing to strengthen his brand. He also has the key supporting pages “About Us” and “Contact Us” in the header.

Not only does this seem a very logical structure for users visiting the site, but search engine bots love this too. They understand how to get to every page, what it’s about, and can follow the structure very easily. This means that site structure before we even get on to “classic UX” affects the user experience and SEO before a single square or circle has been placed on a wireframe. 

Bad Website Structure Example

Now take a look at a rival company, Neil’s Wheels:

Bad Website Structre Example

Neil, for the sake of this example, happens to have all the same pages that Michael has on his site. However, the structure of this website is much more confusing, for visitors and crawler-bot alike. 

Let’s look at the “All Bikes” section to start with. You can see that we have the mountain bikes and electric bikes categorised under the main “All Bikes” section as before, but now we have road bikes and Neil’s best-selling mountain bike – mountain bike A – in the header too. There are a number of reasons why Neil has decided to do this, perhaps he’s got a lot of road bikes in stock and he wants to draw more attention to them? Whatever the reason, it’s quite confusing to see an “all bikes” section in the header and find two pages that should logically fall somewhere under this section outside of it. Furthermore, Neil’s repair service is also under “All Bikes” despite it not being a bike! Confusing, eh?

If we now look at the blog, we’ve lost the main blog section altogether and now have blog articles in the header. Are these articles really all that important for them to be listed in the header? And now Neil’s “Sustainable Cycling ” section is under “About Us,” which sort of makes sense but I would argue this is better suited to being a main option in the header.  Finally, “Shipping Info” and “Terms & Conditions” have made their way into the header when they should really be in the footer. These are not key pages on the site, necessary – yes, but not strong indicators to search engines about what Neil’s site is all about, and not particularly interesting to a visitor unless they’re looking for them specifically (and the first place they’d go is likely to be the footer in any case).

How Website Structure Helps with the Customer Acquisition Funnel

If you’ve worked in marketing or business development before, you’re likely to have heard of the customer acquisition funnel. This maps out the typical customer journey from the awareness stage, when they first hear about the product they want to buy, to the purchase stage. Of course, you can break down the funnel into many iterative stages, but for this example, we’ll just focus on the three stages in the diagram below: awareness, consideration and purchase.

Customer Acquisition Funnel
Simple Customer Acquisition Funnel

So what’s the relevance to our foundational website structure? Well, we can map out which pages of the website are related to what stage of the acquisition funnel and, from there, work out where we want website visitors to go having arrived on a specific page. If you take a look at the below diagram of Michael’s Cycles, you can see that the customer journey is fully visualised.

Website Structure Example Customer Acquisition

The blog pages are highlighted in purple as this correlates with the awareness stage. This is the kind of page that the customer is landing on if they are still considering whether to invest in a new bike or not. Perhaps they’re searching for terms like “health benefits of cycling to work” or “is cycling sustainable?” The pages highlighted in orange are the product and product category pages. This is because the visitor has already made up their mind that they are going to buy a bike at some point, but are now researching to find out which to buy. Visitors may land on these pages directly or may reach here having come from another page on Michael’s website that features earlier in the customer acquisition channel. 

Finally, you have the checkout page, which should be self-explanatory and is only reached having visited the product pages and added a product to the cart. The homepage is a bit of a maverick when it comes to the customer acquisition funnel, as people may reach here at many different stages of the customer acquisition funnel. 

The reason why this is all so relevant to site structure is that we can now see where we want to push people to reach the next stage in their journey. For example, if a person lands on Michael’s regular or sustainability blog, we now know that we want to get them from the awareness stage of the funnel to consideration. By using call-to-action buttons and internal linking, we can guide visitors from these pages to the product pages which represent a much higher page value. 

In addition, we can also capture customer information from these pages and feed them back into the loop using marketing automation. We can do this via email drip-feeds. Imagine if we have an exit-intent pop-up on a blog page that captures emails. We then segment these customers into an email list called “blog visitors” and send them a series of follow-up emails that encourages them to take a look at some best-selling products. We have now recaptured some potential customers that would otherwise have been lost and moved them along to the next stage of the customer journey! 

Step 2 – Choose An eCommerce Theme

Now that we have our site structure in place, we can now start to think about what our store is going to look like. First, though, it is important to remain grounded. A common mistake we see when companies get excited about eCommerce website development is the tendency to overdesign. Let’s take the Shopify platform for example. There is a reason why Shopify is Canada’s third-biggest public company – because it does eCommerce well. Very well. It provides pre-built functionality and stylish easy-to-use theme designs that WordPress can only dream of. What’s more, these theme designs have been developed with user experience and SEO in mind, and premium themes typically have great site speed and performance. In summary, Shopify web development is geared towards great UX, and Shopify’s SEO isn’t too bad either.

With this in mind, let me ask you this. Why on earth would you want to go and completely design a Shopify theme from scratch by customising every part of your site? Why do you think that you know better than a multi-billion dollar organization that employs some of the best theme developers on the planet? Why not take advantage of Shopify’s mission – to provide people with the tools to create eCommerce sites that sell straight off the shelf? You wouldn’t – unless that is, you’re part of a bigger organization with very specific design and functionality needs, plus a team of professional website designers. In the case of Michael’s Cycles, a standard Shopify theme will do just fine, thank you very much. 

The same goes for WordPress and WooCommerce. There are hundreds of great eCommerce WordPress themes built for WooCommerce that do most of the heavy lifting for you. So if you’re a small business, browse the web for highly rated Shopify or WooCommerce WordPress themes, choose one you like, and install it on your chosen platform. 

What If I Need More Customisation?

If you find yourself in a position where the standard customisation features provided by Shopify and its hundreds of themes are insufficient, then you’re probably better suited to not using this platform. Customising Shopify themes beyond their out-of-the-box limitations requires knowledge of liquid code, and the drag-and-drop page builder apps on the Shopify store (such as Gempages and Shogun) are, in my experience, unbelievably buggy. 

However, I encourage anyone thinking that they need something more customisable and unique for an eCommerce store to ask the simple question, “why?” If you haven’t got a good enough answer, then maybe reconsider. 

Typical Design Process

However, if you do go through the design route from scratch, a typical process is as follows:

  1. Empathise / Understand the problem
  2. Research /  Define / Analyse user needs
  3. Ideate and Design an answer to the problem
  4. Prototype a solution
  5. Launch & Test the prototype with a real audience
  6. With the data, go back to step 4 and go again until the solution works.

The beauty of the pre-built theme solution is that steps 3 – 6 have already been done for you (at least to some extent). The pre-built them already covers steps 3 & 4 (along with mapping out your structure as we have already mentioned), plus it’s likely to have been tested numerous times to optimize the user experience. Of course, it’s always good to test your store to see how the theme works with your products and your branding, but if you’re not selling, it’s unlikely to be poor theme design. 

However, if you’re still set on designing your own custom site (and have the budget to do so), then now is the time to think about wireframes.

Wireframes

Wireframes are like the blueprint of a webpage. They make up the outline of the page and segment off areas where text, images, buttons and other elements are to be included. Below is an example of a wireframe for a CBD website homepage made using Invision.

Wireframe Example

As you can see, it’s pretty bare-bones, but it gives a clear understanding of where each element exists on the page. Most importantly, it doesn’t take long to throw together, and it allows for much quicker changes in design. Believe me, it’s much better to have to make changes to a wireframe than a fully-functional website, I can tell ya.  

Mockups

Once you’ve built out your wireframes, now you can start to add the user interface to your design. This is the point at which you can add images and styling that will bring out your brand and give your site a unique look and feel. This mockup is the penultimate design before going into actual website development

Development

Here’s where you can finally begin to mould your prototype design into a functional website. If you have significant design customization requirements, then you’re going to either need an in-depth knowledge of front-end coding or use a drag and drop editor. As mentioned before, Shopify is not the platform for this approach; WordPress with WooCommerce is much more viable. This is due to the existence of WP Bakery and Elementor. Both of these popular plugins enable you to design a webpage pretty much exactly the way you want it, and, dependent on the WordPress theme you go for, will probably have either built into it for you to use. 

Step 3 – Inputting Your Content

Whether you’ve spent the time developing your site, or gone through the far more time-efficient process of choosing a great Shopify theme and installing it, the next stage is to add your content to it. This is the point at which the site really becomes yours.

This includes absolutely everything unique to your site, such as:

  • Imagery
  • Copy 
  • Product information
  • Apps or Plugins for specific functionality
  • Payment methods

To be honest, that’s pretty much it. If you provide all of this for a well-designed theme, you’re away to the races.

Step X – Eat, Test, Iterate, Repeat

This should leave you with a well-structured, brilliantly designed, content-rich site. So you’re done, right? Your site is as perfect and as well-optimized as it can possibly be. Umm, how can I put this politely… absolutely bloody not!

There is one reason above all others why we always encourage our eCommerce clients to use a standard theme and not go through the rigmarole of a slow, arduous design process. It’s all down to us preferring to make decisions driven by data not by hunch. With that being said, this leads us to step X in our process, testing and iterative improvement.

A/B testing is not something that is particularly revolutionary when it comes to improving websites, which is why there are some amazing tools that help to guide design improvements. Some of these tools include programmes like Hotjar and Lucky Orange that reveal how users interact with web pages, revealing heatmaps of the most clicked on areas of a page and the percentage of users who reach a certain spot below the fold. Even good old Google Analytics can reveal areas to improve upon with a little digging – for some insight into how to extract value from this great tool even as a newbie, you can check out our article on Google Analytics for Beginners.

All of these analysis tools, or even observations by a member of your team or perhaps insight drawn from a customer complaint, can help inspire interesting UX hypotheses to test. To test design changes, there are several applications that can be used – one such tool is Google Optimize.

Google Optimize

Google Optimize happens to be our absolute favourite A/B testing tool. It allows pretty much anyone to adjust anything they like on a given web page and see how people’s behaviour changes. These behaviours are tracked by key metrics such as revenue and – most importantly for eCommerce sites – conversion rate. Conversion rate is the percentage of people who land on a webpage that then go on to make a sale, in other words, they have converted. 

If you run a test that proves to drive key metrics (Optimize enables you to segment tests to target only specific users too like mobile visitors or only paid traffic) you should then go and make the change on your site. This is the only point where we like to bring developers into the mix to make changes that actually herald results. Then, once you’ve run one test, test again, and again, and again. That’s it, a tried and tested method that simply works. 

eCommerce Digital Marketing Strategies

So now you have your brand spanking new eCommerce site and it looks like the business. What’s more, you have a robust design improvement process that can improve your site’s UX month-on-month and is backed by real-life customer data, but what now? Well, now is the time to start getting some more traffic to your website and exploring some eCommerce digital marketing strategies, and there’s a lot to get stuck into. These strategies, to name but a few, include:

  • Blogging and Content Marketing
  • Social Media Marketing
  • Reviews
  • Email Marketing
  • Paid Advertising
  • Podcasting

If you’re interested in learning more about the strategies you should be employing to help your store, then take a look at our in-depth guide on how to help increase eCommerce sales.

Recent posts
Read Article
Digital Marketing: Planning on Going Green in 2024?

You are probably aware that green digital marketing is taking the world by storm. Sustainable (or ‘green’) digital marketing initiatives seem to be everywhere. For example, big brands like Coca-Cola, TikTok, and X have made a commitment to be more environment-friendly. This isn’t just in their areas of production. We’ll bet you didn’t know that […]

Read Article
Digital Marketing Strategies: Increase eCommerce Sales in 2024

eCommerce trends are exactly that: they are patterns and waves that trend and then vanish. To truly achieve a sustainable, valuable consumer market, it’s vital that your business locks down the fundamentals of a strong foundation that will ensure eCommerce customers return time and again. Over time, this will help to transform your business from […]

Read Article
Why Citation Building Is Fundamental to Local SEO Ranking

Citations are mentions of your business on the web. They are how internet users come across your business’ information and ultimately, get in contact with you. To start attracting high converting local visitors, it’s imperative that the information your citations provide is accurate. It is estimated that half of all searches have local intent and […]

Read Article
Google Reducing Webpage Crawl Rate as Content Is No Longer King

Is Google reducing webpage crawl rate to save resources? Or is there a much worse scenario coming? Is Google no longer hungry for content? Is content no longer king? I’m afraid it’s the scenario many have been dreading. What is the actual reason behind this decision? Ever since 1998 Google was desperate for high-quality content […]

Read Article
Local Landing Pages: A Complete Guide

Optimising your online presence with Local SEO has far-reaching benefits. It helps your business attract a target audience of local clients and boost your visibility, traffic and revenue through local landing pages. It’s 2022 already and advice that Matt Cuts outlined in his 2010 blog post is still valid: If your company has a bunch […]

Read Article
E-Commerce Website Design: Our Go-To Guide

Have you ever wanted to design an e-commerce website? Perhaps you already have but you’re not happy with the results. Either way, in our go-to guide to e-commerce website design, we use our experience and e-commerce expertise to help you follow a proper website design process. We also hope to help you from falling into […]

Read Article
Google Analytics for Beginners

Is the thought of Google Analytics (GA) overwhelming for you? Don’t worry, many people are intimidated by thought of web analytics but once you get stuck in, you’ll quickly get the hang of Google Analytics’ easy-to-use interface. In this guide we will cover the following so that you can have a better understanding of how […]

Read Article
How to Implement Keywords for Search Engine Optimization

Keywords. The key word in Search Engine Optimisation. If you’re active in online and digital marketing, then most likely, you’ve already come across keywords. Read any SEO blog and it will tell you all about the importance of doing keyword research, how and why to target specific keywords, the dangers of keyword stuffing, etc. So […]

Read Article
How to Use Schema Markup for SEO

Schema Markup offers businesses and all website owners a huge opportunity to boost their organic traffic, drive conversions and see real results from their Technical SEO efforts. Unfortunately, the technical nature of this SEO tool puts many people off. We’ve put together this guide to help you get to grips with the key terms and […]

Read Article
Successful Pay Per Click Campaign in a Nutshell

Pay per click advertising (or simply PPC) is an online marketing term that refers to online advertising schemes, like Google AdWords or Facebook Ads. PPC tools only charge you if your ad is clicked, and visitors are redirected to your website. The beauty of a pay per click campaign lies in its simplicity and cost […]

Read Article
SEO Starter Guide

When it comes to SEO, there are a lot of acronyms and terms thrown about by digital marketers like it’s second nature, but to the ordinary person, it might just feel like you’ve been transported to some other dimension where English doesn’t sound like English anymore.  If you’re diving into the world of SEO for […]

Read Article
Google SEO Tools

People browse the World Wide Web to get all sorts of information. As you are no doubt well aware, one of the easiest ways to get information is by using Google. By using this search engine, Internet users can collect specific information in a matter of seconds. On the other hand, e-business owners and Internet […]

Read Article
Attracting a Target Audience

The World Wide Web has produced a brand new breed of buyers. 21st-century buyers are experienced, independent and well informed. But they are more overwhelmed with competing demands for both time and attention than they were ever before in history. So how do you make sure that these buyers choose you? The internet is a […]

Read Article
How to Start an eCommerce Business in the 2022 Online Jungle

Starting an eCommerce business can be a daunting task, especially if your particular market is over-saturated, but with what there is to be gained from stepping forth into the wonderful world of eCommerce, don’t let it deter you. Earlier, it was reported that eCommerce sales were on track to hit $4.2 trillion in sales, with […]

Read Article
Local SEO vs Global SEO: Difference & Strategies

Local SEO vs Global SEO. So you know there’s a difference, but what is it exactly? And now that you mention it, how do the strategies differ for both? In this tell-all article, we aim to dispel the myths surrounding both local and global SEO. We do this by outlining the following: The differences between […]

Read Article
Top 10 Benefits of SEO

Are you wondering what the real benefits of SEO are over other digital marketing channels? Can somebody please explain what all the fuss is about? Scratching your head as why you should bother with an SEO strategy? Let us set the record straight and show you why SEO should be central to any high-level digital marketing strategy. Hold on […]

Read Article
SEO for Dummies: The Beginners Guide to Success

Are you looking for a complete guide to SEO for dummies? Are you looking to improve your SEO and reach new customers? Not sure where to start? You’ve come to the right place! We at Fat Fish Marketing are Search Engine Optimization experts and want to help YOU achieve SEO success. So sit back and […]

Read Article
Why Is It So Hard to Find Good People in Digital?

This is a question we get asked from time to time by those we know. How do you find good people in digital marketing? You see in the digital marketing world there is a fundamental flaw. You can apply a simple flow to it. If you want someone with experience and they have learned how […]

Read Article
SEO Driven vs Design Driven Approach: Who Wins?

With a lot of people saying SEO is dead. We find it interesting to see the confusion in the market by what this means. It is not that SEO is dead per say. It is that it has become the background principle that if everyone is not working towards that culture as a team digitally. […]

Leave a comment

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

    Services you are interested in: