The ecommerce website I'm describing here is for artist Claire Louise who sells produces and sells greetings cards, prints and gifts from her website www.clairelouise.eu. The site was launched at the end of November 2011.

The beauty of using Magento for e-commerce website design is its flexibility. The following is an explanation of how this project came together and the steps taken to make sure the site met the criteria laid down by Claire.

The first stage in website design: listening!

It's really important that if we're going to meet and surpass our client's expectations that we listen and ask pertinent questions about their business. If it's a new business that can often involve asking more questions designed to assist the client in thinking about how best to display and sell their products on-line.

In this particular case Claire, being an established artist, had very clear ideas about her products and other features required on her website. So the essential starting point was a well constructed quote, listing the features of the website and describing the initial design. On acceptance of the quote we moved towards closer collaboration using Google Docs...

Using Google Drive to remotely collaborate on a website design project

Google Drive allows us to remotely draw up a wire-frame of a website and specifically, in this case, the product and category lists along with the basic product detail needed to get our products listed accurately on the website.

This also creates an opportunity for further discussion and allows us to 'get to know' the products, how they interact with the site and work out any options they may have such as size or colour. This stage is crucial in the planning of the site as it not only gives the client an insight into how the products can potentially be displayed but it also helps us iron out the order of categories, the pricing, weight, bulk discounts and delivery options before we get to the actual site build.

With Claire being in Durham and me being in Nottingham it made sense to work this way - rather than sending documents backwards and forwards by email we could both work on one shared spreadsheet online.

Installing Magento and setting up the basic options

The secret to installing Magento and running it efficiently is a very good web hosting package. It's no secret that Magento is 'heavy' on server resources and it's no wonder! The capacity for Magento to handle such a wide variety of ecommerce sites and cater for more or less everything that's thrown at it means it has to be flexible and that flexibility relies on a lot of resources. In the case of the Claire Louise website we're using this flexibility to great effect - running a public and a wholesale site on the same platform but with completely different pricing structures and categories on each part of the site.

The wholesale section is hidden behind a secure log in with access to bulk discounts only available to registered retailers. We also added a blog to the site, a store finder to encourage off-line sales and a home page slider to feature latest products and point site visitors to the right categories.

We have the option to control stock should we need to but for the time being Claire has chosen to manually keep tabs on her stock.

Advanced set up options in Magento

As well as options to display prices without VAT in the wholesale store and with VAT in the public store there are a host of options we can use to achieve the client's wishes in relation to how they already run their business and how that can be transferred to an effective online business. So for instance we can set a minimum amount that the site visitor can spend on the public site and set a different amount on the wholesale site.

We can set the minimum spend on the wholesale site for free shipping and also what countries will be eligible for free shipping - such as within the UK only.

Another great feature of Magento is the automatic email notifications that let the customer know what's happening - an order acknowledgement and invoice details. We've also included separate newsletter sign up forms for the public and wholesale sites that link straight through to a Mailchimp newsletter account - we'll save Mailchimp for another post though.

What about the actual design?

You'll notice that so far I've not mentioned the actual design of the site - the way it actually looks! Well, that's because we can keep the design totally separate from the functionality of the site via Magento theming. Theming allows us to make easy changes to the design that don't affect the actual functionality. This helps me as a designer 'compartmentalise' the work I'm doing. So I can spend a couple of days working just on the functionality knowing that it won't interfere with the design process.

On this particular site in actual fact the design just kind of grew around what we were doing - from an initial mock-up it did change quite a bit as I got to know Claire and became familiar with the products but that's the beauty of it - flexibility!

We also made use of Google Fonts to add more style to the typography on the site.

Adding the products and creating categories

To create a product in Magento we need a few pieces of vital information: The product name, price, product description, weight and a unique SKU (stock keeping unit) number. We took time to make sure product images were presented in the right way and that product descriptions are accurate. Using unique SKU numbers allows us to isolate products for bulk updates and customer discounts. For instance, on the prints section on the wholesale site, single prints sell at one price whilst quantities of any 5 and any 10 sell at discounted prices. We set up a shopping cart price rule to effectively say: if there are 5 or more items in the shopping cart with an SKU that starts XYZ then discount by this percentage - but if there are ten or more items in the shopping cart that start with XYZ then discount by a greater percentage.

We also set up 'custom options' for certain products to allow buyers to customise some gifts with personalised text. On top of this we show related products on the same page as the main product to allow the customer the opportunity to purchase similar products.

The finishing touches

As soon as we'd got one product in each category and we were happy with how that product performed, we tested the shopping cart and checkout process. At all stages of the build I consulted with Claire to ensure we were going in the right direction and advised where I thought ideas could be improved.

When we were happy with the way the initial products looked on the site I took Claire through the process of duplicating products to create new products and quickly Claire had built the whole product catalog! We also added a rating system and customer comment section to each product to allow customer interaction and feedback.

Towards the end of the build I produced a 'snag list' of items that needed to be tidied up and clarified so that the shopping experience was as smooth as possible.

For more information about ecommerce website design for artists please contact us but above all don't forget to visit the Claire Louise website.