Category: Ecommerce design

One year on…

The Venda contract expired 1st June 2011, and I successfully launched a new website using Magento two weeks before this.

The cost? Around £4,000 (using a freelance Magento developer), including integration with our backend systems; exactly the same as the monthly cost to Venda.

The monthly cost? £500 for technical support, ongoing minor improvements and hosting; exactly the same as the “nominal charge” Venda quoted for continuing access to their control panel.

The result? YTD sale running at 170% vs. LY and a site that is significantly more user friendly, more search engine friendly, more flexible and easier to maintain.


The basics…

I’ve recently started working for LINLEY, and was excited to gain experience of the Venda ecommerce platform. Knowing that it powered some major ecommerce websites (Heals, Wickes, Laura Ashley, Tesco, Monsoon, TK Maxx… in fact £1 out of £50 of non-food online transactions in the UK), and having read about their sophisticated merchandising and Software as a Service solutions,  I was looking forward to a leap forward from the Lynx Internet £50 a month solution (with £2k – 5k launch costs) I had used on previous ecommerce websites (viners.co.uk, oneida.co.uk).

How wrong was I.

Admittedly LINLEY had not managed their design phase particularly well two years ago, and their relationship with Venda had long been difficult, but I was expected great things from their £5k a month service. Instead, I find the platform extremely basic, and the customer service vastly inferior to the £50 a month solution. Some basics I had assumed would be fundamental in an ecommerce platform (being able to download the product catalogue, make bulk changes then upload; being able to report on which customers ordered which products, add meta keywords & descriptions) are just not possible without significant extra costs.

Call to action: Blurring and Hebrew websites

I liked this tip about improving conversion rate by blurring your website: by blurring your site you avoid the temptation to read the text on your website and can focus on the design.

So in was interesting to be asked to comment on the usability and SEO of an Israeli website, in Hebrew.

Through Google analytics and the Google translation tool it was relatively easy to work out how visitors were arriving at and navigating the site. But it was clear even before this, looking at the Hebrew version, that the navigation is confused and there’s a lack of call to action. The site is about 80 pages (which is good for SEO) but the homepage has over 20 internal links, not including the top and bottom navigation.

According to Dr Mike Baxter who suggests the blurring tip, Visitors decide whether they like your website in one 20th of a second.  And if they don’t like it, they won’t convert.

Even if I knew any Hebrew, which I don’t, I wouldn’t know where to click.

Site review: Zara Home

This site, launched in 2007, is run by a subsidiary of Zara parent Inditex, ITX e-commerce Ireland. The site apparently made a loss of €692,000 during the year to the end of January 2009.


Homepage/ general

Initial impressions; the design is on-brand, nice and colourful.

It’s clearly an online shop, and you know you’re shopping in the right country.

The header is unusually short (and the logo is small), but this does mean most of the homepage is above the fold.

Receive our news is very prominent; some people might expect this to be the search box. It doesn’t need to appear on every page, and the position almost crowds out the page heading. There’s also a be the first to subscribe button which is duplication, and looks slightly out of place with the other nice images.

The search box is actually quite far down the page; we’re not really encouraged to use it as the search function is not particularly sophisticated. It’s a basic text search returning products (not categories) including all the search terms, and there are no options to refine the search. Search for “small table” and you find one page of table accessories which include the word “small” in the description. Search for “furniture” and nothing is found.

Free delivery is promised, but when you click on this it’s only over £150 – I wouldn’t bother with this, as it’s not that attractive an offer; customers would expect free delivery over £20 or £50. We’re not told how much delivery is (an astonishing £19 for all orders under £150!) unless you click on the Shopping Guide (which I had assumed would be a style guide) on the left hand side, or on the small See delivery charges link in the shopping basket. In fact it would be easy to enter your address details and get to the payment page before you’re hit with the £19 charge.

Navigation is on the right hand side rather than at the top; I suspect because it’s more flexible (and good for SEO). It works fine for the range as most product categories don’t have more than 5 sub-categories.

Zara Home Kids is a mini site within the main site with a slightly different colour scheme and its own logo, homepage and product categorisation. You click on the Zara Home or Zara Home Kids buttons above the search box to switch between the two sites. It’s nice to give the Kids range its own identity (although I would make it more Kids-like) but it would also be good to somehow link the ranges e.g. shopping for tableware in the main section would link to the Kids tableware section. (The solution also means that if you have products from the main range and the kids range in the basket the header of the basket page is the Kids logo).

There’s a Zara Home on your mobile link to the iphone app, which is a showcase of product images with a “buy” link taking you to the Worldwide homepage . Not that useful, but nice images to browse through on the tube, and as such it’s rated 2 stars (slightly lower than the main Zara app).

There are 15 different country sites, and the current one e.g. United Kingdom is displayed to the left of the shopping basket, almost within the basket. The link (which goes to the list of country sites) is as prominent as the View basket link which it doesn’t need to be, although fortunately if you navigate away and come back again the basket contents are retained. In the footer you can change the language of the site (e.g. view the UK site in German) which has a slight potential for confusion with changing the country site; perhaps some explanation (in text, symbols or flag) would help.

Contact details appear at the bottom right, and even then only a link to an email form. There’s no phone number evident, although there is an 0800 number very much hidden within the Terms and Conditions in the Returns section. The 0800 number also appears at the top of the shopping cart, so why not earlier? The email form itself requires you to fill out all 6 fields – there are no optional fields so they don’t really need to state Required fields are indicated with *.

The Gift card section describes gift cards which can be bought instore; online gift cards (bought and redeemed online) would work well I think.

Just a minor point, but some of the text does look as if it’s written by an non-English speaker e.g. “Gifts for Her – Enter to see it all”.

Category/ product summary pages

The category pages e.g. Living room are a clever combination of one large feature product with a lifestyle image, descriptive text, special offers (below) and links with images to the sub categories (to the right). Some categories have their own bespoke layout e.g. Gifts, Basics and Trends, and some e.g. Gift baskets link straight to the products without the subcategory level. It’s a good example of tailoring the navigation to suit the product range.

Product summary pages e.g. Kitchen textiles are well laid out with large (just over 200px square) thumbnail images. There’s a mixture of cutout/ white background and coloured background images, but on a pale page background with a slight image border they work well together.

Products are shown in a random order and there are no sort or filter options. I don’t really see this as an issue as there are 12 products per page and most subcategories have 1 or 2 pages (with the option to view all). It encourages you to explore the range, and focusses on the products rather than the prices.

Where a product is available in more than one colour/ pattern this is shown with a clickable icon to the top right of the thumbnail image, which changes the thumbnail image itself. The choice is then carried through to the product page. This is one of the best solutions I’ve seen for displaying product with colour/ pattern options. If a product is available in more than one size this is indicated with a price range (e.g. £89.90 - £319.90) and a thumbnail image incorporating the different options. Again, a good solution to presenting options at the summary level.

Products which are reduced or on special offer are highlighted with the sale price in a big red font and the original price in small font below.

New products are highlighted with a NEW flash across the thumbnail image.

There’s no stock information on the summary page which could be slightly annoying if the product is subsequently unavailable on the product page e.g.

Product pages

There are well laid out with a large image (almost 400px square) and good call to action with the add to basket button. There’s a nice Glossary feature to tell you for example what cotton is.

Most product only have one image, although there is a More photos section on all products. There’s a good zoom function, although it’s not spelt out that it’s there.

When there is only one product option the quantity box defaults to 1, and when there is more than one option the default is 0. There is clear information about sizing and product composition, although there could be more descriptive and aspirational copy (e.g. more than Plain mohairwool fringed blanket.)

There seems to be very few related products set up, which may be a missed opportunity as this is done well elsewhere in the Showroom section.

There are good pop up guides to sizes and product care instructions, done in the same way as the glossary.

The returns policy is shown below the main product image, striking the right balance I think between showing the information but not in a negative way. Unfortunately this links to the entire terms and conditions section so you have to find the returns policy within it. Offering returns to store is a positive feature. It would be good to see delivery information here too (although maybe £19 is nothing to shout about)!

I like how you can scroll between the products within a category with the Previous and Next buttons, and the Back to category link.

Shopping cart/ checkout

I’ve mentioned the delivery information (or lack of) earlier.

The basket has a good informative layout with an image, colour and size information.

There’s an option to Giftwrap your order which appears to be free – so why not shout about this? I would choose to giftwrap everything, just for fun!

The process is a clear 4 stages – Shopping basket, Address, Payment, Confirmation. Creating an account with a password is required, although this is handled reasonably well within the same page with radio buttons: This is the first time I am purchasing on the Zara Home website / I have previously purchased on the Zara Home website.

Finally…

Overall this is well designed ecommerce site in terms of the look and feel and functionality, and works well for the particular range of products. The site does the basics very well, although obvious areas for improvement are the search function, offering more ways of viewing and filtering products, and expanding the “We also recommend” related products.

The £19 delivery charge is a bit puzzling, and I wonder how this has been arrived at and how much testing of other options has been carried out. Perhaps it has been shown to increase the average order size and maximise profitability. Or perhaps Zara are still testing the water with a transactional website (which they don’t offer yet with the main clothing side of the business).

How much should an ecommerce site cost?

This is a question I’ve been asked recently, and the easy answer is anything from £200 up to £2,000,000, with most sites I imagine costing between £2,000 and £20,000.

A key factor is the scale of the site (do you have 10 products or 10,000 products) and obviously there is a wide spectrum of ecommerce solutions available, from an off-the-shelf standard template to bespoke solutions, through on-demand and open-source platforms. The total cost comprises upfront costs and monthly/ annual costs, and revenue-sharing can be an option.

This is an interesting estimation of the work (in person days) involved in developing an ecommerce site, as taught to ecommerce students at Kingston University, which amounts to 5 months work for one person full time, or more realistically a small agency working on a handful of projects.

Project planning including creative, technical, integration, budgeting, testing and promotion 9
Wireframing/diagramming of processes, logic and functionality 5
Agreement of functionality, specifications and plan within budget 2
Graphical design (within brand guidelines) 10
Conversion of design into templates and style sheets 5
Product modelling and database design 2
Design of decision support tools to help shoppers select, choose and experience 2
Design of customer service processes and systems 5
Implementation within shopping software, CMS or from scratch 15
Integration with stock and ordering systems 10
Integration with payment partner 2
Collection and manipulation of content 10
Testing for browsers, platforms and DDA compliance 10
Delivery and training (editorial and CMS) 2
TOTAL person days 92

I have been quoted £20,000 by agencies for a design and ecommerce solution, and then opted to do the design in-house and achieved the same result for £2,000 within 6 weeks with a hosted ecommerce solution. I also see plenty of projects posted on freelance websites like peopleperhour.com where ecommerce sites are built for less than £200.

There’s an interesting discussion here amongst ecommerce developers; Should an ecommerce site cost £1,000, £10,000 or £50,000?

Whether you’re spending £200 or £2 million the same considerations apply:

  • Be clear about what you want the site to achieve; think about what the customer wants and deliver a clear message
  • Scalability; plan for today and tomorrow
  • It’s easy to focus too much on the physical design at the expense of functionality; get the right ecommerce platform with the right functionality and you can make it look however you like
  • Think about issues like merchandising, promotions and stock availability sooner rather than later
  • Research thoroughly, and build usability into the design

Online logs

Hearing it might snow again, I thought I would try and buy some firewood online…

It’s interesting to compare the delivery strategies of these two sites, which both appear top of the organic listings; neither website gets it right in my opinion.

The first site, Onlinelogs.co.uk has good call to action (big buttons to “buy logs” and “buy kindling”). You are then given a quite sophisticated-looking pop up map of the UK which 5 or 6 coloured zones, although we’re not told the key to the zones. You then select your postcode area either by clicking on the map or from a drop-down menu. Only then can you see the products available, except that there are no prices – to see the price you need to enter a quantity of bags and click to get the quote, which includes delivery. Which is just as well as the header of the site promises Free Delivery in big red letters. It all seems needlessly complex, and not very customer friendly.

The second site shows prices and does actually offer free delivery (on orders over £50 which is most products). Although – ironically – it doesn’t inform the customer that delivery is free; not on the product pages, not in the shopping cart and not even on the delivery tab on the top menu.

Stating clear delivery costs throughout the site is one of the most effective ways to improve conversion rate on an ecommerce site; offering free delivery is even better. This is true of any ecommerce site, even more so when your product is bulky and heavy like firewood.

With a small amount of consumer testing and/or using Google analytics both of the these websites could improve conversion considerably.

Add to bread basket…

My local bakery in Stepney looks as if it hasn’t changed for decades, so it’s pleasantly surprising to see them embracing the online world with a modern-looking website, in fact two websites for trade and retail customers, and a Facebook page updated several times a week.

When I first discovered the site they were actually selling bread online, with a “add to bread basket” feature a nice touch… Although they don’t seem to be selling online currently, it’s a lovely example of a local business using a website and facebook to win new customers and build loyalty with existing customers.

Facebook has just updated me about the “Almond macs coming out of the oven…” – I might wander over and try some…

Stop designing websites, start designing posters

This is an unusual use of .gif product images on a patterned background in an online shop – perhaps inspired this trend for web design inspired by poster design.

I also like how the price (and all product text) is only shown when you mouse over the product. Not very search engine friendly, but a bold attempt to make the product the hero, and sell the sizzle not the steak.

What is the secret to a successful website?

This is a fantastic article – So true, I could have written it myself…

I particularly like the closing paragraph:

Management must realise just how complex a job it is [managing a website] and ensure you have time dedicated to its execution. Perhaps you should print off this article and give it to them.

What is the secret to a successful website?

Building usability into ecommerce design

With a specialist website, selling one product or category of products, thinking early on about the best way to present products can be beneficial. Not only will you improve usability and conversion rate from the start but it’s an opportunity to make the site stand out from competitors, both the not-as-well-designed specialist shops and the more general retailers using the same layouts to sell a huge variety of different products.

Two contrasting examples I’ve worked on are cutlery and umbrellas.

In the first example, Viners cutlery, I was responsible for the design. Through looking at other websites selling cutlery (good and bad), and understanding patterns of sales through the company’s other sales channels, I made sure each cutlery range was presented with a means of ordering cutlery sets and loose pieces all on the same page (without having to go back and forward to the shopping basket).

Hence this page…

product layouts - Viners

… is the same in terms the product hierarchy as this page…

product layouts - Viners 2

The difference being, a customer is much more likely to purchase more than one product from a range of cutlery (e.g. some knives and some forks, or a cutlery set and some extra teaspoons). With cookware, it’s less likely a customer would want to purchase more than one saucepan. And there’s more detailed information on a saucepan on the product detail page a customer would want to see before making the purchasing decision.

In my second example, Fulton Umbrellas, my involvement was much further down the line, when the design was almost complete. The first design I saw showed around 10 umbrellas on the womens page, mostly black and with technical descriptions like Superslim-1 and Open and Close – 3. This was the way the company presented the range to trade customers, but obviously not the optimal way on B2C online shop; because consumers don’t know the difference between a Superslim and an Open and Close, and because a consumer looking at that page wouldn’t know unless they clicked on it that the black umbrella pictured came in 10 different designs.

Unfortunately the ecommerce platform chosen was limited in the filter and sort views available; the ideal solution would have been to allow the customer to view by type, by colour, by pattern, by price etc. however, the least-bad option for launch was to show all the products.

product layouts - Fulton