Tag: design

Collect in store – an elegant example from The Futon Company

This is an elegant example of offering a “collect in store” option. I think all too often “reserve and collect” on an ecommerce site can be overly complex, with too many checkout stages, an unnecessary search to locate your nearest store, and restrictions on which products can be collected from which stores.

The Futon Company admittedly only has 20 or so stores, and probably most orders would be for a single item; the checkout process gets less elegant later on if you want to amend products and delivery options. But I do like the simplicity of presenting the store options on the product page, and how the the benefit (“Collect from Store save £45″) is communicated.

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.

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

What to believe?

“Whizzy imagery out-performs ratings and reviews in Adobe survey”

A survey by Adobe concluded the following are effective in increasing conversion rate.

  • Product tours or multi-media viewing which combines guided spin, zoom imagery, videos or animations with copy (36%
  • Visual filtering and advanced search on product features including size, color, and price (33%)
  • User comments and reviews (32%)
  • Search landing pages (32%)
  • Product comparisons (28%)
  • Zoom (28%)

Well, looking at the numbers not significantly, and it does seem like a convenient conclusion for Adobe, who sell “whizzy imagery”…

Also today I was interested to read this discussion questioning the value of “trustmarks” such as McAfee, with plenty of examples where adding such logos actually decreased conversion rate.

The key lesson from these two examples is to take claims to improve conversion rate with a pinch of salt. Work out what’s most appropriate to your business. Tackle the low-hanging fruit first. And test everything.

Thumbnail images; Two ways to cope with different aspect ratios

Most online shops standardise the dimensions of thumbnail images – for obvious reasons of neatness. In fact, by default most thumbnail images are either square or slightly portrait.

But what happens if you have a wide range of products and hence images – long and thin products, and short and wide products? How do you maximise the impact of the images whilst avoiding a lot of white space?

Two solutions I’ve found are:

The Holding Company – all images are 170px width, but heights range from 100px to over 300px. This works because the images are vertically-centered on a background colour, balanced with a large text box at the bottom.

The Holding Company

Moss.co.uk – images are all the same width 185px and either 429px tall (full length – suits and trousers) or 215px (tops and accessories). Within each category images are likely to be the same type, so there’s a uniformity – you either look at all the suits together, or all the shirts together. An exception is the search results (e.g. I searched for “blue”products), but the designers have obviously weighed up the benefits of large, full thumbnail images vs the likelihood of seeing slightly messy search results. Besides, search results by default group the types of products together, and even price-based results will group similar products e.g. suits together.

Moss.co.uk

WordPress as a quick and free Ecommerce platform

I’ve been discovering how fantastic WordPress is – not just for blogging but as a CMS and also as an ecommerce solution.

exclusivef1experiences.co.uk

www.exclusivef1experiences.co.uk is a little site I’ve designed from scratch, offering around 20 products (tickets to the Monaco 2010 Grand Prix) for sale using PayPal payments.

This uses a free plugin (WP Shopping cart) which is so easy you can literally set up a new website with a product for sale in 5 minutes as the video below demonstrates. Once I’d mastered the basics of WordPress, ExclusiveF1Experiences took me about a day to set up.

The basic WP Shopping cart plugin only allows you to list products, not as a grid, and I think would really only work for up to 20 or so products. However, the there are inexpensive upgrades to allow more flexibility, and with or without programming skills there’s a huge amount of scope, and sites listing 100s and 1000s of products using it – as this showcase demonstrates.