With Valentine’s Day coming up, gift basket and chocolate sites are gearing up. Let’s take a look at the main competitors to see how easy their sites are to use, as well as their visual draw.

See’s Candies

See’s Candies has had a specific branding look for a very long time, which works well because it is easy to recognize– they have black checkerboard stripes and a strong black logo. The way it was translated in their web site could use a bit of improvement. Each different box has been given its own black background, leaving the viewer overwhelmed by little pieces everywhere. A strong larger top black navigation bar that is solid would do a great deal to give a more streamlined look. Notice that their navigation is very small and difficult to read:

It also has a down arrow indicating more links, but in some browsers the dropdown does not work. Their left navigation is fortunately of a slightly larger size, but the links are too close to the left edge, making it difficult to quickly scan through:

The main advantage of the stark look of the site is to bring out the bright red and pink featured Valentine packages quite effectively. Even though the navigation of the overall site is difficult, within a few seconds of the site loading a visitor can find the Valentine section. Once in the area, a very simple and clear page has a thumbnail of each gift package with price clearly stated. The checkout is equally simple– it keeps a clean look without clutter and high quality photographs of the product so you know what is in the gift box.

Advantages: Quick checkout for Valentine Gifts, Lack of visual clutter
Disadvantages: Small type, Scattered Homepage, Difficult navigation, Not exciting

Ghirardelli Chocolate

This web site has a rich sumptuous quality to it that almost makes a visitor’s mouth water. It has strong contrasts and subtle browns giving the site an appearance of almost being a chocolate bar itself. There are clearly denoted sections set off with excellent food photography. The navigation bar links are a bit small, but still readable:

The dropdowns from them, however, are tiny, mashed together and almost impossible to navigate:

While the site is beautiful, it was difficult to find specific products or navigate about. Once on subpages, the visuals continued to be fantastic, but the text got smaller and smaller.

Advantages: Exciting design, Makes visitor want to purchase the product
Disadvantages: Can’t find anything, Very difficult to navigate, Tiny type

Mrs. Fields Cookies

The first impression is bright and cheery, although the photographs are a bit fussy looking, fuzzy and busy. If they either had fewer photos or better food photography it would definitely be a huge improvement. Like See’s, their top navigation is broken up into separate sections which tends to exaggerate the already scattered nature of the homepage design. There is also a red field around the top which is cut off as though it were a mistake. The colour field either needs to end along a horizontal plane (such as the top or bottom of the navigation bar) or continue down the sides. They also broke the main content area into three boxes with very thick red borders, which is hard to look at visually without being overwhelmed. The navigation is well organized, but the dropdown text is way too small.

As you can see, once on the main Valentine’s page, most of the space is wasted with a meaningless block of text that no-one will read. Gift baskets/boxes are all about visual appeal. The page gives the very opposite impression. A lot of the products have > in front of them which just makes the name difficult to read and looks like a mistake. Once on an actual product page there is a vast improvement. The Shopping cart section is easy to use with lots of great options, including what type of tin lid to have. They should really be promoting that on the rest of the site.

Another problem with the site is its use of colour– besides the odd top red field, there is also a strange yellowy green that is in large areas here and there on the site. You don’t want to put a somewhat sickly looking colour next to a food product.

After looking through a lot of the Mrs. Fields Photography, I have to come to the conclusion that a darker background would be advisable. Normally you never want to use black or dark brown as the basis of a web site since it is so gloomy, but there are a couple of exceptions. Fine art and photography is best served with a dark background, and the type of food products on this site would also benefit from being in a less harshly white environment. The colour fields behind text could still be white, but I think the site would benefit by having more rich dark browns as the main colour rather than fighting huge white areas.

Advantages: Well done shopping cart options
Disadvantages: Navigation broken up and dropdown text too small, site is difficult to look at with its poor use of colour and photography, too much text and not enough quick access to products, hard to find products

Hershey’s Chocolate

Here is an example of a site that uses rich browns as the base colour quite effectively. Even the navigation bar looks like a series of chocolate bars that gets a visitor excited about the product:

The moving images on the homepage get a bit old after a while because they are on a loop. It is usually best to have a rotation like that end at some point so people can safely look around at the navigation options without a distracting blur in half the page. Upon clicking on the various sections, the site begins to break down. It continues to have a fresh, inviting visual look of chocolate and interesting background patterns, but the text gets too small.

The side navigation is still a decent size, but there start to be too many little design elements here there and everywhere. The left has little dots by each link, the right has constant hr dotted lines of a different size, the top navigation keeps changing its look and they all start adding up to a very complex site that is no longer easy to maneuver through. The text size gets smaller and smaller, the pages more and more difficult to use and the main content area is divided into columns that are so narrow I’m surprised they fit anything at all. See the below three column format:

Advantages: Lovely sumptuous visual look of the product, clean interesting top navigation bar
Disadvantages: Miniscule text, almost impossible navigation, too many site elements vying with each other, main content area too narrow

Fortnum & Mason

It is interesting to see what other countries are doing with their site design in the same product genre. This is one of the finest British gift basket lines. They have a very clean, yet elegant look using interesting sorts of lines to indicate various areas of the site. They keep their main boxes together more in a tab structure, rather than having bits and pieces all over the homepage. Their bottom navigation bar is large and easy to read:

Whereas their top navigation could definitely go up a few point sizes.

The navigation is very organized, however, and if it were only larger the site would become very easy to navigate through. Like Mrs. Fields, they also have a text area in their valentine section, but take a look at how different it appears. They used some fantastic photography to highlight their product line, and while the text itself is way too small, the overall effect is excellent.

They have their Valentine products all carefully arranged similar to See’s with thumbnail and large price which is great when trying to scan through the products quickly. Individual pages have excellent photography like the rest of the site, but like the Americans, the text is unreadable.

I’m not sure why any site trying to sell a product thinks people like type sizes that only a 20/20 vision visitor with lots of time on their hands to squint through reading can navigate.

Advantages: Elegant visually pleasing design, clear navigation, excellent photography and organization
Disadvantages: Text is too small to read, particularly the navigation and main product pages