Valenzano Winery

Project Statistics

Client: Valenzano Winery
URL: http://valenzanowine.com
Build Date: August-October 2007
Site Format: XHTML
Features: Flash Menus, AJAX Front-End
Noteworthy: 4,851 lines of code

Introduction

In the fall of 2007, I was approached by Valenzano Winery to revamp their website. Their winery, located in southern New Jersey, caters to wine drinkers throughout the state. They were looking to expand their business by boosting their online presence.

I took a look at their existing site and quickly assessed the situation. The typical, templated Content Management System (CMS) drove the site. Sure, they could easily add new content, but there wasn't much in the way of visual stimuli. The site was bleak, devoid of imagery, and the color scheme was far from ideal.

Figure 1: The Original Homepage of Valenzano Winery

The changes necessary were more than skin deep, though. The site's wine selection page was confusing. The inventory was listed in no logical order, and again - no imagery to support the content. After viewing subsequent pages, I recommended to the customer that in addition to a facelift, we also readjust the content flow of the site.

Getting Started

To begin work on the site, I first hammered out a new design. The customer wanted a more modern look for the site, an untraditional style, apart from your classic 14th century vineyard in Bordeaux. I started with a more palatable color scheme. Hues of red and burgundy mixed with shades of grey. White was used sparingly to keep things fresh and to add overall balance.

Figure 2: The Valenzano Winery Logo Exhibits All of the Colors Employed On the Site

Once the color scheme had been decided, I mocked up a new layout. I worked closely with the customer to ensure the new layout integrated all of the important functions of their previous site, and at the same time consolidated some of the content flow to make the site more user-friendly and navigable. Once the new design was approved, I then began the process of hashing out the site into pages and developing them one at a time.

Nuts and Bolts

Taking a look under the hood, there are a few noteworthy features that were implemented in this site. Flash was used mainly as a presentation layer, or where necessary, to create more interactive menus. Primarily, the Wine Selection page makes use of a Flash menu to display each wine bottle, however when a bottle is selected, the information is then delivered via AJAX in the content area below. The wine menu is also duplicated for faster searching through inventory.

Figure 3: The Wine Selection Page - A Flash/AJAX Hybrid

Another area where Flash was used, was on the Retailers page. I created a map of the state of New Jersey and broke it down by counties. I then made each county selectable. When the user clicks on a county, a list of retailers is displayed. All of the retailers are stored conveniently in an XML document, so the customer can make any additions or changes that they wish and that information will be updated without altering the presentation.

Figure 4: XML-Driven Retailers Page Menu

There are two contact forms for this site. Both of which have some hefty form validation going on. Its a matter of checks and balances. The customer had problems in the past with bots. They had added a visual confirmation system to try and avoid more bots registering for the contact newsletter. I try to avoid visual confirmations wherever possible, so I put a little more effort into ensuring the forms weren't easily manipulated.

Final Thoughts

I was pretty happy with the way this site turned out. When I first got involved with it, epecially during the initial concept stage, I thought it was going to end up looking more traditional, but the direction it ended up going is a departure from an atypical winery, and that seemed to work out well.