An e-commerce web design is fairly easy to set up, but to effectively direct your visitors to the correct products requires a bit of thought & planning… depending upon the number of products you have.
You have to assume that the visitor has never visited your site before… so big buttons & obvious navigation is absolutely necessary. A complicated or unusual menu system will confuse some visitors, so keep it simple!
E-Commerce Web Design Overview
Glitter Body Art sell glitter tattoo stencils & accessories, which they have been doing for over a decade. They already had an e-commerce website which took 10 to 30 orders per day, but they wanted to improve the website & customer experience.
To build an e-commerce web design, an in-depth knowledge of the business is essential. You need to know what the products are, what the customers want & how to deliver the products to the customer – while taking into account the SEO properties & the structure of the website.
Styling an E-Commerce Web Design
The overall style was intended to appeal to the customer base, hence the glittery background & colourful buttons. The layout was intentionally simple – because a new visitor will be more likely to instantly understand which buttons they should click on.
I believe that the most important aspect of an e-commerce web design is to direct visitors to the products they are looking for. So each button is fairly simple, containing an image & some text to make it clear where the button will take you.
Building the Website
Firstly, you need a catalogue & digital images of your products. Every product (over 500 products) on this website was either photographed by myself, or digitally created by myself. Each product image was then lovingly doctored in Photoshop to produce a clean, crisp image.
Secondly, you need a description of that product. It is important to be very specific about each product, for both the customer & for search engines.
Thirdly, you need to put a price tag on it! But take into account the delivery costs… which I will go into later.
When you have the products in place, you can start building the website. A library of products is automatically created for you… the trick is to direct people to the right products. Landing pages help by creating a graphical sub-menu for visitors – and they are also essential for good SEO.
Categorise the Products
The next step was to categorise the products. With over 500 products, it was important to separate each category & present the visitor with obvious options.
On this website, there is the main navigation menu at the top, and several landing pages. So there should never be an area of the website where a visitor can’t get to any other category of products.
There are also buttons on the sidebar to direct visitors to certain important pages, such as the Latest Products page or Special Offers.
Product Imagery
Displaying your products is obviously very important, so producing nice photography for each product is essential.
Each product image on this website was created by myself, which includes studio photographed images & digitally created images. All of which are optimized for web use using Photoshop… doctoring them where necessary.
The Race 2014 image (pictured) is one example of a product image which combines both photography & digitally created imagery. The box, brushes & glitter jar were physically photographed by myself. They were then taken into Photoshop to remove the background – producing a pure white background.
The main products on this website are tattoo stencils, many of which were drawn by myself. You can read more about the design process here
I then superimposed the stencils & the graphic (in the top right corner) so customers know exactly what they are getting.
Also, there is the standard watermark on top of the image to prevent people from re-using the image… unless they are handy with Photoshop.
In our catalogue, products are best shown when the image is square in proportions, so wherever possible I created a square image.
Product Options
Each product is slightly different, with certain options which can be selected by the customer.
Most products are simple, but some products allow the customer to choose a weight or number of a product – which also includes a bulk order function. So certain products are reduced in price, when buying over 10 of the same product (for example).
Packaging Design
If you are manufacturing your own products, packaging can be an important part of the whole process – giving you a professional image when the customer receives the product, which adds value to your brand.
There are many companies out there that will supply die-cut, creased packaging – but obviously buying in bulk will keep the costs realistic.
I designed a range of boxes for Glitter Body Art, including a generic design for all uses (pictured), plus a design for certain events & occasions – such as a Halloween themed box & an Ice Princess box.
Shipping Costs
The shipping costs for this company are calculated by weight, so each product was assigned a weight. When a customer has finished shopping, the items in their cart are calculated… then the weight of each item is added up to calculate the shipping costs. A different scale of shipping costs are added to the total, depending upon the customers location.
If the customer is in the UK, they get certain prices – which are different from European prices or Worldwide prices.
I also included a blacklist of certain countries – adding extortionate fees to customers from those certain countries to prevent them from ordering. Nothing personal! Just born from experience.
Payment Gateways
There are hundreds of payment options these days for online shops. Choosing the correct one depends upon the volume of orders you take.
If you are just starting out, you may be better off going with the standard PayPal option, but if you are taking over £20k per month (for example) you will probably be better off with a merchant account.
Technical Issues I Experienced
Some steps I needed to take to ensure the website worked…
Initially the website was hosted by 123 Reg. After a few weeks we noticed that the website was taking over 30 seconds to load a single page… on certain occasions. We raised this issue with 123 Reg, but they told us it was our fault – perhaps a dodgy plug-in.
123 Reg also supplied us with an SSL Certificate by proxy, which caused a re-direct loop when entering the checkout page. So we could not use certain payment gateways which required a secure checkout.
We were eventually forced to migrate the whole website to another host, which resolved all of our problems. They supplied us with a legitimate SSL certificate, and the website is now very quick… all of the time!
So, the moral of the story is to never use 123 Reg to host a large website.
Recent Design Projects…
Z Controls Logo & Web Design
Vanité Hair Clinic Web Design
Aesthetics Solutions Branding
Leave a Reply