FRONT

FRONT featured in .NET Magazine

Jewellery ecommerce stores need to reflect the elegance of their products, and Celtic Style (http://www.celtic-style.com) is one that’s in need of some sparkle. We asked Jamie Neely of Northern Irish agency Front to create a fresh look.

After Jamie’s Makeover

The site’s aims would appear to be simple - offer customers an appealing range of contemporary, authentic gifts, and encourage those customers to buy through a painless shopping experience. Visiting the current Celtic Style website is an experience that simply doesn’t match the tasteful and elegant product that is being sold there. When planning the redesign, our approach was to increase sales by putting a design and user experience together that would be reflective of the type of product being sold.

Jewellery isn’t a commodity purchase like books or DVDs, so customers are unlikely to be buying based on price alone. This lead us to look at three key areas - the overall aesthetic, the user interface design and the site’s content. Although search engine optimisation and website promotion is always important, we felt the site’s conversion ratio was likely to be low and that a better return would result from addressing the site’s design at first.

Overall Aesthetic

For potential customers to consider purchasing from the site, its essential that it is welcoming and inviting. The current pebbled background doesn’t have any realy connection to the products being sold and the green / emerald colours are a bit grey and drab. The bevelled logo is a bit cliched and The typography is difficult to read and uses unusual letter and line-spacing.

We’ve used a slightly richer design approach with gradients and a satin background for the featured image. Overall, the use of colour and typography helps give the site a stronger sense of purpose and is more in keeping with the content.

User interface design

The current site is a little confusing. Problems with the current site include a sparse, uninteresting homepage which fails to engage visitors to the site and doesn’t make it clear where to go next. The rollover navigation for sub-categories is very fiddly (and completely inaccessible), making it difficult to delve deeper into the site. The persistent options for registration and login are off-putting with too many form fields and will create the impression for some users that you must register before going any further.

We’ve simplified and re-organised the information architecture to better match audience motivations when visiting the site so that content and functionality support these. The site’s main navigation is now clearer, and is based on the primary categories of product available. We have also updated the home page to make the site’s purpose and content clearer - Jakob Nielsen has a great, concise article (http://www.useit.com/alertbox/20020512.html) on making the most of your homepage real estate and we’ve applied these principles here.

Additional options for search and my basket have been moved to the header, which is consistent with most customers experience of buying from e-commerce sites.

Content

Good shop homepages are all about product. The products on this website are creative and distinctive so we really need to expose the user to as much product imagery as possible to help them make up their mind. Again, Jakob Nielsen’s advice (in his report: E-commerce User Experience), is that small product images are a major gripe for online shoppers.

The homepage now showcases real content by including a product showcase and examples and links to other products within the site. We’ve used a large, appealing image here and made better use of the photography throughout the site - its really important to use photography consistently. Mixing and matching different types of image just looks unprofessional.

We’ve also made the idea of collections more obvious, to help users searching for a particular style of product as well as those looking for something within a particular category such as jewellery / candles etc.

Underneath the bonnet

Even a cursory glance at the source code for the site will tell you that although the site validates as XHTML 1.0 Transitional, the use of tables for display non-tablular data and the javascript rollover menus are big issues from an accessibility and SEO perspective. <div id="ctl00_MainSiteMenun0Items"> won’t be easily understood by anyone. We would recommend a more semantic approach to the markup and the CSS could be tidied away into a separate stylesheet quite easily.

Moving Forward

Key challenges for Celtic Style going forward are going to revolve around ensuring that the site remains current. Keeping your website up to date is easily said but can prove to be much harder in practice. Key to the site’s success will be up to date and easily found product information. Although the site is currently running on a .net content management system, its equally important to makes sure that the company’s people and processes are geared up for this - CMS is only a tool to help, after all.

Its important to remember that any site should be monitored and reviewed on a regular basis to help continually improve it. Over time, data from tools like the free to use Google Analytics (www.google.co.uk/analytics) can inform your understanding of user behaviour and allow you to tailor the design accordingly, then measure the impact of those changes in the usage data.

Other opportunities to develop the site would include more comprehensive website promotion, using SEO, cost-per-click advertising, permission based email marketing and possibly more innovative approaches such as blogging would work well here.

Website Identity

We have including a photographic image of jewellery along side the logo and strap line describing to help describe what the website sells. This should help immediacy of working out if you have arrived at the right (or wrong) type of website you were looking for.

Points of interest

Although many people will be comfortable clicking directly on the image of a product, it is also important to present associated links that are clear and recognisable. In this instance a coloured price point helps the user isolate prices on a page when visually scanning and also confirms that the price is a link because of its colour. By also using a softly bevelled button we are encouraging clickability and speed of browsing.

Obvious Shipping Information

Often when a user is visiting an ecommerce website for the first time, once interested, they will look for confirmation that they can actually receive the product in question.

Rich Visual Treatment

By taking some of the best product images and applying simple effects such as textured backgrounds we have been able to create a more realistic and appealing look. We have also added some subtle gradients to the website graphic themselves to add another level of depth.

Simple Navigation

We opted for a horizontal tabbed navigation system with simplified labels to replace the existing confusing mixture of links, arrows and dropdowns on the current website. We have also reprioritised so that utilities such as T’s & C’s in a less prominent position and in a more appropriate link style.