Magento Web Design: Optimising your Ecommerce Store

While you may have a vast inventory and a huge user base, in ecommerce none of that counts unless you have a clean, easy-to-use interface. Your website will often be the first thing your customer sees. Hence it’s essential you create a good impression from the outset – turning that striking first impression into onsite transactions and future leads.

In this article, we’ll show you all the tips and tricks that go into creating a cutting edge ecommerce site, drawing on the very best in Magento web design techniques.

Mapping Your Customer Journey

Before anything else, assuming you already have an ecommerce store, it’s worth running an audit of your site.

With site traffic and browser activity in mind, try answering the following questions: —

  • What percentage of your traffic comes from mobile devices? If it’s 20-30% or above, you will want to make your site as responsive to mobile browsing as possible.
  • What pages are your customers spending most of their time on? Are these the pages where you expect most of your revenue to come from? If not, they might need revising.
  • What is the device/browser breakdown of your customer base? Again, above a 20-30% threshold, you will probably want to optimise for these devices and platforms.


Responsive Design for Large Screens

According to W3Counter, screens with a width of 1366×768 pixels are the most common large device resolution. If around a quarter (or more) of your users are using large desktop screens, this is something you should optimise for. In practice, you can customise a page to display more content when the screen is above a certain size. This means that you will be making full use of all the available space, e.g. with extra products. In addition, if you find that a large number of your customers are accessing your site at a non-standard screen resolution, you also have the ability to set custom break-points in Magento. See Magento’s own documentation here for details.

Product Filtering (Layered Navigation)

Another way you can greatly improve the user experience of your site is by allowing product filtering or ‘layered navigation’, as Magento terms it. This function allows you to set the different attributes your customers can apply to narrow down their product search. Often based on attributes like price range, material and colour, you can configure how products show up on page. This makes it much easier for the shopper to find what they want.  If you are running Magento 1, please bear in mind you will have to install and run this function as a separate extension, likewise in Magento 2 where it is supported by a different set of extensions.

Quality ‘High Res’ Photos

Essential to any ecommerce site is high quality photos. Your customer doesn’t have the benefit of casting an eye over your product ‘in the flesh’, therefore high resolution images are a must. Amazon recommends 2560 pixels on the longest side for images, so this is a good starting point to work from.  To make the image even easier to view, you can also implement a pop-up box allowing the user to zoom in on a specific part of the image. This will help replicate the process of handling an item in real life, looking at specific sections of the item close up, in fine detail.

Customer Reviews

With online reviews, or just an aggregate score, customers can quickly get a sense of how reliable a product or service is  – leading to increased sales where reviews are positive. You can capitalise on this online phenomenon by incorporating reviews visibly and intuitively into your site. Straight out of the box, Magento provides quite a few options. You can integrate existing reviews within your site, as well as send out and schedule email reminders for reviews. For more in-depth functionality, you can download and install any number of review extensions. Ranging from free to several hundred dollars, Magento Marketplace will reveal a wide range of extension for this purpose – some offering managed services where moderation of reviews and can also provide support.

Quick & Easy Checkout

When it comes to poorly a optimised shopping experience, there’s little that tops the chart like a complicated checkout process. It’s well known this leads to high abandoned cart rates, with the potential to put your shoppers from visiting your site again. It’s therefore essential your checkout process is as quick and easy as possible. Thankfully, Magento now has ‘guest checkout’ configured as the default setting, with the option  to register for an account after they complete the checkout process. A further way of retaining custom is by reducing the number of steps a shopper has to go through to buy a product. Again, the Magento marketplace is the place to look: here you can find a range of one-step checkout extensions, from free versions to paid editions.

Thank You Pages

Your customer has visited your website, read the reviews, seen the high res pop-up pics and purchased the item via your guest-permitted one-step checkout. This is usually where the average online business says “job done”. In reality however, the customer journey hasn’t yet come to an end. Once a customer makes a purchase, they should be sent to a thank you page. This isn’t just a matter of courtesy, a thank you page fulfils a number of important functions. Firstly, it  confirms to the customer that the order has gone through. Secondly, it allows you to track conversions. You can do this by adding conversion tracking to this specific page via your Google Analytics hub. Helping you achieve two targets in one, this is a feature not to overlook.

Summing Up

Although website design is often thought of a separate domain to setting up an ecommerce site, we hope we’ve shown that good web design is just as essential to online retail as having the right product or backend code. By optimising your site with the customer’s user experience in mind, you can not only improve their experience of your site, but increase the likelihood of their return. Return visits often resulting in repeat sales, the logic of employing best practice web design couldn’t be clearer.

Not Already on Magento 2? See our Magento 2 Migration Page for Help and Advice 

Have a Question or Want to Check out our Credentials? See our Full List of Services Here

Further reading