Given that one of our most recent website builds was an e-commerce shop, we thought it appropriate to do a Focus post on a website of this kind. So, in our second Website Focus, we look at a French e-commerce store that sells a range of trendy and comfortable sportswear socks. Meet Archiduchesse.
There is no messing around on this site. The front page immediately shows you what’s on offer with thumbnail images of the socks. More than that, they are colour co-ordinated so that there’s a beautiful transition through all the colours of the rainbow. Starting with a deep red item that fades gradually into pinks, then purple, through to blue and so on. It’s instantly noticeable and very pleasing on the eye. The designer of the site also very cleverly matches the tone of the shopping basket in the top right corner to that of the first red and pink socks, giving a nice tight-knit (:P) feel.
But it doesn’t stop there. Even the size tabs beneath each image are matched to the colours of the products. This is a beautiful effect with the only slight drawback being that on lighter coloured garments the text colour doesn’t change to complement it. In some instances you can end up with white text on a light cream background, which can be slightly awkward to read. Overall though, the effect is very satisfying.
Not only do the tags show the available sizes in UK, European or US metrics (depending on what version of the site you’ve selected), but they are also only fully extended if the item is in stock in that size. If it isn’t, the tab is retracted. Clicking on the tab adds the product straight to your basket in the chosen size. Small but useful usability features.
The site also uses the classic tab effect for the main navigation. Something everyone is familiar with. But it’s extended further by using descriptive icons to represent the types of socks on offer.
When you reach the Info pages, you are presented with an image slider that displays images of the products at various stages of production. You feel like you’re getting an insight into what goes on behind the scenes, which is a good way to generate trust with your customers. Apart from this, there is little else on the page but the company’s mission statement. While I’m not a big fan of mission statements on websites, as long as they are as readable and user-friendly as this one, you can just about get away with it.
While the info page is bold and alluring in its simplicity, as a genuine shopper you’d still expect to find all the information regarding delivery and returns etc here. At least links to the appropriate pages. Instead this is all located in the footer, an area not as well recognised for housing important related info as the sidebar or main content area of the page itself.
However, in the footer, the links to the various delivery and contact details are displayed very nicely through monotone images that change colour on hover. The designer of the site has cleverly used one large image sprite in place of 6 smaller ones. This is a technique used to reduce the load time of the images and remove any split-second flickering that occurs when a user hovers over an image and is forced to wait while the hover-state image is downloaded.
Single Product Page
The single product pages are what really sell the products on this site. There is some excellent photography and a solid theme throughout. Each product has very similar shots – the product draped casually across a wooden model, the product as they would look as worn on a person, and then the product with the packaging that it comes in. They are slightly unconventional in that some photos only show part of the products and at extreme closeup, but for a product that relies largely on the aesthetic of comfort and texture, an obvious and appropriate technique.
The lighting is perfect – enough to show the products in great detail, and good enough to be able to stick the product text right on top of the image. No need for boxing out the text. A very nice technique, but only achievable with good understanding and co-operation of your photographer!
Again, the accompanying tags and tabs match each product’s colour. Excellent consistency.
Simple to navigate and gets straight to the point. The site focuses heavily on imagery and lets the products sell themselves. On top of that, they explain the reasoning behind their decision to sell directly to the consumer.
Archiduchesse pride themselves on their direct approach to selling – cutting out the middlemen and selling straight to the consumer. This is done to remove any costs involved with dealing with third parties such as wholesalers and retailers, and to counter the higher-than-average manufacturing costs in France. You get the feeling that if you bought from them, you wouldn’t just be getting a nice product, but you’d also be helping out a brave and independent little company as well. Rather than a large, faceless corporation. The whole brand has that safe and homely feel, and it’s aided by the neutral but satisfying design of the site. Most importantly of all – it makes you want to buy the products.